<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-09-16 16:26:07
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-18 15:14:26
 * @FilePath: \housekeeping-admin\src\components\channel-select-user\userTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-form :model="userForm" ref="channelFormRef" :inline="true" label-width="auto">
            <el-form-item label="用户信息">
                <el-input class="w-[300px]" v-model="userForm.keyword" 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="480"
                @selection-change="parent?.handleSelectionChange"
            >
                <el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
                <el-table-column property="nickname" label="用户名称" min-width="200" />
                <el-table-column property="username" label="用户账号" min-width="160" />
                <el-table-column property="mobile" label="手机号码" min-width="160" :formatter="row => parseEmpty(row, 'mobile')" />
            </el-table>
        </div>
        <div class="flex justify-end mt-3">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import type { ElTable } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { apiUserLists } from '@/api/user'
import { parseEmpty } from '@/utils/util'
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'

const tableDataRef = ref<InstanceType<typeof ElTable>>()
const userForm = reactive({
    keyword: '',
    type: 0
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    size: 10,
    fetchFun: apiUserLists,
    params: userForm
})
const parent = inject(CHANNEL_INJECTION_KEY)

onMounted(getLists)

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