<template>
    <PageHeader :title="title">
    </PageHeader>
    <div style="margin-top: 20px">
        <Divider orientation="left">发送邮件</Divider>
        <RadioGroup v-model="buttonSize" type="button">
            <Radio label="large" @click="showMoadl('获批')">制作并发送获批信</Radio>
            <Radio label="default" @click="showMoadl('拒签')">制作并发送拒签信</Radio>
            <Radio label="small" @click="showMoadl('补件')">制作并发送补件信</Radio>
        </RadioGroup>
        <Divider orientation="left">模拟影刀</Divider>
        <Button @click="modal2 = true">制作visa并发送</Button>
        <Modal :title="Ty.title" v-model="modal" class-name="vertical-center-modal" @on-cancel="closeShow">
            <Form ref="letterRef" :model="letterInfo" :rules="letterRule" :label-width="80">
                <FormItem label="姓名" prop="name">
                    <Input v-model="letterInfo.name" placeholder="请输入用户姓名"></Input>
                </FormItem>
                <FormItem label="档案号" prop="fileNumber">
                    <Input v-model="letterInfo.fileNumber" placeholder="请输入档案号"></Input>
                </FormItem>
                <FormItem v-if="Ty.getday" :label="Ty.getday">
                    <DatePicker type="date" :placeholder="'请输入' + Ty.getday" v-model="letterInfo.getday"></DatePicker>
                </FormItem>
                <FormItem v-if="Ty.deadline" :label="Ty.deadline">
                    <DatePicker type="date" placeholder="请输入缴费截至日期" v-model="letterInfo.deadline"></DatePicker>
                </FormItem>
                <FormItem label="环境" prop="environment">
                    <Select v-model="letterInfo.environment">
                        <Option v-for="item in environment" :value="item.id" :key="item.id">{{ item.type }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button :disabled="letterButton" type="primary" @click="send()">发送</Button>
            </template>
        </Modal>

        <Modal title="电子签证" v-model="modal2" class-name="vertical-center-modal" @on-cancel="closeShow2">
            <Form ref="visaRef" :model="visaInfo" :rules="visaRule" :label-width="80">
                <FormItem label="姓名" prop="name">
                    <Input v-model="visaInfo.name" placeholder="请输入用户姓名"></Input>
                </FormItem>
                <FormItem label="档案号" prop="file_number">
                    <Input v-model="visaInfo.file_number" placeholder="请输入档案号"></Input>
                </FormItem>
                <FormItem label="订单号" prop="order_id">
                    <Input v-model="visaInfo.order_id" placeholder="请输入订单号"></Input>
                </FormItem>
                <FormItem label="赴港证件" prop="go_type">
                    <Select v-model="visaInfo.go_type">
                        <Option v-for="item in pass" :value="item.type">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="缴费时间">
                    <DatePicker type="date" placeholder="请输入缴费时间" v-model="visaInfo.pay_time"></DatePicker>
                </FormItem>
                <FormItem label="签证激活截止日期">
                    <DatePicker type="date" placeholder="请输入签证激活截止日期(首次赴港拘留期限)" v-model="visaInfo.deadline">
                    </DatePicker>
                </FormItem>
                <FormItem label="环境" prop="environment">
                    <Select v-model="visaInfo.environment">
                        <Option v-for="item in environment" :value="item.id" :key="item.id">{{ item.type }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="closeShow2()">取消</Button>
                <Button :disabled="visaButton" type="primary" @click="send2()">发送</Button>
            </template>
        </Modal>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, reactive, watch } from 'vue'

const { proxy, ctx } = getCurrentInstance()

let Message = proxy.$Message

let http = proxy.$request


const page_id = ref(22)
let title = ref("邮件工具")
let modal = ref(false)
let modal2 = ref(false)
let senType = ref(null)

let letterButton=ref(false)
let visaButton=ref(false)

const Ty = reactive({
    title: null,
    getday: null,
    deadline: null
})

const letterRef = ref(null)

const visaRef = ref(null)


const letterInfo = reactive(
    {
        name: null,
        fileNumber: null,
        deadline: null,
        getday: null,
        environment: 1
    })

const letterRule = reactive({
    name: { required: true, message: '姓名必填', trigger: 'blur' },
    fileNumber: { required: true, message: '档案号必填', trigger: 'blur' },
    environment: { type:"number",required: true, message: '环境必填', trigger: 'change' },
})

const visaInfo = reactive({
    name: null,
    file_number: null,
    go_type: null,
    pay_time: null,
    deadline: null,
    stay_month: null,
    order_id: null,
    environment: 1
})

const visaRule = reactive({
    name: { required: true, message: '姓名必填', trigger: 'blur' },
    file_number: { required: true, message: '档案号必填', trigger: 'blur' },
    go_type: { required: true, message: '赴港证件类型必填', trigger: 'change' },
    order_id: { required: true, message: '订单号必填', trigger: 'blur' },
    environment: {type:"number",required: true, message: '环境必填', trigger: 'change' },
})

const pass = reactive([
    {
        name: "港澳通行证",
        type: "passcard"
    }, {
        name: "护照",
        type: "passport"
    }
])

function resetletterInfo() {
    Object.assign(letterInfo, {
        name: null,
        fileNumber: null,
        deadline: null,
        getday: null,
        environment: 1
    })
}

function resetVisaInfo() {
    Object.assign(visaInfo, {
        name: null,
        file_number: null,
        go_type: null,
        pay_time: null,
        deadline: null,
        stay_month: null,
        order_id: null,
        environment: 1
    })
}

watch(() => senType.value,
    (newVal, oldval) => {
        switch (newVal) {
            case '获批':
                Ty.title = '制作并发送获批信'
                Ty.getday = '获批日期'
                Ty.deadline = "缴费截至日期"
                break
            case '拒签':
                Ty.title = '制作并发送拒签信'
                Ty.getday = '拒签日期'
                Ty.deadline = null
                break
            case '补件':
                Ty.title = '制作并发送补件信'
                Ty.getday = null
                Ty.deadline = "补件日期"
                break
            default:
                Ty.title = null
                Ty.getday = null
                break
        }
    })

const environment = reactive(
    [{
        type: "测试环境",
        id: 1
    }, {
        type: "线上环境",
        id: 2
    }
    ]
)

function showMoadl(type) {
    senType.value = type
    modal.value = true
}

function closeShow() {
    resetletterInfo()
    modal.value = false
}

function closeShow2() {
    resetVisaInfo()
    modal2.value = false
}

function send() {
    letterRef.value.validate((valid) => {
        if (valid) {
            letterButton.value=true
            http('post', '/tool/makesendletter', { ...letterInfo, type: senType.value }, null, () => {
                Message.success('发送成功');
                letterButton.value=false
            },()=>{
                letterButton.value=false
            })
        } else {
            this.$Message.error('请完善信息!');
        }
    })
}

function send2() {
    visaRef.value.validate((valid) => {
        if (valid) {
            visaButton.value=true
            http('post', '/tool/makesendvisa', visaInfo, null, () => {
                Message.success('发送成功');
                visaButton.value=false
            },()=>{
                visaButton.value=false
            })
        } else {
            this.$Message.error('请完善信息!');
        }
    })
}


</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>