<template>
    <div>
        <base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef"> </base-search>
        <div style="display: flex; padding: 10px; background: #fff; margin-bottom: 10px">
            <el-button type="primary" @click="showAddDialog(null)">新增用户</el-button>
        </div>
        <div class="main-container">
            <el-table :data="data.rows" border v-loading="data.dataListLoading" element-loading-text="数据加载中..." style="width: 100%">
                <el-table-column label="用户姓名" prop="name"></el-table-column>
                <el-table-column label="用户手机号" prop="mobile"> </el-table-column>
                <el-table-column label="用户类型" prop="type">
                    <template #default="scope"> {{ getRoleName(scope.row.type) }} </template>
                </el-table-column>
                <el-table-column label="CBK账户" prop="cbkAccount"> 
                    <template #default="scope">
                        <template v-if="scope.row.cbkAccount">
                            <el-tooltip :content="scope.row.cbkAccount" placement="top">
                                <span style="cursor: help">****</span>
                            </el-tooltip>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="账号状态" prop="status">
                    <template #default="scope"> {{ scope.row.status == 0 ? '启用' : '禁用' }} </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"> 
                    <template #default="scope"> {{ scope.row.remark || '--' }} </template>
                </el-table-column>
                <el-table-column label="创建人" prop="createName">
                    <template #default="scope"> {{ scope.row.createName || '--' }} </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button link type="primary" @click="showAddDialog(scope.row)">编辑</el-button>
                        <!-- <el-button link type="primary" @click="delClick(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="dataListOnEmpty">暂无数据</div>
                </template>
            </el-table>
            <pagination v-model:limit="form.pageSize" v-model:page="form.pageNum" :total="data.total" @pagination="getDataList" />
            <UserDialog ref="UserDialogRef" @success="getDataList" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import baseSearch from '@/components/common/searchCustom/index.vue';
import { userList, userStatus } from '@/api/userManage.js';
import UserDialog from './userDialog.vue';

const baseSearchRef = ref();
const UserDialogRef = ref();
const formItemList = reactive([
    {
        label: '用户姓名',
        param: 'username',
        type: 'input',
        placeholder: '请输入用户名',
        span: 7,
        labelWidth: 100,
    },
    {
        label: '精确姓名',
        param: 'usernameExact',
        type: 'select',
        selectOptions: [
            { value: true, text: '是' },
            { value: false, text: '否' },
        ],
        span: 4,
        labelWidth: 80,
    },
    {
        label: '用户手机号',
        param: 'mobile',
        type: 'input',
        placeholder: '请输入用户手机号',
        span: 7,
        labelWidth: 100,
    },
    {
        label: '精确手机号',
        param: 'mobileExact',
        type: 'select',
        selectOptions: [
            { value: true, text: '是' },
            { value: false, text: '否' },
        ],
        span: 4,
        labelWidth: 90,
    },
    {
        label: '用户类型',
        type: 'select',
        selectOptions: [
            { value: 1, text: '司机' },
            { value: 2, text: '供应商' },
            { value: 3, text: '资金方' },
            { value: 4, text: '采购商' },
        ],
        param: 'type',
        span: 7,
        labelWidth: 100,
    },
]);
const searchFrom = () => {
    form.pageNum = 1;
    getDataList();
};
const data = reactive({
    rows: [],
    total: 0,
    dataListLoading: false,
});
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});
const typeOptions = {
    1: '司机',
    2: '供应商',
    3: '资金方',
    4: '采购商',
};

// 根据type获取用户类型名称
const getRoleName = (type) => {
    if (type) {
        return typeOptions[type] || `未知类型${type}`;
    }
    return '--';
};
// 列表
const getDataList = () => {
    data.dataListLoading = true;
    const params = {
        ...form,
        ...baseSearchRef.value.penetrateParams(),
    };
    userList(params)
        .then((res) => {
            data.dataListLoading = false;
            data.rows = res.data.rows;
            data.total = res.data.total;
        })
        .catch(() => {
            data.dataListLoading = false;
        });
};
// 删除
const delClick = (row) => {
    ElMessageBox.confirm('请确认是否删除该条数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
    })
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
};
const showAddDialog = (row) => {
    if (UserDialogRef.value) {
        UserDialogRef.value.onShowDialog(row);
    }
};
onMounted(() => {
    getDataList();
});
</script>

<style lang="less" scoped></style>
