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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <!--
        <el-button
          type="success"
          plain
          v-permission="'customer:blacklist:export'"
          @click="handleExportExcel"
          :icon="DownloadOutlined"
        >
          导出EXCEL
        </el-button>
      </template> -->
            <template #nickName="{ row }">
                <div class="flex flex-col items-center">
                    <el-avatar :src="row.imgPath" />
                    <ele-text class="mt-1">{{ row.nickName }}</ele-text>
                </div>
            </template>
            <template #status="{ row }">
                <dict-data
                    code="user_info_status"
                    type="tag"
                    :model-value="row.status"
                />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="success"
                        link
                        v-permission="'customer:blacklist:detail'"
                        @click="handleDetail(row)"
                    >
                        [用户详情]
                    </el-button>
                    <el-button
                        type="warning"
                        link
                        v-permission="'customer:blacklist:userTag'"
                        @click="handleBindTag(row)"
                    >
                        [用户标签]
                    </el-button>
                    <el-button
                        type="warning"
                        link
                        v-permission="'customer:blacklist:accountDetail'"
                        @click="handleDetail(row, 'accountChange')"
                    >
                        [账户明细]
                    </el-button>
                    <el-button
                        type="success"
                        link
                        v-permission="'customer:blacklist:history'"
                        @click="handleBlacklistHistory(row)"
                    >
                        [拉黑历史]
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'customer:blacklist:remove'"
                        @click="handleRemoveBlacklist(row)"
                    >
                        [移出黑名单]
                    </el-button>
                </div>
            </template>
        </common-table>

        <page-edit ref="editRef" @success="reload()" />
        <blacklist-history ref="historyRef" />
        <customer-detail ref="detailRef" />
        <user-bind-tag ref="tagRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { DownloadOutlined, PlusOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './components/page-search.vue';
    import pageEdit from './components/page-edit.vue';
    import blacklistHistory from '@/views/customer/list/components/blacklist-history.vue';
    import customerDetail from '@/views/customer/list/components/customer-detail.vue';
    import userBindTag from '@/views/recycleOrder/components/user-bind-tag.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'BlackList' });

    /** 表格列配置 */
    const columns = ref([
        {
            label: '用户昵称',
            prop: 'nickName',
            align: 'center',
            slot: 'nickName'
        },
        { label: '用户ID', prop: 'id', align: 'center' },
        { label: '用户OpenId', prop: 'openId', align: 'center' },
        { label: '手机号', prop: 'mobile', align: 'center' },
        { label: '用户类型', prop: 'platName', align: 'center' },
        { label: '用户标签', prop: 'userTagStr', align: 'center' },
        { label: '状态', prop: 'statusName', align: 'center', slot: 'status' },
        { label: '创建时间', prop: 'createTime', align: 'center', width: 160 },
        {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/user/black/pagelist',
        exportUrl: '/user/black/export',
        fileName: '黑名单列表',
        cacheKey: 'blackListTable'
    });

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

    //批量删除
    function handleBatchDelete(row) {
        let selections = row ? [row] : pageRef.value?.getSelections();
        let ids = selections.map((item) => item.id).join(',');
        let url = `/baseinfo/schoolInfo/removeById/${ids}`;
        pageRef.value?.operatBatch({
            title: '确认删除？',
            method: 'post',
            url,
            row
        });
    }
    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('黑名单列表');
    }

    //移出黑名单
    function handleRemoveBlacklist(row) {
        pageRef.value?.messageBoxConfirm({
            message: '确认移出黑名单？',
            fetch: () => request.post('/user/black/delete', { userId: row.id })
        });
    }

    //详情页面
    const detailRef = ref(null);
    function handleDetail(row, type) {
        detailRef.value?.handleOpen(row, type);
    }

    //拉黑历史
    const historyRef = ref(null);
    function handleBlacklistHistory(row) {
        historyRef.value?.handleOpen(row);
    }
    //用户标签
    const tagRef = ref(null);
    function handleBindTag(row) {
        tagRef.value?.handleOpen(row);
    }
</script>
