<template>
  <div id="dictionaryDetail">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>数据字典</BreadcrumbItem>
      <BreadcrumbItem>字典数据</BreadcrumbItem>
    </Breadcrumb>
    <Button type="primary" ghost icon="ios-arrow-back" @click="returnDataDict">返回</Button>
    <!--搜索-->
    <div class="dictionaryDetailSearch">
      <ul class="searchList">
        <li class="searchListItem">
          <span>字典名称：</span>
          <Input v-model="dataName" placeholder="请输入字典名称" style="width: 200px"/>
        </li>
        <li class="searchListItem">
          <span>字典编码：</span>
          <Input v-model="dataCode" placeholder="请输入字典编码" style="width: 200px"/>
        </li>
        <li class="searchListItem">
          <Button icon="ios-search" type="primary" @click="searchBtn">搜索</Button>
          <Button icon="ios-undo" ghost type="primary" @click="resetBtn">重置</Button>
        </li>
      </ul>
    </div>
    <!--表格-->
    <div>
      <!--新增和删除-->
      <div class="buttonGroup">
        <ButtonGroup size="large" shape="circle">
          <Button type="primary" ghost icon="md-add" v-show="dataDicListAddBtn" @click="addNew">新增</Button>
          <!--<Button type="error" ghost icon="ios-trash">删除</Button>-->
        </ButtonGroup>
      </div>
      <!--表格-->
      <Table border ref="selection" :columns="columns" :data="tableData"></Table>
    </div>
    <!--分页-->
    <div class="pages">
      <Page :total="pageTotal" show-total show-elevator show-sizer @on-change="getNewPages1" @on-page-size-change="getNewPages2"/>
    </div>
    <!--弹出框-->
    <div class="addRole" v-if="showModel">
      <div class="modelBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit" @click="cancelBtn"><Icon type="md-close" /></span>
        </p>
        <div class="roleMsg">
          <div><span>字典编码:</span><Input type="text" style="width: 220px;" v-model="dCode"/></div>
          <div><span>字典名称:</span><Input type="text" style="width: 220px;" v-model="dName"/></div>
          <div><span>类型编码:</span><Input type="text" style="width: 220px;" v-model="dictTypeCode" disabled/></div>
          <div class="remark"><span>备注:</span><Input type="textarea" :rows="4" v-model="remark"/></div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="cancelBtn">取消</Button>
          <Button type="primary" @click="confirmBtn">确定</Button>
        </div>
      </div>
    </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="cancelDel">关闭</Button>
        <Button type="error" @click="sureDel">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import axios from './../../assets/js/axios';
    export default {
        name: "DataDictionaryDetail",
        data(){
          return {
            id:'',//页面id
            dictTypeCode:'',
            dictTypeId:'',
            current:'',
            page:1,
            pageSize:10,
            pageTotal:0,
            dataCode:'',
            dataName:'',
            columns: [
              // {type: 'selection', width: 60, align: 'center'},
              {title: '字典ID', key: 'id'},
              {title: '类型编码', key: 'typeCode'},
              {title: '字典编码', key: 'dataCode'},
              {title: '字典名称', key: 'dataName'},
              {title: '备注', key: 'remark'},
              {title: '操作', key: 'operate', width: 220, align: 'center',
                render: (h, params) => {
                  let _this = this
                  let dataDicListEditBtn = false;
                  let dataDicListRemoveBtn = false;
                  for (let i of _this.tableBtn) {
                    if (i.code == 'dataDicListEdit') {dataDicListEditBtn = true};
                    if (i.code == 'dataDicListRemove') {dataDicListRemoveBtn = true}
                  }
                  return h('div', [
                    h('Button', {
                      props: {type: 'primary', size: 'small'},
                      style: {marginRight: '5px',
                        display:dataDicListEditBtn?'inline-block':'none'
                      },
                      on: {
                        click: () => {
                          _this.editItem(params.row.id);
                        }
                      }
                    }, '编辑'),
                    h('Button', {
                      props: {type: 'error', size: 'small'},
                      style:{
                        display:dataDicListRemoveBtn?'inline-block':'none'
                      },
                      on: {
                        click: () => {
                          _this.removeItem(params.row.id,params.row.dataName);
                        }
                      }
                    }, '删除')
                  ]);
                }
              }],
            tableData: [],
            dId:'',
            dName:'',
            dCode:'',
            tName:'',
            remark:'',
            showModel:false,
            showTitle:'',
            sureBtn:false,
            delMsg:false,
            delId:'',
            delMsgName:'',
            tableBtn:[],
            dataDicListAddBtn:false,
            

          }
        },
      mounted(){
        this.id=this.$route.params.id;
        this.dictTypeId=this.$route.params.dictTypeId;
        this.dictTypeCode=this.$route.params.dictTypeCode;
        this.current=this.$route.params.current;
        this.getButton();
        this.getPage();
      },
      methods:{
        /*加载页面按钮*/
        getButton(){
          this.tableBtn=JSON.parse(sessionStorage.getItem('nMArr'));
          for(let i of this.tableBtn){
            if(i.code=="dataDicListAdd"){ this.dataDicListAddBtn=true;}
          }
        },
        getPage(){
          let _this=this;
          axios.post('/platform-manager/platformDict/selectPlatformDictDataListByPage',{
            current:_this.page,
            size:_this.pageSize,
            dataCode:_this.dataCode,
            dataName:_this.dataName,
            dictTypeId:_this.dictTypeId
          }).then(res=>{
            if(res){
              _this.pageTotal=res.data.data.total;
              _this.tableData=res.data.data.records;
            }
          })
        },
        /*页码改变时加载数据*/
        getNewPages1(current){
          this.page=current;
          this.getPage();
        },
        /*每页显示多少条改变时加载数据*/
        getNewPages2(size){
          this.pageSize=size;
          this.getPage();
        },
        /*返回*/
        returnDataDict(){
          this.$router.push({path:'/index/system/dataDictionary/'+this.id+'/'+this.current});
        },
        /*搜索*/
        searchBtn(){
          this.tableData=[];
          this.getPage();
        },
        /*重置*/
        resetBtn(){
          this.dataName='';
          this.dataCode='';
        },
        /*编辑*/
        editItem(dId){
          let _this=this;
          _this.showModel=true;
          _this.showTitle='编辑字典';
          _this.sureBtn=true;
          _this.dId=dId;
          axios.post('/platform-manager/platformDict/selectPlatformDictDataById',{
            id:dId
          }).then(res=>{
            if(res){
              let temp=res.data.data;
              _this.dName=temp.dataName;
              _this.dCode=temp.dataCode;
              _this.remark=temp.remark;
            }
          })
        },
        /*编辑确定*/
        editBtn(){
          let _this=this;
          if(_this.dName==''){
            _this.$Message.error('字典名称不能为空');
            return false;
          }
          if(_this.dCode==''){
            _this.$Message.error('字典类型不能为空');
            return false;
          }
          axios.post('/platform-manager/platformDict/updatePlatformDictData',{
            dictTypeId:_this.dictTypeId,
            dataName:_this.dName,
            id:_this.dId,
            dataCode:_this.dCode,
            remark:_this.remark
          }).then(res=> {
            if(res){
               _this.showModel=false;
              _this.removeMsg();
              _this.$Message.info(res.data.data);
              _this.getPage();
            }
          })
        },
        /*确定*/
        confirmBtn(){
          if(this.sureBtn){
            this.editBtn();
          }else{
            this.addNewBtn();
          }
        },
        cancelBtn(){
          this.showModel=false;
          this.removeMsg();
        },
        removeMsg(){
          this.dCode='';
          this.dName='';
          this.dId='';
          this.remark='';
        },
        /*新增*/
        addNew(){
          this.showModel=true;
          this.showTitle='添加字典';
          this.removeMsg();
          this.sureBtn=false;
        },
        addNewBtn(){
          let _this=this;
          if(_this.dName==''){
            _this.$Message.error('字典名称不能为空');
            return false;
          }
          if(_this.dCode==''){
            _this.$Message.error('字典类型不能为空');
            return false;
          }
          axios.post('/platform-manager/platformDict/savePlatformDictData',{
            dataCode:_this.dCode,
            dataName:_this.dName,
            remark:_this.remark,
            dictTypeId:_this.dictTypeId
          }).then(res=>{
            if(res){
               _this.$Message.info(res.data.data);
              _this.showModel=false;
              _this.removeMsg();
              _this.getPage();
            }
          })
        },
        removeItem(id,name){
          let _this=this;
          _this.delId=id;
          _this.delMsg=true;
          _this.delMsgName=name;
        },
        sureDel(){
          let _this=this;
          axios.post('/platform-manager/platformDict/deletePlatformDictData',{
            id:_this.delId
          }).then(res=>{
            if(res){
               _this.delMsg=false;
              _this.delMsgName='';
              _this.delId='';
              _this.$Message.info(res.data.data);
              _this.getPage();
            }
          })
        },
        cancelDel(){
          this.delMsg=false;
          this.delId='';
          this.delMsgName='';
          this.$Message.info('取消删除');
        }
      }
    }
