<template>
    <div id="presetRoleManagement">
        <!-- 预设角色管理 -->
        <ul class="topSearch">
            <li>
                <span>编码：</span>
                <Input type="text" :maxlength="48" placeholder="请输入角色模板编码" style="width: 200px" v-model="searchCode"/>
            </li>
            <li>
                <span>名称：</span>
                <Input type="text" :maxlength="48" placeholder="请输入角色模板名称" style="width: 200px" v-model="searchName"/>
            </li>
            <li>
                <Button type="primary" style="margin-right:10px;" @click="searchBtn">查询</Button>
                <Button type="primary" style="margin-right:10px;" ghost @click="resetBtn">重置</Button>
                <Button type="success" @click="addNew" v-if="tableBtn.add">新增</Button>
            </li>
        </ul>
        <div>
            <Table border :columns="columns" :data="dataList" sort="table"></Table>
        </div>
        <div class="page">
            <Page :total="totalPage" :current.sync="page" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"/>
        </div>
        <!--删除确认框-->
        <Modal v-model="delMsg" :closable="false" :mask-closable="false" width="400" scrollable>
        <p slot="header" style="height:40px;lineHeight:40px;backgroundColor:#ED4014;color:#fff;text-align:center">
            <span>删除</span>
        </p>
        <p>确定删除 <b>"{{delMsgName}}"</b> 这一条信息吗？</p>
        <div slot="footer">
            <Button type="error" ghost @click="cancel">关闭</Button>
            <Button type="error" @click="ok">确定</Button>
        </div>
        </Modal>
        <!--新增编辑-->
        <Modal v-model="showModel" :closable="false" :mask-closable="false" width="400" scrollable id="presetRoleManagementEdit">
            <p slot="header" style="height:40px;lineHeight:40px;backgroundColor:#00507e;color:#fff;text-align:center">
                <span>{{modelName}}</span>
            </p>
            <ul class="modelBox">
                <li>
                    <span>编码：<Icon type="ios-medical"/></span>
                    <Input type="text" placeholder="编码" :maxlength="48" style="width: 250px" v-model="model.code"/>
                </li>
                <li>
                    <span>名称：<Icon type="ios-medical"/></span>
                    <Input type="text" placeholder="名称" :maxlength="48" style="width: 250px" v-model="model.name"/>
                </li>
                <li>
                    <span>类别：<Icon type="ios-medical"/></span>
                    <Select v-model="model.category" style="width:250px" @on-change="changeCategory">
                        <Option v-for="item in categoryList" :value="item.code" :key="item.code">{{ item.name }}</Option>
                    </Select>
                </li>
                <li>
                    <span>是否管理员：</span>
                    <Select v-model="model.managerFlag" style="width:250px" :disabled="disabledManager">
                        <Option v-for="item in managerFlagList" :value="item.code" :key="item.code">{{ item.name }}</Option>
                    </Select>
                </li>
            </ul>
            <div slot="footer">
                <Button type="primary" ghost @click="cancelModel">关闭</Button>
                <Button type="primary" @click="sureModel">确定</Button>
            </div>
        </Modal>
         <!--授权-->
        <div class="warrant" v-if="showModel2">
        <div class="warrantBox">
            <p class="modelTitle">
            <span>《{{grade}}》的权限</span>
            </p>
            <div class="gradeTree">
            <Tree :data="gradeData" show-checkbox ref="treeList" @on-check-change="selectTree"></Tree>
            </div>
            <div class="bottomBtn">
            <Button type="primary" class="btn2" icon="ios-undo" ghost @click="cancelWarrant">返回</Button>
            <Button type="primary" class="btn1" icon="ios-settings" @click="saveSettings">保存设置</Button>
            </div>
        </div>
        </div>

    </div>
</template>

