<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="showMenuDialog(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="description" show-overflow-tooltip> </el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" width="130">
                    <template #default="scope">
                        <div class="table_column_operation">
                            <a @click="showMenuDialog(scope.row, 1)" v-if="scope.row.isAdmin == 1">编辑</a>
                            <a @click="showMenuDialog(scope.row, 2)" v-if="scope.row.isAdmin !== 1">编辑</a>
                            <a @click="del(scope.row.id)" class="delStyle" v-if="scope.row.isAdmin !== 1">删除</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" />
        <menuDialog ref="menuRef" @success="getDataList" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import baseSearch from '@/components/common/searchCustom/index.vue';
import { sysPositionList, sysPositionDel } from '~/api/sys.js';
import Add from './addOrEditPost.vue';
import menuDialog from './menu.vue';

const baseSearchRef = ref();
const addRef = ref();
const menuRef = ref();

const dataListLoading = ref(false);
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});
const data = reactive({
    rows: [],
    total: 0,
});

const formItemList = reactive([
    {
        label: '岗位名称',
        type: 'input',
        param: 'name',
        labelWidth: 65,
        span: 6,
    },
]);

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

const searchChange = (val) => {

};

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

// 新增 、编辑
const showAddDialog = (val) => {
    if (addRef.value) {
        addRef.value.onShowDialog(val);
    }
};
// 设置权限
const showMenuDialog = (val) => {
    if (menuRef.value) {
        menuRef.value.open(val);
    }
};
// 删除
const del = (id) => {
    ElMessageBox.confirm('请确认是否删除', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
    }).then(() => {
        sysPositionDel(id).then(() => {
            ElMessage.success('操作成功');
            getDataList();
        });
    });
};

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

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