<template>
    <ele-page flex-table>
        <arrivalSign-search @search="reload" />

        <common-table
            ref="pageRef"
            :pageConfig="usePageConfig"
            :columns="useStatus == 1 ? columns1 : columns"
        >
            <template #toolbar>
                <el-radio-group
                    @change="handleStatusChange"
                    v-model="useStatus"
                >
                    <el-radio-button label="全部到仓签收" value="1" />
                    <el-radio-button label="重量问题包裹" value="2" />
                </el-radio-group>

                <el-button
                    type="success"
                    plain
                    v-permission="'recycleLogistics:arrivalSign:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                    style="margin-left: 40px"
                >
                    导出EXCEL
                </el-button>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="success"
                        link
                        v-permission="'recycleLogistics:arrivalSign:viewImage'"
                        @click="handleViewImg(row)"
                    >
                        [查看图片]
                    </el-button>
                </div>
            </template>
        </common-table>

        <!-- 图片预览组件 -->
        <div v-if="showViewer">
            <el-image-viewer
                v-if="previewImages.length"
                :url-list="previewImages"
                :initial-index="0"
                :z-index="3000"
                @close="showViewer = false"
            />
        </div>
    </ele-page>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import { DownloadOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import arrivalSignSearch from '@/views/recycleLogistics/arrivalSign/components/arrivalSign-search.vue';
    import { ElImageViewer } from 'element-plus';

    defineOptions({ name: 'ArrivalSign' });

    /** 页面组件实例 */
    const pageRef = ref(null);
    const previewImages = ref([]);
    const showViewer = ref(false);

    const pageConfig = reactive({
        pageUrl: '/order/ordersign/toGodownSign',
        exportUrl: '/order/ordersign/toGodownSignExport',
        fileName: '到仓签收',
        cacheKey: 'arrivalSignTable'
    });
    let pageConfig2 = reactive({
        pageUrl: '/order/ordersign/weightChangeSign',
        exportUrl: '/order/ordersign/changeWeightExport',
        fileName: '重量问题包裹',
        cacheKey: 'weightChangeSignTable'
    });
    const usePageConfig = ref(pageConfig);

    const useStatus = ref('1');
    function handleStatusChange(value) {
        useStatus.value = value;
        if (value == 1) {
            usePageConfig.value = pageConfig;
        } else {
            usePageConfig.value = pageConfig2;
        }
        nextTick(() => pageRef.value?.reload());
    }

    /** 表格列配置 */
    const columns = ref([
        {
            label: '员工姓名',
            prop: 'signUserName',
            align: 'center'
        },
        { label: '物流单号', prop: 'expressNumber', align: 'center' },
        { label: '物流CODE', prop: 'finalExpressName', align: 'center' },
        { label: '包裹号', prop: 'packageCode', align: 'center' },
        { label: '实际重量（kg）', prop: 'actualWeight', align: 'center' },
        { label: '计费重量（kg）', prop: 'chargingWeight', align: 'center' },
        { label: '仓库', prop: 'godownName', align: 'center' },
        { label: '签收时间', prop: 'createTime', align: 'center', width: 170 },
        {
            columnKey: 'action',
            label: '操作',
            width: 160,
            align: 'center',
            slot: 'action'
        }
    ]);

    const columns1 = ref([
        {
            label: '员工姓名',
            prop: 'signUserName',
            align: 'center'
        },
        { label: '物流单号', prop: 'expressNumber', align: 'center' },
        { label: '物流CODE', prop: 'finalExpressName', align: 'center' },
        { label: '包裹号', prop: 'packageCode', align: 'center' },
        { label: '计费重量（kg）', prop: 'chargingWeight', align: 'center' },
        { label: '仓库', prop: 'godownName', align: 'center' },
        { label: '签收时间', prop: 'createTime', align: 'center', width: 170 }
    ]);

    //重量问题包裹接口

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('到仓签收');
    }

    //查看图片 - 使用ElImageViewer组件
    function handleViewImg(row) {
        if (!row.imgList || row.imgList.length === 0) {
            return EleMessage.warning('暂无图片');
        }

        // 设置预览图片列表并显示查看器
        previewImages.value = row.imgList;
        showViewer.value = true;
    }
</script>
