<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-22 14:17:42
 * @Description: 
-->
<template>
    <Drawer title="查看账户码明细" :visible.sync="DrawerVisible" :showFooter="true" :wrapperClosable="true"
        :size="$drawerWidth(1400)">

        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize"
            label-width="auto">
            <el-form-item label="账户码" prop="accountCode">
                <el-input v-model="queryParams.accountCode" placeholder="请输入" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择">
                    <template v-for="item in PurposeTypeOption">
                        <el-option v-if="item.value !== PurposeTypeEnum.DISPATCHED" :label="item.label"
                            :value="item.value" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="使用时间" prop="purposeTime">
                <el-date-picker v-model="queryParams.purposeTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item l <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :border="TableBorder" :size="ELTableSize" v-loading="loading" :data="dataList">
            <el-table-column type="index" width="55" label="序号" align="center">
                <template slot-scope="{$index}">
                    {{ $getTableIndex(queryParams, $index + 1) }}
                </template>
            </el-table-column>
            <el-table-column label="账户码" align="center">
                <template slot-scope="{row}">
                    {{ row.accountCode | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="cover">
                <template slot-scope="{row}">
                    <!-- {{ row.status | PurposeTypeOptionFilter | TableItemEmpty }} -->
                    <StatusTag :status-vo="row.status | PurposeTypeOptionFilter(true)" />
                </template>
            </el-table-column>

            <el-table-column label="发放时间" align="center" prop="createTime" width="180">
                <template slot-scope="{row}">
                    {{ row.createTime | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column label="使用时间" align="center" prop="purposeTime" width="180">
                <template slot-scope="{row}">
                    {{ row.purposeTime | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column label="注册店铺" align="center" prop="agentIncome">
                <template slot-scope="{row}">
                    <!-- 已下发的不显示店铺 -->
                    {{ (row.status === PurposeTypeEnum.DISPATCHED ? "" : row.purposeName) | TableItemEmpty }}
                </template>
            </el-table-column>
        </el-table>


        <template v-slot:footer>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import getListApi from "@/mixins/getListApi";
import { PurposeTypeOption, PurposeTypeEnum } from "@/utils/statusEnum";
import { agentAccountCodeAgentPage } from "@/api/agentManage";
export default {
    name: '',
    mixins: [getListApi],
    data() {
        return {
            listURL: agentAccountCodeAgentPage,
            DrawerVisible: false,
            PurposeTypeOption,
            PurposeTypeEnum,
            queryParams: {
                accountCode: undefined,
                status: undefined,
                purposeTime: undefined
            },

            // 日期范围字段映射配置
            dateRangeMapping: {
                // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
                purposeTime: { start: 'purposeTimeStart', end: 'purposeTimeEnd' }
            },
            initializationShow: false
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ agentId: 22 })
        // }, 100);
    },

    methods: {
        joint(row, fields) {
            let str = ''
            fields.forEach(field => {
                str += row[field] || ''
            })
            return str
        },
        async openHandle(row) {
            this.DrawerVisible = true;
            const { agentId } = row || {};
            this.queryParams = {
                agentId,
                pageNum: 1,
                pageSize: 10,
                accountCode: undefined,
                status: undefined,
                createTime: undefined
            }
            await this.$nextTick();
            this.handleQuery();
        }
    },
};
</script>