<template>
    <ele-page flex-table>
        <page-search @search="reload">
            <el-checkbox-group v-model="checkList" v-if="useStatus == 5">
                <el-checkbox label="理赔" value="1" />
                <el-checkbox label="售后补偿" value="2" />
                <el-checkbox label="纸价补贴" value="3" />
            </el-checkbox-group>
        </page-search>

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-radio-group
                    @change="handleStatusChange"
                    v-model="useStatus"
                >
                    <el-radio-button label="全部明细" value="" />
                    <el-radio-button label="佣金明细" value="1" />
                    <el-radio-button label="商城明细" value="5" />
                    <el-radio-button label="书款明细" value="2" />
                    <el-radio-button label="提现明细" value="3" />
                    <el-radio-button label="其他" value="4" />
                </el-radio-group>
            </template>

            <template #plat="{ row }">
                <div>
                    {{
                        row.plat == 1
                            ? '微信余额'
                            : row.plat == 2
                              ? '支付宝余额'
                              : '--'
                    }}
                </div>
            </template>

            <template #changeType="{ row }">
                <dict-data
                    code="account_change_type"
                    type="text"
                    :model-value="row.changeType"
                />
            </template>

            <template #orderId="{ row }">
                <el-button type="primary" link @click="handleOrderId(row)">
                    {{ row.orderId }}
                </el-button>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'finance:cashFlow:detail'"
                        @click="handleDetail(row)"
                    >
                        [详情]
                    </el-button>
                </div>
            </template>
        </common-table>

        <orderDetail ref="orderDetailRef" />
        <MallOrderDetail ref="mallOrderDetailRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './components/page-search.vue';
    import OrderDetail from '@/views/recycleOrder/components/order-detail.vue';
    import MallOrderDetail from '@/views/mallOrder/all/components/order-detail.vue';

    defineOptions({ name: 'Withdrawal' });
    const checkList = ref([]);

    const useStatus = ref('');
    function handleStatusChange(value) {
        pageRef.value.reload({ type: value });
    }

    /** 表格列配置 */
    const columns = ref([
        { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
        { label: '用户UID', prop: 'userId', align: 'center' },
        { label: '客户昵称', prop: 'nickName', align: 'center', width: 150 },
        {
            label: '支付单号/流水号',
            prop: 'tradeNo',
            align: 'center',
            minWidth: 160
        },
        { label: '对方账户', prop: 'plat', align: 'center', slot: 'plat' },
        { label: '变动金额', prop: 'changeMoney', align: 'center' },
        { label: '变动后金额', prop: 'afterMoney', align: 'center' },
        {
            label: '订单类型',
            prop: 'orderType',
            align: 'center',
            formatter: (row) => {
                //1-卖书订单 2-商城买书订单
                return row.orderType == 1
                    ? '卖书订单'
                    : row.orderType == 2
                      ? '商城买书订单'
                      : '';
            }
        },
        {
            label: '订单编号',
            prop: 'orderId',
            align: 'center',
            minWidth: 120,
            slot: 'orderId'
        },
        {
            label: '交易类型',
            prop: 'changeTypeName',
            align: 'center',
            slot: 'changeType'
        }
    ]);

    /** 页面组件实例 */
    const pageRef = ref(null);
    const orderDetailRef = ref(null);
    const mallOrderDetailRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/user/userAccountInfo/changeLogList',
        exportUrl: '/user/userAccountInfo/export',
        fileName: '用户账户流水记录',
        cacheKey: 'userAccountChangeLogTable'
    });

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

    //订单详情
    function handleOrderId(row) {
        if (row.orderType == 2) {
            mallOrderDetailRef.value?.handleOpen(row);
        } else {
            orderDetailRef.value?.handleOpen(row);
        }
    }

    //详情
    function handleDetail(row) {
        console.log(row);
    }
</script>
