<template>
    <a-row :gutter="8" :wrap="false">
        <a-col flex="auto">
            <a-card>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-card title="会员等级">
                            <a-form :model="leftForm" ref="leftFormRef" :label-col="{ style: { width: '80px' } }"
                                :wrapper-col="{ style: { flex: 1 } }">
                                <a-row :gutter="gutter">
                                    <a-col v-bind="colSpan" :span="24">
                                        <a-form-item label="批量发送" name="is_all"
                                            :rules="[{ required: true, message: '请选择' }]">
                                            <a-switch v-model:checked="leftForm.is_all" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col v-bind="colSpan" :span="24" v-if="!leftForm.is_all">
                                        <a-form-item label="接收手机" name="phones"
                                            :rules="[{ required: true, message: '请输入手机号' }]">
                                            <a-input placeholder="请输入" v-model:value="leftForm.phones" />
                                             <span style="color: #f36f6f;font-size: 12px;">多个手机号用，隔开</span>
                                        </a-form-item>
                                       
                                    </a-col>
                                    <a-col :span="24">
                                        <a-space>
                                            <a-button ghost type="primary" @click="handleLv">
                                                确认
                                            </a-button>
                                        </a-space>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </a-card>
                    </a-col>
                    <a-col :span="12">
                        <a-card title="活动通知">
                            <a-form :model="rightForm" ref="rightFormRef" :label-col="{ style: { width: '80px' } }"
                                :wrapper-col="{ style: { flex: 1 } }">
                                <a-row :gutter="gutter">
                                    <a-col v-bind="colSpan" :span="24">
                                        <a-form-item label="批量发送" name="is_all"
                                            :rules="[{ required: true, message: '请选择' }]">
                                            <a-switch v-model:checked="rightForm.is_all" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col v-bind="colSpan" :span="24" v-if="!rightForm.is_all">
                                        <a-form-item label="接收手机" name="phones"
                                            :rules="[{ required: true, message: '请输入手机号' }]">
                                            <a-input placeholder="请输入" v-model:value="rightForm.phones" />
                                            <span style="color: #f36f6f;font-size: 12px;">多个手机号用，隔开</span>
                                        </a-form-item>
                                    </a-col>
                                    <a-col v-bind="colSpan" :span="24">
                                        <a-form-item label="信息内容" name="msg">
                                            <a-input placeholder="请输入" v-model:value="rightForm.msg" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col class="align-right" v-bind="colSpan">
                                        <a-space>
                                            <a-button ghost type="primary" @click="handleActivity">
                                                确认
                                            </a-button>
                                        </a-space>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </a-card>
                    </a-col>
                </a-row>
            </a-card>
        </a-col>
    </a-row>
</template>

<script setup>
import { message, Modal } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import apis from '@/apis'

const leftFormRef = ref();
const rightFormRef = ref();
const leftForm = reactive({
    is_all: false,
    phones: '',
})
const rightForm = reactive({
    is_all: false,
    phones: '',
    msg: '',
})

async function handleLv() {
    if (!leftForm.phones && !leftForm.is_all) {
        message.error('请输入手机号')
        return
    }
    try {
        const { data, success } = await apis.message.sendLvMessage({
            is_all: leftForm.is_all,
            phones: leftForm.phones,
        })
        if (!success) {
            return
        }
        message.success('发送成功')
        leftForm.phones = ''
        leftForm.is_all = false
    } catch (error) {
        message.error({ content: error.message })
    }
}

async function handleActivity() {
    if (!rightForm.phones && !rightForm.is_all) {
        message.error('请输入手机号')
        return
    }
    try {
        const { data, success } = await apis.message.sendActivityMessage({
            is_all: rightForm.is_all,
            phones: rightForm.phones,
            msg: rightForm.msg,
        })
        if (!success) {
            return
        }
        message.success('发送成功')
        rightForm.phones = ''
        rightForm.is_all = false
        rightForm.msg = ''
    } catch (error) {
        essage.error({ content: error.message })
    }
}

</script>