<template>
    <div class="table-page">
        <div class="search-part">
            <div class="search-cell">
                <span class="label">用户名</span>
                <el-input v-model="queryParams.userName" placeholder="请输入用户名"></el-input>
            </div>
            <el-button type="primary" icon="Search">查询</el-button>
            <el-button icon="Refresh">重置</el-button>
        </div>
        <div class="button-part">
            <el-button type="primary" icon="FirstAidKit">新增</el-button>
            <el-button icon="FirstAidKit">导入</el-button>
            <el-button icon="Delete">删除</el-button>
            <el-button icon="Download">导出</el-button>
        </div>
        <div class="table-part">
            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip>
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="#" width="55" align="center" />
                <el-table-column property="name" label="姓名" width="120" align="center" />
                <el-table-column label="手机号" width="220" align="center">
                    <template #default="scope">{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7) }}</template>
                </el-table-column>
                <el-table-column property="role" label="角色" width="220" align="center" />
                <el-table-column label="启用" width="120" align="center">
                    <template #default="scope"><el-switch v-model="scope.row.enable" /></template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button link icon="RefreshLeft">密码</el-button>
                        <el-button link icon="EditPen">修改</el-button>
                        <el-button link icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-part">
            <CommonPagination :total="100" @paginationChange="paginationChange" />
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import CommonPagination from '@/components/common-pagination.vue'

const queryParams = ref({
    userName: ''
})
const tableData = ref([] as any)

while (tableData.value.length < 10) {
    tableData.value.push({
        userName: 'cscs',
        name: '测试',
        phone: '12312345678',
        role: '高级管理员',
        enable: true,
    })
}

const paginationChange = (page: number, size: number) => {

}
</script>

<style lang='scss' scoped></style>
