<!-- 编辑弹窗 -->
<template>
    <ele-modal
        form
        :width="760"
        v-model="visible"
        title="商城订单备注"
        @open="handleOpen"
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="选择标签" prop="label">
                <el-radio-group v-model="form.label">
                    <el-radio v-for="item in tags" :value="item" :key="item"
                        ><el-icon :color="item" :size="18"> <Flag /> </el-icon
                    ></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注信息" prop="remark">
                <el-input
                    :rows="4"
                    type="textarea"
                    v-model="form.remark"
                    placeholder="请输入备注"
                />
            </el-form-item>
        </el-form>

        <orderTimeline
            title="备注历史记录"
            :orderId="form.orderId"
            ref="timelineRef"
        />

        <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 } from 'vue';
    import { Flag } from '@element-plus/icons-vue';
    import { EleMessage } from 'ele-admin-plus';
    import orderTimeline from './order-timeline.vue';
    import request from '@/utils/request';

    const tags = reactive(['green', 'blue', 'yellow', 'red', 'purple']);

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

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

    const form = ref({
        orderId: '',
        label: '',
        remark: ''
    });

    const timelineRef = ref(null);

    /** 弹窗打开事件 */
    const handleOpen = () => {
        nextTick(() => {
            if (form.value.orderId && timelineRef.value) {
                timelineRef.value.getRemarks(form.value.orderId);
            }
        });
    };

    const open = (orderId) => {
        form.value = {
            orderId: orderId,
            label: '',
            remark: ''
        };
        visible.value = true;
    };

    /** 刷新事件 */
    const emit = defineEmits(['refresh']);

    /** 确定 /shop/shopOrderRemark/addRemark */
    const formRef = ref(null);
    const handleSubmit = () => {
        formRef.value.validate((valid) => {
            if (valid) {
                const url = '/shop/shopOrderRemark/addRemark';
                request.post(url, form.value).then((res) => {
                    if (res.data.code === 200) {
                        EleMessage.success('操作成功');
                        handleCancel();
                        emit('refresh');
                    } else {
                        EleMessage.error(res.data.msg);
                    }
                });
            }
        });
    };

    /** 表单验证规则 */
    const rules = reactive({
        label: [
            {
                required: true,
                message: '请选择标签',
                type: 'string',
                trigger: 'change'
            }
        ],
        remark: [
            {
                required: true,
                message: '请输入备注信息',
                type: 'string',
                trigger: 'blur'
            }
        ]
    });

    defineExpose({
        open
    });
</script>
