<template>
    <div>
        <el-card shadow="never" class="!border-none">
            <el-page-header content="查看用户" @back="$router.back()" />
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户信息" prop="keyword">
                    <el-input class="w-[280px]" v-model="queryParams.keyword" clearable />
                </el-form-item>
                <el-form-item label="用户来源" prop="channel">
                    <el-select class="w-[280px]" v-model="queryParams.channel">
                        <el-option label="全部" value="" />
                        <el-option v-for="option in optionMap.sourceOptions" :key="option.value" :label="option.label" :value="option.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="组别" prop="distGroup">
                    <el-select class="w-[280px]" v-model="queryParams.groupId">
                        <el-option label="全部" value="" />
                        <el-option v-for="option in groupData" :key="option.id" :label="option.groupName" :value="option.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分销员名称" prop="distName">
                    <el-input class="w-[280px]" v-model="queryParams.distName" clearable />
                </el-form-item>
                <el-form-item label="分销员ID" prop="distNum">
                    <el-input class="w-[280px]" v-model="queryParams.distNum" clearable />
                </el-form-item>
                <el-form-item label="绑定时间">
                    <daterange-picker class="w-[385px]" v-model:startTime="queryParams.startTime" v-model:endTime="queryParams.endTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getLists">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div class="mt-3">
                <el-table ref="tableRef" class="mt-4" size="large" :data="pager.lists">
                    <el-table-column label="头像" prop="avatar">
                        <template #default="{ row }">
                            <div class="flex items-center">
                                <div>
                                    <el-image :src="row.avatar" class="w-[40px] h-[40px]" />
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户昵称" prop="nickname" />
                    <el-table-column label="用户账号" prop="username"></el-table-column>
                    <el-table-column label="手机号码" prop="mobile" />
                    <el-table-column label="用户来源" prop="channel" />
                    <!-- <el-table-column label="注册时间" width="200" prop="createTime"></el-table-column> -->
                    <el-table-column label="绑定时间" width="200" prop="bindTime"></el-table-column>
                    <el-table-column label="解绑时间" width="200" prop="unBindTime"></el-table-column>
                    <el-table-column label="分销员ID" width="200" prop="distNum" :formatter="row => parseEmpty(row, 'distNum')"></el-table-column>
                    <el-table-column label="分销员名称" prop="distName" :formatter="row => parseEmpty(row, 'distName')" />
                    <el-table-column label="组别" prop="distGroup" :formatter="row => parseEmpty(row, 'distGroup')" />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="scope">
                            <router-link :to="`/distributor/register/detail?id=${scope.row.id}`">
                                <el-link type="primary" :underline="false">详情</el-link>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import { optionMap } from '@/config/status'
import { apiDistributorDetail } from '@/api/distributor/lists'
import { apiUserLists } from '@/api/user'
import { parseEmpty } from '@/utils/util'
import { apiDistributorGroupLists } from '@/api/distributor/group'
import type { DistributorGroup } from '@/api/distributor/group'

const route = useRoute()
const id = route.query.id

const queryParams = reactive<Record<string, any>>({})
const detailInfo = ref<Record<string, string>>({})

const { pager, getLists, resetPage } = usePaging({
    fetchFun: apiUserLists,
    params: queryParams
})
/**重置参数 */
const handleReset = () => {
    const filedMap: Record<string, string> = {
        distName: 'name',
        distNum: 'distNum',
        groupId: 'groupId'
    }
    Object.keys(queryParams).forEach(key => {
        if (key == 'distName' || key == 'distNum' || key == 'groupId') {
            queryParams[key] = detailInfo.value[filedMap[key]]
        } else {
            queryParams[key] = ''
        }
    })
    getLists()
}
/**获取详情 */
async function getDetail() {
    const filedMap: Record<string, string> = {
        keyword: 'keyword',
        channel: 'channel',
        distName: 'name',
        groupId: 'groupId',
        distNum: 'distNum',
        startTime: 'startTime',
        endTime: 'endTime'
    }
    const res = await apiDistributorDetail({ id })
    detailInfo.value = res
    Object.keys(filedMap).forEach(key => {
        queryParams[key] = res[filedMap[key]] ?? ''
    })
    queryParams.flag = 1
}

const groupData = ref<DistributorGroup[]>([])
// 获取分类通用列表
const getGroupList = (): void => {
    let pageNo = 1
    async function request() {
        const res = await apiDistributorGroupLists({ pageNo, pageSize: 60 })
        groupData.value.push(...res.lists)
        if (groupData.value.length < res.count) {
            pageNo++
            request()
        }
    }
    request()
}

onMounted(async () => {
    await getDetail()
    getLists()
    getGroupList()
})
</script>
<style scoped></style>
