<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-20 14:02:33
 * @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="businessName">
                <el-input v-model="queryParams.businessName" placeholder="请输入" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="法人姓名" prop="legalName">
                <el-input v-model="queryParams.legalName" placeholder="请输入" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="所属区域" prop="areaTreaList">
                <el-cascader v-model="queryParams.areaTreaList" :options="areaTreaList"
                    :props="{ expandTrigger: 'hover', checkStrictly: true }" placeholder="请选择省市区县"></el-cascader>
            </el-form-item>

            <el-form-item label="店铺分类" prop="businessType">
                <el-select v-model="queryParams.businessType" placeholder="请选择">
                    <el-option v-for="item in ShopTypeOption" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>

            <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}">
                    <div>
                        <p class="table-p">店铺名称：{{ row.businessName | TableItemEmpty }}</p>
                        <p class="table-p">店铺所在区域：{{ joint(row, ['provinceName', 'cityName', 'areaName']) |
                            TableItemEmpty }}</p>
                        <p class="table-p">店铺地址：{{ row.address | TableItemEmpty }}</p>
                        <p class="table-p">客服电话：{{ row.customerServicePhone | TableItemEmpty }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="主体信息" align="center" prop="cover">
                <template slot-scope="{row}">
                    <div>
                        <p class="table-p">企业名称：{{ row.enterpriseName | TableItemEmpty }}</p>
                        <p class="table-p">统一信用代码：{{ row.uscCode | TableItemEmpty }}</p>
                        <p class="table-p">法人姓名：{{ row.legalName | TableItemEmpty }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="店铺类型" align="center">
                <template slot-scope="{row}">
                    {{ row.businessType | ShopTypeOptionFilter | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column label="入驻时间" align="center" prop="createTime" width="100">
                <template slot-scope="{row}">
                    {{ row.createTime | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column label="代理收益" align="center" prop="agentIncome">
                <template slot-scope="{row}">
                    {{ row.agentIncome | 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 { ShopTypeOption } from "@/utils/statusEnum";
import { agentBusinessPage } from "@/api/agentManage/agentList";
export default {
    name: '',
    mixins: [getListApi],
    data() {
        return {
            listURL: agentBusinessPage,
            DrawerVisible: false,
            ShopTypeOption,
            queryParams: {
                businessName: undefined,
                legalName: undefined,
                areaTreaList: undefined,
                businessType: undefined,
            },
            initializationShow: false
        };
    },
    created() {
        this.getCnAreaTree();
        // 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,
                businessName: undefined,
                legalName: undefined,
                areaTreaList: undefined,
                businessType: undefined,
            }
            await this.$nextTick();
            this.handleQuery();

        },

    },
};
</script>