<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="roleName"></el-table-column>
                <el-table-column label="账号状态" prop="status">
                    <template #default="scope">
                        {{ scope.row.status === 1 ? '启用' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"> </el-table-column>
                <el-table-column label="创建人" prop="createBy"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="primary" @click="showAddDialog(scope.row)">编辑</el-button>
                        <el-button link type="primary" @click="delClick(scope.row)" style="color: #f56c6c;">删除</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" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import baseSearch from '@/components/common/searchCustom/index.vue';
import { sysUserList, sysUserDel, sysUserSave } from '@/api/sys.js';

const baseSearchRef = ref();

const formItemList = reactive([
    {
        label: '用户姓名',
        type: 'input',
        param: 'name',
        placeholder: '请输入用户姓名',
        span: 7,
        labelWidth: 100,
    },
    {
        label: '用户手机号',
        type: 'input',
        param: 'mobile',
        placeholder: '请输入用户手机号',
        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 getDataList = () => {
    data.dataListLoading = true;
    const params = {
        ...form,
        ...baseSearchRef.value?.penetrateParams(),
    };
    sysUserList(params)
        .then((res) => {
            data.dataListLoading = false;
            data.rows = res.data.rows || [];
            data.total = res.data.total || 0;
        })
        .catch(() => {
            data.dataListLoading = false;
        });
};

// 删除用户
const delClick = (row) => {
    ElMessageBox.confirm('请确认是否删除该用户？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
    })
        .then(() => {
            sysUserDel(row.id)
                .then(() => {
                    ElMessage.success('删除成功');
                    getDataList();
                })
                .catch((error) => {
                    ElMessage.error('删除失败');
                    console.error('删除失败:', error);
                });
        })
        .catch(() => {
            // 用户取消删除
        });
};

// 编辑用户
const showAddDialog = (row) => {
    // TODO: 实现编辑对话框

};

onMounted(() => {
    getDataList();
});
</script>

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