<template>
    <el-dialog
        v-model="visible"
        title="任务详情"
        width="80%"
        :close-on-click-modal="false"
        destroy-on-close
        :body-style="{ padding: '0px' }"
    >
        <el-tabs v-model="activeTab">
            <el-tab-pane label="任务详情" name="detail">
                <common-table
                    :pageConfig="detailConfig"
                    :columns="detailColumns"
                    :tools="false"
                    :body-style="{ padding: '10px' }"
                >
                    <template #action="{ row }">
                        <div>
                            <el-button
                                type="danger"
                                link
                                v-permission="'recycleService:stockOff:close'"
                                @click="handleOperate(row, 3)"
                                v-if="row.status == 1"
                            >
                                关闭
                            </el-button>
                        </div>
                    </template>
                </common-table>
            </el-tab-pane>
            <el-tab-pane label="操作记录" name="log">
                <common-table
                    :pageConfig="logConfig"
                    :columns="logColumns"
                    :tools="false"
                    :body-style="{ padding: '10px' }"
                />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import { useDictData } from '@/utils/use-dict-data';

    const visible = ref(false);
    const activeTab = ref('detail');
    const currentTask = ref(null);

    const statusDicts = ref([
        { label: '待处理', value: 1 },
        { label: '已完成', value: 2 },
        { label: '已关闭', value: 3 }
    ]);

    const detailColumns = ref([
        {
            label: '操作',
            prop: 'operation',
            align: 'center',
            slot: 'action',
            width: 100
        },
        {
            label: '作业状态',
            prop: 'status',
            align: 'center',
            width: 120,
            formatter: (row) =>
                statusDicts.value.find((d) => d.value == row.status)?.label
        },
        { label: '仓库', prop: 'godownName', align: 'center', width: 100 },
        { label: '下架库位', prop: 'positionCode', align: 'center' },
        { label: '订单编号', prop: 'orderId', align: 'center' },
        { label: '物流单号', prop: 'waybillCode', align: 'center' },
        { label: '不良本数', prop: 'badNum', align: 'center', width: 100 },
        {
            label: '计划数量',
            prop: 'planNum',
            align: 'center',
            width: 100,
            formatter: (row) => row.planNum || 1
        },
        {
            label: '已下数量',
            prop: 'finishNum',
            align: 'center',
            width: 100,
            formatter: (row) => (row.status == 2 ? 1 : 0)
        }
    ]);

    const logColumns = ref([
        { label: '操作时间', prop: 'createTime', align: 'center', width: 160 },
        { label: '操作人', prop: 'createName', align: 'center', width: 100 },
        { label: '操作内容', prop: 'content', align: 'center' }
    ]);

    const detailConfig = reactive({
        pageUrl: '/baseinfo/stocktask/stockDetail',
        params: computed(() => ({
            taskCode: currentTask.value?.taskCode
        }))
    });

    const logConfig = reactive({
        pageUrl: '/baseinfo/stocktask/taskLog',
        params: computed(() => ({
            taskCode: currentTask.value?.taskCode
        }))
    });

    const userDicts = ref([]);
    function handleOpen(row) {
        currentTask.value = row;
        visible.value = true;
        const [UseStatusDicts] = useDictData(['task_status']);
        userDicts.value = UseStatusDicts.value;
    }

    //关闭
    function handleOperate(row, type) {
        let data = {
            taskCode: row.taskCode,
            operateType: type
        };
        pageRef.value?.messageBoxConfirm({
            message: '当前作业单据状态将变更为已关闭，是否继续？',
            fetch: () => request.post('/baseinfo/stocktask/operate', data)
        });
    }

    defineExpose({ handleOpen });
</script>
