<script setup>
import {reactive} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import Filter from "../../../../components/Filter/index.vue";
import EditInfoModal from "./components/EditInfoModal.vue";
import {copy} from "../../../../utils/index.js";

const columns = [
    {
        title: '商家ID',
        dataIndex: 'uid',
    },
    {
        title: '昵称',
        dataIndex: 'nickname',
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        slotName: 'avatar'
    },
    {
        title: '手机号',
        dataIndex: 'mobile',
    },
    {
        title: '微信号',
        dataIndex: 'wechat',
        slotName: 'image',
    },
    {
        title: '状态',
        dataIndex: 'status_text',
        slotName: 'status_text',
    },
    {
        title: '邀请人',
        dataIndex: 'puid',
    },
    {
        title: '入驻日期',
        dataIndex: 'createtime',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 120,
    },
];
const FilterConfig = [
    {
        key: 'uid',
        type: 'input',
        label: '商家ID',
        placeholder: '请输入商家ID',
    },
    {
        key: 'puid',
        type: 'input',
        label: '邀请人',
        placeholder: '请输入邀请人',
    },
    {
        key: 'mobile',
        type: 'input',
        label: '手机号',
        placeholder: '请输入手机号',
    },
    {
        key: 'status',
        type: 'select',
        label: '状态',
        placeholder: '请选择状态',
        api: async () => ({
            data: [
                {
                    name: '禁用',
                    id: 0,
                },
                {
                    name: '可用',
                    id: 1,
                },
            ]
        }),
    },
    {
        key: 'rangeTime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '入驻时间',
    },
    {
        key: 'wd',
        type: 'datetime',
        label: '确认结算金额所属日期',
    },
];

const po = reactive({
    wd: null,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    parameter: po,
    api: Api.admin.getBusinessList,
    callback: (data) => {
        Object.assign(vo, data);
    }
});
</script>

<template>
    <!-- 商家账号 -->
    <a-card>
        <Filter
            @search="initFetchData"
            v-model:from="po"
            :config="FilterConfig">
        </Filter>

        <a-table
            :data="vo.rows"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:avatar="{record}">
                <a-image :src="record.avatar" width="24px" height="24px"
                         class="rounded-[50%] overflow-hidden"></a-image>
            </template>
            <template v-slot:status_text="{record}">
                <div v-if="record.status===1" class="status success">{{ record.status_text }}</div>
                <div v-if="record.status===0" class="status danger">{{ record.status_text }}</div>
            </template>
            <template v-slot:action="{record}">
                <div class="flex gap-[20px]">
                    <EditInfoModal :id="record.id" @success="fetchData"></EditInfoModal>
                    <a-link :hoverable="false" @click="copy(record.password)">卡密</a-link>
                </div>
            </template>
        </a-table>
    </a-card>
</template>

<style lang="scss" scoped>
.status {
    @apply flex whitespace-nowrap items-center gap-[6px];
    &::before {
        content: '';
        @apply block size-[6px] rounded-[50%];
    }
}

.success {
    &::before {
        @apply bg-[rgb(var(--green-6))];
    }
}

.danger {
    &::before {
        @apply bg-[rgb(var(--red-6))];
    }
}
</style>
