<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-09-16 16:26:07
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-18 15:15:05
 * @FilePath: \housekeeping-admin\src\components\channel-select-user\distributeTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-form :model="channelForm" ref="channelFormRef" :inline="true" label-width="auto">
            <el-form-item label="组别">
                <el-select v-model="channelForm.groupId" placeholder="请选择" class="ls-input">
                    <el-option label="全部" value></el-option>
                    <el-option
                        v-for="group in groupLists"
                        :key="group.id"
                        :label="group.groupName"
                        :value="group.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分销员名称">
                <el-input
                    class="ls-input"
                    v-model="channelForm.name"
                    placeholder="请输入"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="分销员ID">
                <el-input
                    class="ls-input"
                    v-model="channelForm.distNum"
                    placeholder="请输入"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getLists">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-table
                ref="tableDataRef"
                :data="pager.lists"
                row-key="id"
                border
                style="width: 100%"
                height="500"
                @selection-change="parent?.handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="50"
                    :reserve-selection="true"
                ></el-table-column>
                <el-table-column property="groupName" label="组别" min-width="200" />
                <el-table-column property="name" label="分销员名称" min-width="160" />
                <el-table-column property="distNum" label="分销员ID" min-width="160" />
            </el-table>
        </div>
        <div class="flex justify-end mt-3">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </div>
</template>

<script setup lang="ts">
import type { ElTable } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { useCommon } from '@/hooks/useCommon'
import { apiDistributorLists } from '@/api/distributor/lists'
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'

const tableDataRef = ref<InstanceType<typeof ElTable>>()
const channelForm = reactive({
    name: '',
    groupId: '',
    distNum: ''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    size: 10,
    fetchFun: apiDistributorLists,
    params: channelForm
})
const { groupLists, fetchGroupList } = useCommon()

const parent = inject(CHANNEL_INJECTION_KEY)

onMounted(() => {
    getLists()
    fetchGroupList()
})

defineExpose({
    tableDataRef,
    pager
})
</script>
<style scoped>
.ls-input {
    width: 210px;
}
</style>
