<template>
    <div id="roleTemplateSetDetail">
        <!-- 角色模板明细 -->
         <div style="marginBottom:10px;">
            <Button type="primary" ghost @click="returnBack" style="marginRight:20px;">返回</Button>
            <Button type="success" @click="addNew" v-if="tableBtn.add">新增</Button>
            <Button type="primary" ghost class="right">{{tempName}}</Button>
        </div>
        <div>
            <Table border :columns="columns" :data="dataList" sort="table"></Table>
        </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="roleTemplateSetDetailEdit">
            <p slot="header" style="height:40px;lineHeight:40px;backgroundColor:#00507e;color:#fff;text-align:center">
                <span>分配预设角色</span>
            </p>
            <ul class="modelBox">
                <li>
                    <span>角色模板：</span>
                    <Input type="text" style="width: 280px" v-model="tempName" disabled/>
                </li>
                <li>
                    <span>预设角色：</span>
                    <Select v-model="roleId" style="width:280px">
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </li>
                <li>
                    <span>备注：</span>
                    <Input type="text" style="width: 280px" v-model="remark"/>
                </li>
            </ul>
            <div slot="footer">
                <Button type="primary" ghost @click="cancelModel">关闭</Button>
                <Button type="primary" @click="okModel">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import axios from '../../assets/js/axios';
import {formatDate} from './../../tools/tools';
export default {
    name:'RoleTemplateSetDetail',
    data(){
        return{
            preId:'',
            tempId:'',
            tempName:'',
            query:{
                code:'',
                name:'',
                page:null,
                pageSize:null,
            },
            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: 60,align: 'center',
                  render: (h, params) => {
                      let _this =this
                    return h('div', [
                      h('Button', {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style:{
                            display:_this.tableBtn.del?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            _this.removeRole(params.row.id,params.row.name);
                          }
                        }
                      }, '删除'),
                    ]);
                  }
                }
            ],
            dataList: [],
            delMsg:false,
            delMsgName:'',
            delId:'',
            showModel:false,
            roleList:[],
            roleId:'',
            remark:'',
            //权限按钮
            tableBtn:{
                add:false,
                del:false,
            },

        }
    },
    mounted(){
        this.preId=this.$route.params.id;
        this.tempId=this.$route.params.tempId;
        this.tempName = this.$route.params.tempName;
        this.getDic();
        this.init()
        this.getUrlKeyF();
        this.getPreRoleList();
        this.getPage()
    },
    methods:{
        init(){
            //按钮
            this.permissionButton = JSON.parse(sessionStorage.getItem('nMArr'));
            for (let i of this.permissionButton) {
                if(i.code=='roleTemplateSetDetailAdd') {this.tableBtn.add=true;}
                if(i.code=='roleTemplateSetDetailDel') {this.tableBtn.del=true;}
            }
        },
        // 获取搜索条件
        getUrlKeyF(){
          this.query.code = this.$utils.getUrlKey('code')?this.$utils.getUrlKey('code'):''
          this.query.name = this.$utils.getUrlKey('name')?this.$utils.getUrlKey('name'):''
          this.query.page =parseInt(this.$utils.getUrlKey('page'))?parseInt(this.$utils.getUrlKey('page')):1
          this.query.pageSize = parseInt(this.$utils.getUrlKey('pageSize'))?parseInt(this.$utils.getUrlKey('pageSize')):10
        },
        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;
              }
            }
        },
        getPreRoleList(){
          axios.post('/platform-manager/roleTemplate/listAllPresetRole',{}).then(res=>{
            if (res) {
              this.roleList = res.data.data
            }
          })
        },
        getPage(){
            axios.post('/platform-manager/roleTemplate/selectRoleByTemplateId',{
                id:this.tempId
            }).then(res=>{
                if (res) {
                    let temp = res.data.data
                    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
                }
            })
        },
        returnBack(){
            this.$router.push({path:'/index/system/roleTemplateSet/'+this.preId+'/1',
            query:this.query
          })
        },
        removeRole(id,name){
            this.delMsg = true
            this.delMsgName = name
            this.delId = id
        },
        cancel(){
            this.delMsg = false
            this.delMsgName = ''
            this.delId = ''
        },
        ok(){
            axios.post('/platform-manager/roleTemplate/deleteRoleTemplateDetail',{
                id:this.delId
            }).then(res=>{
                if (res) {
                    this.$Message.info(res.data.data)
                    this.cancel()
                    this.getPage()
                }
            })
        },
        addNew(){
            this.showModel = true
        },
        cancelModel(){
            this.showModel = false
            this.roleId = ''
            this.remark = ''
        },
        okModel(){ 
            if (this.roleId=='') {
                this.$Message.info('请选择预设角色')
                return false
            }
            axios.post('/platform-manager/roleTemplate/saveRoleTemplateDetail',{
                remark:this.remark,
                roleId:this.roleId,
                templatetId:this.tempId
            }).then(res=>{
                if (res) {
                    this.$Message.info(res.data.data)
                    this.cancelModel()
                    this.getPage()
                }
            })
        },

    },
}
</script>

<style>
#roleTemplateSetDetailEdit .modelBox>li{
    margin-bottom: 10px;
}
#roleTemplateSetDetailEdit .modelBox>li>span{
    display: inline-block;
    width: 60px;
}
</style>