<script setup>
    import { ref, reactive } from 'vue'
    import { useRouter} from "vue-router";
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    import { ElMessage,ElMessageBox } from 'element-plus'
    import { Search } from '@element-plus/icons-vue'
    import { departInterence } from '@/api/api.js'
    const router = useRouter()

    let tableData = ref([])
    let tableParams = reactive({
        pageSize: 10,
        page_no: 1,
        search_txt: '',
        total: 0,
        isShowloadding: false
    })
    //获取角色列表
    function getTableList() {
        tableParams.isShowloadding = true
        departInterence.getRoleList({
            PageSize: tableParams.pageSize,
            CurrentIndex: tableParams.page_no,
            KeyWord: tableParams.search_txt
        }).then(res => {
            if (res.Ret === 200) {
                tableParams.isShowloadding = false;
                let arr = [];
                res.Data.List && res.Data.List.forEach((item, index) => {
                    let obj = {
                        no: index + 1,
                        ...item
                    }
                    arr.push(obj)
                });
                tableData = arr;
                tableParams.total = res.Data.Paging.Totals || 0;
            }
        })
    }
    getTableList()
    //页面切换
    function handleCurrentChange(page) {
        tableParams.page_no = page
        getTableList()
    }
    //点击设置权限按钮
    function setAuth(){
        router.push({path:'/Sysauth'})
    }
    //点击查看权限按钮
    function getAuthDetail(data){
        router.push({
            path:'/Sysauth',
            query:{
                id:data.RoleId
            }
        })
    }

    let isAddRole = ref(false)
    let roleForm = reactive({
            title:'添加角色',
            name:'',
            roleType:'无'
        })
    const roleRule = reactive({
        name:[{required:true,message:"请输入角色名称",trigger:'blur'}],
        roleType:[{required:true,message:"请选择角色类型",trigger:'blue'}]
    })
    const roleFormRef = ref()
    const roleTypeArr=['无','管理员','ficc管理员','ficc销售','权益管理员','权益销售','ficc销售主管','ficc销售组长','权益销售组长','ficc部门经理','权益部门经理','ficc研究员','权益研究员']
    //打开添加/编辑角色弹窗
    function addRole(data,type){
        roleFormRef.value&&roleFormRef.value.resetFields()
        if(type==='edit'){
            Object.assign(roleForm, {title:"编辑角色",name:data.RoleName,RoleType:data.roleType,role_id:data.RoleId})
        }else{
            Object.assign(roleForm, {title:"添加角色",name:'',RoleType:''})
        }
        isAddRole.value = true
    }
    //删除角色
    function delRole(data){
        ElMessageBox.confirm('是否确认删除该角色?','提示',{
            type: 'warning',
        }).then(() => {
            departInterence.delRole({
                RoleId:data.RoleId
            }).then(res => {
                if(res.Ret === 200) {
                    ElMessage.success('删除成功');
                    getTableList();
                }
            })
        }).catch(() => {});
    }
    //添加 or 编辑 角色
    async function saveRole(){
        try{
            await roleFormRef.value.validate()
        }catch(e){
            console.log(e)
            return
        }
        let res = null
        if(roleForm.title.includes("添加")){
            res = await departInterence.addRole({
                RoleName:roleForm.name,
                RoleType:roleForm.roleType
            })
        }else{
            res = await departInterence.editRole({
                RoleId:Number(roleForm.role_id),
                RoleName:roleForm.name,
                RoleType:roleForm.roleType
            })
        }
        if(res.Ret!==200) return
        ElMessage.success(`${roleForm.title.includes("添加")?'添加':'编辑'}成功`)
        getTableList()
        isAddRole.value = false
    }
    
</script>
<template>
    <!-- 角色管理 -->
    <div class="roleManage_container">
        <div class="role_cont_top">
            <div>
                <el-button type="primary" @click="addRole" style="margin-right:14px;">添加角色</el-button>
                <el-button type="primary" @click="setAuth">设置权限</el-button>
            </div>
            <el-input 
                :prefix-icon="Search"
                placeholder="角色搜索" 
                v-model="tableParams.search_txt" 
                @input="getTableList" 
                style="max-width:359px" 
            />
        </div>
        <div class="role_bot">
            <!-- 表格 -->
            <el-table ref="roleTable" :data="tableData" v-loading="tableParams.isShowloadding"
                element-loading-text="数据加载中..." border>
                <el-table-column prop="no" label="序号" align="center"></el-table-column>
                <el-table-column prop="RoleName" label="角色" align="center"></el-table-column>
                <el-table-column prop="RoleType" label="角色类型" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <div style="color:#4099ef; font-size:24px;">
                            <span class="editsty" @click.stop="getAuthDetail(scope.row)"
                                style="margin-right:20px;">查看权限</span>
                            <!-- <span class="editsty" @click.stop="addRole(scope.row,'edit')" style="margin-right:20px;">编辑</span> -->
                            <span class="deletesty" @click.stop="delRole(scope.row)">删除</span>
                        </div>
                    </template>
                </el-table-column>
                <div slot="empty" style="line-height:25px;margin:20px 0;color:#95A9C5;">
                    <!-- <img src="../../assets/img/data_m/table_no.png" alt="" style="display:block;width:105px;height:68px;margin: auto;"> -->
                    <span>暂无角色</span>
                </div>
            </el-table>
            <el-col :span="24" class="toolbar">
                <el-config-provider :locale="zhCn">
                    <el-pagination layout="total,prev,pager,next,jumper" background :current-page="tableParams.page_no"
                        :page-size="tableParams.pageSize" :total="tableParams.total"
                        @current-change="handleCurrentChange" style="float:right;">
                    </el-pagination>
                </el-config-provider>
            </el-col>
        </div>
        <el-dialog
            :title="roleForm.title" 
            v-model="isAddRole"
            :close-on-click-modal="false"
            @close="isAddRole=false"
            center
            width="30%"
            ><!-- v-dialogDrag -->
                <el-form :model="roleForm" :rules="roleRule" ref="roleFormRef" label-width="100px" class="demo-ruleForm" style="margin-top:15px;">
                    <el-form-item label="角色" prop="name">
                        <el-input v-model="roleForm.name" placeholder="请填写角色名称" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="角色类型" prop="roleType" >
                        <el-select v-model="roleForm.roleType" placeholder="选择角色类型" style="width:90%">
                            <el-option
                                v-for="item in roleTypeArr"
                                :key="item"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>	
                <div style="display:flex;justify-content:center;margin:75px 0 26px;">
                    <el-button type="primary" style="width:80px;margin-right:24px;" @click="saveRole">保存</el-button>
                    <el-button  style="width:80px;" @click="isAddRole=false">取消</el-button>
                </div>
        </el-dialog>
    </div>
</template>
<style scoped lang="scss">
    .roleManage_container {

        /* reset */
        .el-form-item__label {
            font-size: 16px;
            padding-right: 20px !important;
        }

        .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
            content: '';
        }

        .role_cont_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ECECEC;
            padding: 20px 30px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        }

        .role_bot {
            min-height: calc(100vh - 260px);
            padding: 20px 30px;
            background: #fff;
            margin-top: 20px;
            position: relative;
            border: 1px solid #ECECEC;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        }
    }
</style>