<script>
import axios from './../../assets/js/axios';
import {formatDate} from './../../tools/tools'
export default {
    name:'PresetRoleManagement',
    data(){
        return{
            page:1,
            pageSize:10,
            totalPage:0,
            searchCode:'',
            searchName:'',
            categoryList:[],
            columns: [{title: '编码', key: 'code'},
                {title: '名称', key: 'name'},
                {title: '类别', key: 'category'},
                {title: '是否管理员' ,key: 'managerFlag',
                    render:(h,params)=>{
                        switch (params.row.managerFlag){
                            case 0:
                                return h('span','否');
                                break;
                            case 1:
                                return h('span','是')
                                break;
                        }
                    }
                },
                {title: '创建时间', key: 'createTime'},
                {title: '创建人', key: 'creatorName'},
                {title: '操作', key: 'action', width: 170,align: 'center',
                  render: (h, params) => {
                      let _this =this
                    return h('div', [
                      h('Button', {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          display:_this.tableBtn.edit?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            _this.showEditor(params.row.id);
                          }
                        }
                      }, '编辑'),
                      h('Button', {
                        props: {
                          type: 'success',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          display:_this.tableBtn.war?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            _this.showMenu(params.row.id,params.row.name);
                          }
                        }
                      }, '授权'),
                      h('Button', {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style:{
                            display:_this.tableBtn.edit?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            _this.removeRole(params.row.id,params.row.name);
                          }
                        }
                      }, '删除'),
                    ]);
                  }
                }
              ],
            dataList: [],
            delMsgName:'',
            delMsg:false,
            delId:'',
            showModel:false,
            modelName:'',
            showModel:false,
            modelName:'',
            model:{
                code:'',
                name:'',
                category:'',
                managerFlag:null,
                id:'',
            },
            managerFlagList:[{code:0,name:'否'},{code:1,name:'是'}],
            disabledManager:false,

            showModel2:false,
            gradeId:'',
            grade:'',
            gradeData:[],
            checkedAll:[],
            //权限按钮
            tableBtn:{
                add:false,
                edit:false,
                war:false,
                del:false,
            }




        }
    },
    mounted(){
        this.getDic()
        this.getPage()
        
    },
    methods:{
        getDic(){
            let _this=this;
            /*取出字典项*/
            _this.selectList=JSON.parse(localStorage.getItem('selectList'));
            let selectList=_this.selectList;
            for(let m of selectList){
              if(m.t=="category"){
                _this.categoryList=m.list;
              }
            }
            //按钮
            this.permissionButton = JSON.parse(sessionStorage.getItem('nMArr'));
            for (let i of this.permissionButton) {
                if(i.code=='presetRoleManagementAdd') {this.tableBtn.add=true;}
                if(i.code=='presetRoleManagementEdit') {this.tableBtn.edit=true;}
                if(i.code=='presetRoleManagementWar') {this.tableBtn.war=true;}
                if(i.code=='presetRoleManagementDel') {this.tableBtn.del=true;}
            }
        },
        getPage(){
            axios.post('/platform-manager/presetRole/selectPresetRoleListByPage',{
                current:this.page,
                roleCode: this.searchCode,
                roleName:this.searchName,
                size:this.pageSize
            }).then(res=>{
                if (res) {
                    let temp = res.data.data.records
                    for (let i of temp) {
                        i.createTime = formatDate(i.createTime,'01','03')
                        for (let j of this.categoryList) {
                            if (i.category == j.code) {
                                i.category = j.name
                            }
                        }
                    }
                    this.dataList = temp
                    this.totalPage = res.data.data.total
                }
            })
        },
        searchBtn(){
            this.page = 1
            this.getPage()
        },
        resetBtn(){
            this.searchName = ''
            this.searchCode = ''
            this.page = 1
            this.getPage()
        },
        changePage(page){
            this.page = page
            this.getpage()
        },
        changePageSize(size){
            this.pageSize = size
            this.page = 1
            this.getpage()
        },
        removeRole(id,name){
            this.delMsgName = name
            this.delId = id
            this.delMsg = true
        },
        cancel(){
            this.delMsg = false
            this.delId = ''
            this.delMsgName = ''
        },
        ok(){
            axios.post('/platform-manager/presetRole/deletePresetRole',{
                id:this.delId
            }).then(res=>{
                if (res) {
                    this.$Message.info(res.data.data)
                    this.cancel()
                    this.page = 1
                    this.getPage()
                }
            })
        },
        showEditor(id){
            this.model.id = id
            this.modelName = '编辑'
            axios.post('/platform-manager/presetRole/selectPresetRoleById',{
                id:id
            }).then(res=>{
                if (res) {
                    this.showModel = true
                    let temp = res.data.data
                    this.model.code = temp.code
                    this.model.name = temp.name
                    this.model.category = temp.category+''
                    if (this.model.category=='1') {
                        this.disabledManager = false
                    }
                    this.model.managerFlag = temp.managerFlag

                }
            })

        },
        cancelModel(){
            this.showModel = false
            this.disabledManager = false
            this.modelName = ''
            this.model.code = ''
            this.model.name = ''
            this.model.category = ''
            this.model.managerFlag = null
        },
        sureModel(){
            if (!this.model.code) {
                this.$Message.error('编码不能为空')
                return false
            }
            if (!this.model.name) {
                this.$Message.error('名称不能为空')
                return false
            }
            if (!this.model.code) {
                this.$Message.error('类别不能为空')
                return false
            }
            if (this.modelName=='编辑') {
                axios.post('/platform-manager/presetRole/updatePresetRole',{
                    category:this.model.category,
                    code: this.model.code,
                    id: this.model.id,
                    managerFlag:this.model.category=='1'?this.model.managerFlag:null,
                    name:this.model.name
                }).then(res=>{
                    if (res) {
                        this.$Message.info(res.data.data)
                        this.cancelModel()
                        this.page = 1
                        this.getPage()
                    }
                })
            }else if (this.modelName=='新增') {
                axios.post('/platform-manager/presetRole/savePresetRole',{
                    category:this.model.category,
                    code: this.model.code,
                    managerFlag:this.model.category=='1'?this.model.managerFlag:null,
                    name:this.model.name
                }).then(res=>{
                    if (res) {
                        this.$Message.info(res.data.data)
                        this.cancelModel()
                        this.page = 1
                        this.getPage()
                    }
                })
            }
            
        },
        changeCategory(id){
            if(id=='1'){
                this.disabledManager = false
                this.model.managerFlag = null
            }else{
                this.disabledManager = true
            }
        },
        addNew(){
            this.showModel = true
            this.modelName = '新增'
        },
        //授权
        showMenu(id,name){
            this.gradeId = id
            this.grade = name
            axios.post('/platform-manager/presetRole/selectMenuByRoleId',{
                id:id
            }).then(res=>{
                if (res) {
                    this.showModel2 = true
                    let treeArr=[];
                    treeArr=this.getTree(res.data.data);
                    this.gradeData=treeArr;
                }
            })
        },
        /*解析数据*/
        getTree(tree = []) {
          let arr = [];
          if (!!tree && tree.length !== 0) {
            tree.forEach(item => {
              let obj = {};
              obj.title = item.name;
              obj.id=item.id;
              obj.checked=item.checked;
              obj.expand = false;
              obj.selected = false;
              obj.children = this.getTree(item.children); // 递归调用
              arr.push(obj);
            });
          }
          return arr;
        },
        cancelWarrant(){
            this.showModel2 = false
            this.gradeId = ''
            this.grade = ''
            this.gradeData = []
        },
        saveSettings(){
            let temp=[];
            for(let i of this.checkedAll){
                temp.push(i.id);
            }
            if (temp.length === 0) {
                this.$Message.warning('菜单未修改或菜单不能为空')
                return false
            }
            axios.post('/platform-manager/presetRole/savePresetRoleMenu',{
                ids:temp.join(','),
                roleId:this.gradeId
            }).then(res=>{
                if (res) {
                    console.log(res)
                    this.cancelWarrant()
                    this.page = 1
                    this.getPage()
                }
            })
        },
        selectTree(a){
          let checkAll=this.$refs.treeList.getCheckedAndIndeterminateNodes();
          this.checkedAll=checkAll;
        },


        
    }

}
</script>

