<template>
    <el-dialog
        v-model="visible"
        title="发货"
        width="500px"
        :close-on-click-modal="false"
        @closed="handleClosed"
    >
        <div class="order-info">
            <div
                >订单商品：<span
                    v-for="(item, index) in orderInfo.items"
                    :key="index"
                >
                    <img
                        :src="item.image"
                        style="width: 40px; height: 40px; object-fit: cover"
                    /> </span
                >共{{ orderInfo.totalNum }}件</div
            >
            <div>
                收货地址：{{ orderInfo.receiveName }}，{{
                    orderInfo.receiveMobile
                }}，
                {{ orderInfo.receiveAddress }}
            </div>
        </div>

        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="物流单号" prop="waybillCode">
                <el-input
                    v-model="form.waybillCode"
                    placeholder="请输入物流单号"
                />
            </el-form-item>
            <el-form-item label="配送方式" prop="expressType">
                <el-select
                    v-model="form.expressType"
                    placeholder="请选择配送方式"
                    style="width: 100%"
                >
                    <el-option label="快递" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="物流公司" prop="expressName">
                <dict-data
                    code="erp_express_name"
                    type="select"
                    value-key="dictLabel"
                    v-model="form.expressName"
                    placeholder="请选择物流公司"
                    style="width: 100%"
                />

                <el-text type="info"> 同一订单拆分成多个包裹发货？ </el-text>
                <el-text
                    type="primary"
                    style="cursor: pointer"
                    @click="handleSplit"
                    >填写多个单号</el-text
                >
            </el-form-item>
            <el-form-item
                label="物流子单号"
                prop="waybillChildCode"
                v-if="splitVisible"
            >
                <el-input
                    v-model="form.waybillChildCode"
                    placeholder="请输入物流子单号"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="visible = false">返回</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import { ElMessage } from 'element-plus';
    import DictData from '@/components/DictData/index.vue';

    const visible = ref(false);
    const formRef = ref(null);
    const { proxy } = getCurrentInstance();

    const form = reactive({
        refundOrderId: null,
        expressType: '1',
        expressName: '',
        waybillCode: '',
        waybillChildCode: '',
        waybillCodeList: []
    });

    const orderInfo = ref({
        items: [],
        totalNum: 0,
        receiveAddress: ''
    });

    // 拆分单号
    const splitVisible = ref(false);
    function handleSplit() {
        splitVisible.value = true;
    }

    const rules = {
        waybillCode: [
            { required: true, message: '请输入物流单号', trigger: 'blur' }
        ],
        expressType: [
            { required: true, message: '请选择配送方式', trigger: 'change' }
        ],
        expressName: [
            { required: true, message: '请选择物流公司', trigger: 'change' }
        ]
    };

    // 打开弹窗
    const handleOpen = (row) => {
        if (!row) return;
        visible.value = true;
        form.refundOrderId = row.refundOrderId;
        // 设置订单信息
        orderInfo.value = row;
    };

    // 关闭弹窗
    const handleClosed = () => {
        formRef.value?.resetFields();
        Object.assign(form, {
            refundOrderId: null,
            expressName: '',
            waybillCode: ''
        });
    };

    const emit = defineEmits(['success']);
    // 提交表单
    const handleSubmit = async () => {
        if (!formRef.value) return;

        await formRef.value.validate();
        let params = JSON.parse(JSON.stringify(form));
        params.waybillCodeList = params.waybillChildCode
            ? [params.waybillCode, params.waybillChildCode]
            : [params.waybillCode];

        proxy.$http.post('/order/orderInfo/refund/send', params).then((res) => {
            if (res.data.code === 200) {
                ElMessage.success('发货成功');
                visible.value = false;
                emit('success');
            } else {
                ElMessage.error(res.data.msg || '发货失败');
            }
        });
    };

    defineExpose({
        handleOpen
    });
</script>

<style lang="scss" scoped>
    .order-info {
        padding: 16px;
        background: #f5f7fa;
        border-radius: 4px;
        margin-bottom: 20px;

        > div {
            line-height: 24px;
            margin-bottom: 8px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .dialog-footer {
        padding-top: 20px;
        text-align: right;
    }
</style>
