<template>
    <div>
        <base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef" @change="searchChange"> </base-search>
        <div style="display: flex; padding: 10px; background: #fff; margin-bottom: 10px">
            <el-button type="primary" @click="showAddOrEditDialog(null, null)">新增员工</el-button>
        </div>
        <div class="main-container">
            <el-table v-loading="dataListLoading" :data="data.rows" border element-loading-text="数据加载中...">
                <el-table-column label="员工姓名" prop="name"></el-table-column>
                <el-table-column label="岗位" prop="roleName"> </el-table-column>
                <el-table-column label="手机号" prop="mobile"></el-table-column>
                <el-table-column label="账号状态">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="changeStatus(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <div class="table_column_operation">
                            <a @click="showAddOrEditDialog(scope.row, 1)">编辑</a>
                            <!-- <a @click="showAddOrEditDialog(scope.row, 2)">修改密码</a> -->
                            <!-- <a @click="del(scope.row.id)" class="delStyle">删除</a> -->
                        </div>
                    </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>
        <Add ref="addRef" @success="getDataList" />
    </div>
</template>

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

const baseSearchRef = ref();
const addRef = ref();
const dataListLoading = ref(false);
const form = reactive({
    pageNum: 1,
    pageSize: 20,
    type: 1,
});
const data = reactive({
    rows: [],
    total: 20,
});
const formItemList = reactive([
    {
        label: '员工姓名',
        type: 'input',
        param: 'name',
    },
]);

const searchFrom = () => {
    form.pageNum = 1;
    getDataList();
};
const searchChange = (val) => {

};
const getDataList = () => {
    dataListLoading.value = true;
    const params = {
        ...form,
        ...baseSearchRef.value.penetrateParams(),
    };
    sysUserList(params)
        .then((ret) => {
            data.rows = ret.data.rows;
            data.total = ret.data.total;
            dataListLoading.value = false;
        })
        .catch(() => {
            dataListLoading.value = false;
        });
};

// 新增 、编辑、修改密码
const showAddOrEditDialog = (val, page) => {
    if (addRef.value) {
        addRef.value.onShowDialog(val, page);
    }
};
const changeStatus = (row) => {
    const params = {
        id: row.id,
        status: row.status == false ? 0 : 1,
    };
    sysUserSave(params).then((ret) => {
        ElMessage.success('操作成功');
    });
};
// 删除
const del = (id) => {
    ElMessageBox.confirm('账号删除后无法登录，是否确定删除?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
    }).then(() => {
        sysUserDel(id).then(() => {
            ElMessage.success('操作成功');
            getDataList();
        });
    });
};
onMounted(() => {
    form.type = 1;
    getDataList();
});
</script>

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