<style>
#presetRoleManagement .topSearch{
    display: flex;
    flex-flow: row wrap;
    margin-top: 10px;
}
#presetRoleManagement .topSearch>li{
    margin:0 15px 10px 0;
}
#presetRoleManagementEdit .modelBox>li{
    margin-bottom: 10px;
}
#presetRoleManagementEdit .modelBox>li>span{
    display: inline-block;
    width: 80px;
    text-align: right;
}
/*授权*/
  #presetRoleManagement .modelBox{
    position: absolute;
    width: 680px;
    min-height: 300px;
    top:10px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #presetRoleManagement .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: #00507e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #presetRoleManagement .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #presetRoleManagement .modelBox .buttons{
    text-align:center;
  }
  #presetRoleManagement .modelBox .buttons button{
    margin: 10px;
  }
  #presetRoleManagement .warrant{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #presetRoleManagement .warrantBox{
    position: absolute;
    width: 680px;
    top:80px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #presetRoleManagement .gradeTree{
    height: 300px;
    overflow-y: auto;
    padding-left: 10px;
    margin: 20px;
    border:1px solid #ccc;
    border-radius: 10px;
  }
  #presetRoleManagement .bottomBtn{
    text-align: center;
  }
  #presetRoleManagement .bottomBtn .btn1,.btn2{
    width: 100px;
    margin: 0 10px;
  }
</style>