</script>

<style scoped>
  #dictionaryDetail{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #dictionaryDetail .bread{
    font-size: 13px;
    white-space: nowrap;
    margin-bottom: 20px;
  }
  #dictionaryDetail .dictionaryDetailSearch{
    padding-top: 20px;
  }
  #dictionaryDetail .searchList{
    display: flex;
    padding: 20px 20px 0;
    flex-flow: row wrap;
  }
  #dictionaryDetail .searchListItem{
    width: 280px;
    margin-bottom: 20px;
  }
  #dictionaryDetail .searchListItem:last-child{
    width: 160px;
  }
  #dictionaryDetail .buttonGroup{
    padding: 20px 0 20px 10px;
  }
  #dictionaryDetail .pages{
    padding: 30px 0;
    text-align: center;
  }
  /*弹出框*/
  #dictionaryDetail .addRole{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #dictionaryDetail .modelBox{
    position: absolute;
    width: 680px;
    min-height: 300px;
    top:80px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #dictionaryDetail .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: #00507e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #dictionaryDetail .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #dictionaryDetail .roleMsg{
    display: flex;
    flex-flow: row wrap;
    font-size: 14px;
    padding: 15px 25px;
    justify-content: space-between;
  }
  #dictionaryDetail .roleMsg div{
    padding: 0 0 10px 0;
    margin-left: -3px;
  }
  #dictionaryDetail .roleMsg span{
    display: inline-block;
    width: 80px;
    text-align: justify;
  }
  #dictionaryDetail .roleMsg input{
    outline: none;
    border: none;
    width: 210px;
    height: 30px;
    padding-left: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #dictionaryDetail .roleMsg .remark{
    width: 630px;
    padding: 0;
  }
  #dictionaryDetail .modelBox .buttons{
    text-align:center;
  }
  #dictionaryDetail .modelBox .buttons button{
    margin: 10px;
  }
</style>
