<!-- 编辑弹窗 -->
<template>
    <ele-modal
        form
        :width="800"
        v-model="visible"
        title="推送短信"
        @open="handleOpen"
    >
        <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="80px"
            @submit.prevent=""
        >
            <el-form-item label="短信类型" prop="type">
                <el-radio-group v-model="form.type" @change="handleChangeType">
                    <el-radio
                        :value="item.type"
                        v-for="item in smsContentList"
                        :key="item.type"
                        >{{ item.typeName }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item label="短信预览" prop="remark">
                <el-input
                    :rows="4"
                    type="textarea"
                    v-model="form.remark"
                    disabled
                    placeholder="请输入短信预览"
                />
            </el-form-item>
            <el-form-item label="推送历史" prop="records">
                <ele-data-table
                    row-key="id"
                    :columns="columns"
                    :data="smsRecords"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';

    const { proxy } = getCurrentInstance();
    const emit = defineEmits(['success']);

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 表单引用 */
    const formRef = ref();

    /** SMS记录数据 */
    const smsRecords = ref([]);

    const form = reactive({
        orderId: null,
        type: '',
        remark: ''
    });

    /** 短信类型 */
    const handleChangeType = (val) => {
        form.remark = smsContentList.value.find(
            (item) => item.type === val
        ).smsContent;
    };

    /** 表单验证规则 */
    const rules = reactive({
        type: [
            {
                required: true,
                message: '请选择短信类型',
                trigger: 'change'
            }
        ],
        remark: [
            {
                required: true,
                message: '请输入短信预览',
                type: 'string',
                trigger: 'blur'
            }
        ]
    });

    // 表格数据
    const columns = reactive([
        { label: '发送人', prop: 'createName', width: 100 },
        { label: '发送内容', prop: 'smsContent' },
        { label: '发送时间', prop: 'createTime', width: 120 },
        {
            label: '发送状态',
            prop: 'status',
            width: 80,
            formatter: (row) => (row.status == 1 ? '成功' : '失败')
        }
    ]);

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
        resetForm();
    };

    /** 重置表单 */
    const resetForm = () => {
        form.orderId = null;
        form.type = '';
        form.remark = '';
        formRef.value?.resetFields();
    };

    /** 弹窗打开事件 */
    const handleOpen = (row) => {
        resetForm();
        if (row && row.orderId) {
            console.log(row, 'xxx');
            visible.value = true;
            getSmsLogInfo(row.orderId);
        }
    };

    /** 获取短信记录信息 */
    const smsContentList = ref([]);
    const getSmsLogInfo = (orderId) => {
        proxy.$http.get(`/order/orderSmsLog/getInfo/${orderId}`).then((res) => {
            if (res.data.code === 200) {
                let data = res.data.data || [];
                form.orderId = data.orderId;
                smsRecords.value = data.smsLogList;
                smsContentList.value = data.smsContentList;
            } else {
                EleMessage.error(res.data.msg || '获取短信记录失败');
            }
        });
    };

    /** 提交表单 */
    const handleSubmit = () => {
        formRef.value?.validate(async (valid) => {
            if (!valid) return;
            proxy.$http
                .post('/order/orderSmsLog/send', {
                    orderId: form.orderId,
                    type: form.type,
                    smsContent: form.remark
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        EleMessage.success('短信发送成功');
                        emit('success');
                        handleCancel();
                    } else {
                        EleMessage.error(res.data.msg || '短信发送失败');
                    }
                });
        });
    };

    defineExpose({
        handleOpen
    });
</script>
