<template>
  <div id="roleTemplateSet">
    <!-- 角色模板设置 -->
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>角色模板设置</BreadcrumbItem>
    </Breadcrumb>
    <ul class="topSearch">
        <li>
            <span>编码：</span>
            <Input type="text" placeholder="请输入角色模板编码" style="width: 200px" v-model="searchCode"/>
        </li>
        <li>
            <span>名称：</span>
            <Input type="text" 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='roleTemplateSetEdit'>
      <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>备注：</span>
                <Input type="text" placeholder="备注" :maxlength="48" style="width: 250px" v-model="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:'RoleTemplateSet',
    data(){
        return{
            page:1,
            pageSize:10,
            totalPage:0,
            searchCode:'',
            searchName:'',
            columns: [{title: '模板编码', key: 'code'},
                {title: '模板名称', key: 'name'},
                {title: '创建时间', key: 'createTime'},
                {title: '创建人', key: 'creatorName'},
                {title: '备注', key: 'remark'},
                // {title: '状态',key: 'action',align: 'center',width:100,
                //   render:(h, params) => {
                //     return h('div', [
                //       h('i-switch', { //数据库1是已处理，0是未处理
                //         props: {
                //           type: 'primary',
                //           value: params.row.enabled==1?true:false,//控制开关的打开或关闭状态，官网文档属性是value
                //         },
                //         on: {
                //           'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                //             //参数value是回调值，并没有使用到
                //             this.switch(params.row.id,params.row.enabled); //params.index是拿到table的行序列，可以取到对应的表格值
                //           }
                //         }
                //       }, )])}
                // },
                {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.detail?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            _this.showDetail(params.row.id,params.row.name);
                          }
                        }
                      }, '明细'),
                      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: [],
            delMsgName:'',
            delMsg:false,
            delId:'',
            delType:'',
            
            showModel:false,
            modelName:'',
            model:{
              id:'',
              code:'',
              name:'',
              remark:'',
            },
            tableBtn:{
              add:false,
              edit:false,
              detail:false,
              del:false,
            },

        }
    },
    mounted(){
        this.init();
        this.getUrlKeyF();
        this.getpage();
        this.id=this.$route.params.id;
    },
    methods:{
      init(){
        //按钮
            this.permissionButton = JSON.parse(sessionStorage.getItem('nMArr'));
            for (let i of this.permissionButton) {
                if(i.code=='roleTemplateSetAdd') {this.tableBtn.add=true;}
                if(i.code=='roleTemplateSetEdit') {this.tableBtn.edit=true;}
                if(i.code=='roleTemplateSetDetail') {this.tableBtn.detail=true;}
                if(i.code=='roleTemplateSetDel') {this.tableBtn.del=true;}
            }
      },
        // 获取搜索条件
        getUrlKeyF(){
          this.searchCode = this.$utils.getUrlKey('code')?this.$utils.getUrlKey('code'):''
          this.searchName = this.$utils.getUrlKey('name')?this.$utils.getUrlKey('name'):''
          this.page =parseInt(this.$utils.getUrlKey('page'))?parseInt(this.$utils.getUrlKey('page')):1
          this.pageSize = parseInt(this.$utils.getUrlKey('pageSize'))?parseInt(this.$utils.getUrlKey('pageSize')):10
        },
        getpage(){
            axios.post('/platform-manager/roleTemplate/selectRoleTemplateListByPage',{
                code: this.searchCode,
                current: this.page,
                name: 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')
                    }
                    this.dataList = temp
                    this.totalPage = res.data.data.total
                }
            })
        },
        searchBtn(){
            this.page = 1
            this.getpage()
        },
        resetBtn(){
          this.searchCode = ''
          this.searchName = ''
          this.page = 1
          this.getpage()
        },
        changePage(page){
            this.page = page
            this.getpage()
        },
        changePageSize(size){
            this.pageSize = size
            this.page = 1
            this.getpage()
        },
        addNew(){
          this.showModel = true
          this.modelName = '新增'
        },
        showEditor(id){
          this.model.id = id
          this.modelName = '编辑'
          axios.post('/platform-manager/roleTemplate/selectRoleTemplateById',{
            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.remark = temp.remark
            }
          })
        },
        cancelModel(){
          this.showModel = false
          this.modelName = ''
          this.model.id = ''
          this.model.code = ''
          this.model.name = ''
          this.model.remark = ''
        },
        okModel(){
          if (!this.model.code) {
            this.$Message.error('编码不能为空')
            return false
          }
          if (!this.model.name) {
            this.$Message.error('名称不能为空')
            return false
          }
          if (this.modelName=='编辑') {
            axios.post('/platform-manager/roleTemplate/updateRoleTemplate',{
              code: this.model.code,
              id:this.model.id,
              name:this.model.name,
              remark:this.model.remark
            }).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/roleTemplate/saveRoleTemplate',{
              code: this.model.code,
              name:this.model.name,
              remark:this.model.remark
            }).then(res=>{
              if (res) {
                this.$Message.info(res.data.data)
                this.cancelModel()
                this.page = 1
                this.getpage()
              }
            })
          }
          
        },
        //去明细
        showDetail(id,name){
          this.$router.push({path:'/index/system/roleTemplateSetDetail/'+this.id+'/1/'+id+'/'+name,
            query:{
                code:this.searchCode,
                name:this.searchName,
                page:this.page,
                pageSize:this.pageSize,
            },
          })
        },
        removeRole(id,name){
            this.delId = id
            this.delMsgName = name
            this.delMsg = true
        },
        cancel(){
            this.delId = ''
            this.delMsgName = ''
            this.delMsg = false
        },
        ok(){
          axios.post('/platform-manager/roleTemplate/deleteRoleTemplate',{
            id:this.delId
          }).then(res=>{
            if (res) {
              console.log(res)
              this.$Message.info(res.data.data)
              this.cancel()
              this.page = 1
              this.getpage()
            }
          })
        },
    }
}
</script>

<style>
#roleTemplateSet .topSearch{
    display: flex;
    flex-flow: row wrap;
    margin-top: 10px;
}
#roleTemplateSet .topSearch>li{
    margin:0 15px 10px 0;
}
#roleTemplateSetEdit .topSearch>li{
    margin:0 15px 10px 0;
}
#roleTemplateSetEdit .modelBox>li{
    margin-bottom: 10px;
}
#roleTemplateSetEdit .modelBox>li>span{
    display: inline-block;
    width: 80px;
    text-align: right;
}
</style>