<template>
    <order-page
        ref="pageRef"
        :pageConfig="pageConfig"
        :propColumns="columns"
        permissionKey="search"
    >
        <template #toolbar>
            <el-button
                type="warning"
                plain
                class="ele-btn-icon"
                v-permission="'recycleOrder:search:batchAudit'"
                @click="handleBatchAudit"
            >
                批量初审
            </el-button>
            <el-button
                type="success"
                plain
                class="ele-btn-icon"
                :icon="DownloadOutlined"
                v-permission="'recycleOrder:search:export'"
                @click="exportData"
            >
                导出订单明细
            </el-button>
        </template>

        <template #action="{ row }">
            <div>
                <el-button
                    type="success"
                    link
                    v-permission="'recycleOrder:search:detail'"
                    @click="toOrderDetail(row)"
                >
                    [订单详情]
                </el-button>
                <el-button
                    type="warning"
                    link
                    v-permission="'recycleOrder:search:log'"
                    @click="openOrderLog(row)"
                >
                    [订单日志]
                </el-button>
                <el-button
                    type="danger"
                    link
                    v-permission="'recycleOrder:search:cancel'"
                    @click="cancelOrder(row)"
                >
                    [取消订单]
                </el-button>
                <el-button
                    type="primary"
                    link
                    v-permission="'recycleOrder:search:fallback'"
                    @click="fallbackOrder(row)"
                >
                    [回退状态]
                </el-button>
                <el-button
                    type="success"
                    link
                    v-permission="'recycleOrder:search:materialPickup'"
                    @click="materialPickup(row)"
                >
                    [物流揽件]
                </el-button>
                <el-button
                    type="danger"
                    link
                    v-permission="'recycleOrder:search:auditScreenshot'"
                    @click="handleAuditScreenshot(row)"
                >
                    [审核截图]
                </el-button>
                <el-button
                    type="danger"
                    link
                    v-permission="'recycleOrder:search:afterSalesPayment'"
                    @click="handleAfterSalesPayment(row)"
                >
                    [售后补款]
                </el-button>
                <el-button
                    type="warning"
                    link
                    v-permission="'recycleOrder:search:userTag'"
                    @click="openEditUserTag(row)"
                >
                    [用户标签]
                </el-button>
                <el-button
                    type="success"
                    link
                    v-permission="'recycleOrder:search:sendSMS'"
                    @click="handleSendSMS(row)"
                >
                    [推送短信]
                </el-button>
                <el-button
                    color="#7728f5"
                    link
                    plain
                    v-permission="'recycleOrder:search:applyForOrderClaim'"
                    @click="applyForOrderClaim(row)"
                >
                    [申请订单理赔]
                </el-button>
            </div>
        </template>

        <order-log ref="orderLogRef" />
        <userBindTag ref="userTagRef" />
        <audit-screenshot ref="auditScreenshotRef" />
        <afterSalesPayment ref="paymentRef" />
        <applyforOrderClaim ref="claimRef" />
        <sendSMS ref="smsRef" />
    </order-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { ElMessageBox } from 'element-plus/es';
    import { EleMessage } from 'ele-admin-plus/es';
    import { DownloadOutlined } from '@/components/icons';
    import OrderPage from '@/views/recycleOrder/components/order-page-all.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import { useRouter } from 'vue-router';

    //订单日志
    import orderLog from '@/views/recycleOrder/components/order-log.vue';
    //用户标签
    import userBindTag from '@/views/recycleOrder/components/user-bind-tag.vue';
    //审核截图
    import auditScreenshot from '@/views/recycleOrder/components/audit-screenshot.vue';
    //售后补款
    import afterSalesPayment from '@/views/recycleOrder/components/after-sales-payment.vue';
    //申请订单理赔
    import applyforOrderClaim from '@/views/recycleOrder/components/applyfor-order-claim.vue';
    //推送短信
    import sendSMS from '@/views/recycleOrder/components/send-SMS.vue';

    defineOptions({ name: 'RecycleOrderSearch' });

    let router = useRouter();
    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/order/orderInfo/pageList',
        exportUrl: '/order/orderInfo/export',
        fileName: '回收订单查询',
        cacheKey: 'recycleOrderTable'
    });

    //批量初审
    function handleBatchAudit() {
        pageRef.value?.handleFirstCheck(null);
    }

    //导出数据
    function exportData() {
        pageRef.value?.exportData('回收订单查询');
    }
    //订单详情
    function toOrderDetail(row) {
        router.push({
            path: '/recycleOrder/detail',
            query: { id: row.postId }
        });
    }

    //订单日志
    const orderLogRef = ref(null);
    function openOrderLog(row) {
        console.log(row, orderLogRef.value, 'row');

        orderLogRef.value?.handleOpen(row.orderId);
    }

    //用户绑定标签
    const userTagRef = ref(null);
    function openEditUserTag(row) {
        userTagRef.value?.handleOpen(row);
    }

    function messageBoxConfirm({ message, url, row }) {
        ElMessageBox.confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning'
        }).then(() => {
            console.log(row, 'row');
        });
    }

    //取消订单
    function cancelOrder(row) {
        messageBoxConfirm({ message: '确认取消?', url: '', row });
    }
    //回退状态
    function fallbackOrder(row) {
        messageBoxConfirm({ message: '确认回退状态?', url: '', row });
    }
    //物流揽件
    function materialPickup(row) {
        messageBoxConfirm({ message: '确认物流揽件?', url: '', row });
    }
    //审核截图
    const auditScreenshotRef = ref(null);
    function handleAuditScreenshot(row) {
        auditScreenshotRef.value?.handleOpen(row);
    }
    //售后补款
    const paymentRef = ref(null);
    function handleAfterSalesPayment(row) {
        paymentRef.value?.handleOpen(row);
    }
    //推送短信
    const smsRef = ref(null);
    function handleSendSMS(row) {
        smsRef.value?.handleOpen(row);
    }
    //申请订单理赔
    const claimRef = ref(null);
    function applyForOrderClaim(row) {
        claimRef.value?.handleOpen(row);
    }

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '单号',
            prop: 'orderNumber',
            slot: 'orderNumber',
            minWidth: 230
        },
        { label: '客户', prop: 'customer', slot: 'customer', minWidth: 360 },
        { label: '金额', prop: 'amount', slot: 'amount', minWidth: 190 },
        {
            label: '状态',
            prop: 'status',
            slot: 'status',
            width: '166'
        },
        { label: '时间', prop: 'time', slot: 'time', minWidth: 210 },
        { label: '备注', prop: 'remarks', slot: 'remarks' },
        { label: '售后', prop: 'refundStatusName' },
        {
            columnKey: 'action',
            label: '操作',
            width: 182,
            align: 'center',
            slot: 'action',
            hideInPrint: true,
            hideInExport: true,
            fixed: 'right'
        }
    ]);
</script>
