<template>
  <div id="dataDictionary">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>数据字典</BreadcrumbItem>
    </Breadcrumb>
    <div>
      <!--搜索-->
      <div>
        <ul class="searchList">
          <li class="searchListItem">
            <span>类型名称：</span>
            <Input v-model="typeName" placeholder="请输入类型名称" style="width: 200px"/>
          </li>
          <li class="searchListItem">
            <span>类型编码：</span>
            <Input v-model="typeCode" 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-if="dataDicAddBtn" @click="addNew">新增</Button>
            <!--<Button type="error" ghost icon="ios-trash">删除</Button>-->
          </ButtonGroup>
        </div>
        <!--表格-->
        <Table border ref="selection" :height="tableHeight" :columns="columns" :data="tableData"></Table>
      </div>
      <!--分页-->
      <div class="page">
        <Page :total="pageTotal" :current.sync="currentPage" show-total show-elevator show-sizer @on-change="getNewPages1" @on-page-size-change="getNewPages2"/>
      </div>
    </div>
    <!--弹出框-->
    <div class="addRole" v-show="showModel">
      <div class="modelBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit" @click="cancelEdit"><Icon type="md-close" /></span>
        </p>
        <div class="roleMsg">
          <div><span>类型名称:</span><Input type="text" style="width: 220px;" v-model="tName"/></div>
          <div><span>类型编码:</span><Input type="text" style="width: 220px;" v-model="tCode"/></div>
          <div class="remark"><span>备注:</span><Input type="textarea" :rows="4" v-model="remark"/></div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="cancelEdit">取消</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';
  import { getTableHeight } from "./../../tools/tools";
    export default {
        name: "DataDictionary",
        data(){
          return{
            tableHeight:'',
            id:'',//页面id
            page:1,
            pageSize:10,
            pageTotal:0,
            currentPage:1,
            typeName:'',
            typeCode:'',
            delMsg:false,
            delMsgName:'',
            delId:'',
            editId:'',
            tName:'',
            tCode:'',
            remark:'',
            sureBtn:false,
            columns: [
              // {type: 'selection', width: 60, align: 'center'},
              {title: '类型ID', key: 'id'},
              {title: '类型名称', key: 'typeName'},
              {title: '类型编码', key: 'typeCode'},
              {title: '备注', key: 'remark'},
              {title: '操作', key: 'operate',width: 180, align: 'center',
                render: (h, params) => {
                  let _this=this;
                  let dataDicEditBtn=false;
                  let dataDicListBtn=false;
                  let dataDicRemoveBtn=false;
                  for(let i of _this.tableBtn){
                    if(i.code=="dataDicEdit"){dataDicEditBtn=true;}
                    if(i.code=="dataDicList"){dataDicListBtn=true;}
                    if(i.code=="dataDicRemove"){dataDicRemoveBtn=true;}
                  }
                  return h('div', [
                    h('Button', {
                      props: {type: 'primary', size: 'small'},
                      style: {
                        marginRight: '5px',
                        display:dataDicEditBtn?'inline-block':'none'
                        },
                      on: {
                        click: () => {
                          this.editItem(params.row.id);
                        }
                      }
                    }, '编辑'),
                    h('Button', {
                      props: {type: 'success', size: 'small'},
                      style: {
                        marginRight: '5px',
                        display:dataDicListBtn?'inline-block':'none'
                        },
                      on: {
                        click: () => {
                          // this.$router.push({name:'DataDictionaryDetail'})
                          this.toDetail(params.row.id,params.row.typeCode);
                        }
                      }
                    }, '列表'),
                    h('Button', {
                      props: {type: 'error', size: 'small'},
                      style:{
                        display:dataDicRemoveBtn?'inline-block':'none'
                      },
                      on: {
                        click: () => {
                          this.removeItem(params.row.id,params.row.typeName);
                        }
                      }
                    }, '删除')
                  ]);
                }}],
            tableData: [],
            showModel:false,
            showTitle:'',
            dictionaryName:'',//字典名称
            tableBtn:[],
            dataDicAddBtn:false,
          }
        },
        created(){
          window.addEventListener('resize',this.getHeight)
          window.onbeforeunload = this.getHeight()
        },
        destroyed(){
          window.removeEventListener('resize', this.getHeight)
        },
      mounted(){
          this.id=this.$route.params.id;
          this.page=parseInt(this.$route.params.current);
          this.getPage();
          this.getButton();
      },
      methods:{
        getHeight () {
          this.tableHeight = getTableHeight(310)
        },
        /*加载页面按钮*/
        getButton(){
          this.tableBtn=JSON.parse(sessionStorage.getItem('nMArr'));
          for(let i of this.tableBtn){
            if(i.code=="dataDicAdd"){ this.dataDicAddBtn=true;}
          }
        },
        getPage(){
            let _this=this;
            axios.post('/platform-manager/platformDict/selectPlatformDictTypeListByPage?current=1&enabled=1&size=10',{
              current:_this.page,
              size:_this.pageSize,
              typeCode:_this.typeCode,
              typeName:_this.typeName
            }).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.page = 1
          this.currentPage = 1
          this.getPage();
        },
        /*取消编辑*/
        cancelEdit(){
           this.showModel=false;
           this.tCode='';
           this.tName='';
           this.remark='';
           this.editId='';
        },
        /*编辑*/
        editItem(id){
          let _this=this;
          _this.tName='';
          _this.tCode='';
          _this.showModel=true;
          _this.showTitle='修改类型';
          _this.sureBtn=true;
          _this.editId=id;
          axios.post('/platform-manager/platformDict/selectDictTypeById',{
            id:id
          }).then(res=>{
            if(res){
              let temp=res.data.data;
              _this.tName=temp.typeName;
              _this.tCode=temp.typeCode;
              _this.remark=temp.remark;
            } 
          })
        },
        /*编辑确定*/
        editItemBtn(){
          let _this=this;
          if(_this.tCode==''){
            _this.$Message.error('类型编码不能为空');
            return false;
          }
          if(_this.tName==''){
            _this.$Message.error('类型名称不能为空');
            return false;
          }
          axios.post('/platform-manager/platformDict/updatePlatformDictType',{
            id:_this.editId,
            typeCode:_this.tCode,
            typeName:_this.tName,
            remark:_this.remark
          }).then(res=>{
            if(res){
               _this.$Message.info(res.data.data);
              _this.showModel=false;
              _this.tCode='';
              _this.tName='';
              _this.remark='';
              _this.editId='';
              _this.getPage();
            }
          })
        },
        /*确定按钮*/
        confirmBtn(){
          if(this.sureBtn){
            this.editItemBtn();
          }else{
            this.addNewBtn();
          }
        },
        /*新增*/
        addNew(){
          this.showModel=true;
          this.showTitle='添加类型';
          this.sureBtn=false;
        },
        /*新增确定*/
        addNewBtn(){
          let _this=this;
          if(_this.tCode==''){
            _this.$Message.error('类型编码不能为空');
            return false;
          }
          if(_this.tName==''){
            _this.$Message.error('类型名称不能为空');
            return false;
          }
          axios.post('/platform-manager/platformDict/savePlatformDictType',{
            typeCode:_this.tCode,
            typeName:_this.tName,
            remark:_this.remark
          }).then(res=>{
            if(res){
              _this.showModel=false;
              _this.tName='';
              _this.tCode='';
              _this.remark='';
              _this.getPage();
              _this.$Message.info('新增成功');
            }
          })
        },
        /*删除*/
        removeItem(id,name){
          this.delId=id;
          this.delMsgName=name;
          this.delMsg=true;
        },
        /*确定删除*/
        sureDel(){
          let _this=this;
          axios.post('/platform-manager/platformDict/deletePlatformDictType',{
            id:_this.delId
          }).then(res=>{
            if(res){
              _this.$Message.info(res.data.data);
              _this.cancelDel()
              _this.page = 1
              _this.currentPage = 1
              _this.getPage();
             
            }
          })
        },
        cancelDel(){
          this.delMsg=false;
          this.delId='';
          this.delMsgName='';
        },
        /*搜索*/
        searchBtn(){
          this.tableData=[];
          this.page = 1
          this.currentPage = 1
          this.getPage();
        },
        /*重置*/
        resetBtn(){
          this.typeCode='';
          this.typeName='';
        },
        /*去列表*/
        toDetail(dictTypeId,dictTypeCode){
          this.$router.push({path:'/index/system/DataDictionaryDetail/'+this.id+'/'+dictTypeId+'/'+dictTypeCode+'/'+this.page});
        }
      }
    }
</script>

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