<style>
.tr_active{background:#eaf2fb;}
</style>
<template>
<div>


  <div class="fheader no-bottom" style="margin-top:20px;">
      <h4 class="no-l-icon">证照配置</h4>
  </div>
  <div class="indicators">
      <div class="indicators-left">
          <h3>证照类型列表</h3>
          <!--table-->
          <table class="itable basic-user-info data-inb-table data-ind-table">
            <thead>
              <tr>
                <th class="w60">序号</th>
                <th class="w150">证照名称</th>
                <th class="w120">证照大类</th>
                <th class="">操作</th>
              </tr>
            </thead>
            <tbody>             
              <tr v-for="item in list | filterBy true in 'isselect' "
                :class="{'tr_active':item.code==activeid}">
                <td>{{item.licenseclasscode}}</td>
                <td class="">{{item.name}}
                </td>
                <td class="">{{item.licensecatename}}
                </td>
                <td>
                <a class="btn-d btn-d-activate" href="javascript:"
                  v-on:click="showright(item)">
                    属性配置</a>
                    <a class="btn-d btn-d-red btn-w60" href="javascript:"
                    v-on:click="remove(item)">
                    删除</a>
                </td>
              </tr>    
            </tbody>
          </table> 
           <!--end table-->
          
          <!--table-->
          <table class="itable basic-user-info data-ind-table data-inb-table">
            <thead>
              <tr>
                <th class="w60">序号</th>
                <th class="w270" style="text-align:left;text-indent:50px;">中英文名称</th>
                <th class="">操作</th>
              </tr>
            </thead>
            <tbody>             
              <tr v-for="item in list  ">
                <td>{{item.licenseclasscode}}</td>
                <td class="txt-left">{{item.name}}<br>
                {{item.licensecatename}}
                </td>
                <td>
                    <a class="btn-d btn-d-activate btn-w60" href="javascript:"
                    v-on:click="add1(item)"  
                    v-show="item.isselect==false">
                    添加</a>

                    <a class="btn-d btn-d-cancel btn-w60" href="javascript:"
                         v-show="item.isselect==true">
                        已添加</a>
                </td>
              </tr>                
            </tbody>
          </table> 
           <!--end table-->
      </div> 
      <div class="border-line-1" style="top:0px;" v-show="boolright"></div>
      <div class="indicators-right" v-show="boolright">
          <h3>证照表名</h3>

          <!--table-->
          <table class="itable basic-user-info data-inc-table data-ind-table data-inb-table">
            <thead>
              <tr>
                <th class="w320">中英文名称</th>
                <th class="">操作</th>
              </tr>
            </thead>
            <tbody>             
              <tr>
                <td class="txt-left select-style padd_20">
                    <select v-model="selectedid">
                      <option v-for="item in rightlist" 
                      :value="item.ename">
                      {{ item.cname + item.ename }}
                      </option>
                    </select>
                </td>
                <td>
                    <a class="btn-d btn-d-activate btn-w60" href="javascript:"
                    v-on:click="showtable1()">
                    配置</a>
                </td>
              </tr>               
            </tbody>
          </table> 

          <div v-show="booltable1">

          
              <!--end table-->
              <h3>证照表字段列名</h3>

              <!--table-->
              <table class="itable basic-user-info data-inc-table data-ind-table data-inb-table">
                <thead>
                  <tr>
                    <th class="w80">序号</th>
                    <th class="w250 txt-left padd-left-30">中英文名称</th>
                    <th class="">操作</th>
                  </tr>
                </thead>
                <tbody>             
                  <tr v-for="item in table1list | filterBy true in 'isselect' ">
                    <td>{{$index+1}}</td>
                    <td class="txt-left padd-left-30">{{item.COLUMN_COMMENT}}<br>
                    {{item.COLUMN_NAME}}
                    </td>
                    <td>
                        <a class="btn-d btn-d-red btn-w60" href="javascript:"
                          v-on:click="remove2(item)" >
                        删除</a>

                        
                    </td>
                  </tr> 
                </tbody>
              </table> 
              <!--end table-->
              

              <span class="btn_blue" v-on:click="showtable2()">展示全部属性</span>

              <!--table-->
              <table class="itable basic-user-info data-inc-table data-ind-table data-inb-table" v-show="booltable2">
                <thead>
                  <tr>
                    <th class="w80">序号</th>
                    <th class="w250 txt-left padd-left-30">中英文名称</th>
                    <th class="">操作</th>
                  </tr>
                </thead>
                <tbody v-for="item in table1list  ">             
                  <tr>
                    <td>{{$index+1}}</td>
                    <td class="txt-left padd-left-30">{{item.COLUMN_COMMENT}}<br>
                    {{item.COLUMN_NAME}}
                    </td>
                    <td>
                        <a class="btn-d btn-d-activate btn-w60" href="javascript:"  v-show="item.isselect==false"
                        v-on:click="add2(item)">
                        添加</a>

                        <a class="btn-d btn-d-cancel btn-w60" href="javascript:"
                         v-show="item.isselect==true">
                        已添加</a>
                    </td>
                  </tr>   
                </tbody>
              </table> 
              <!--end table-->
          </div>
      </div>

  </div>
</div>
</template>
<script>
module.exports={
  data:function(){
    return {
      id:0,list:[{id:'',name:'',englishname:''}],rightlist:[],
      table1list:[],table2list:[],
      search: {
          pageSize: 6,
          page: 1,
          totalPages: 0,searchtxt:''       
      },boolright:0,booltable1:0,booltable2:0,activeid:0,selectedid:0
    }
  },watch:{
      '$route.params':function(){
          this.boolright=0;
          this.booltable1=0;
          this.booltable2=0;          
          this.getData();
      }    
  },methods:{
      getData:function(){//获取左边数据
        this.id=this.$route.params.id || 0;
        Ajax.post('/systemdata/operator/infor/getLicClassList',
          {code:this.id}).then(function(res){
          var result=res.data;

          if(result.data && result.data.alllist){
              this.$set('list',result.data.alllist);              
          }
        }.bind(this))
      },remove:function(item){//左边删除
        var deletecur=item.code==this.activeid;
        var obj=Object.assign({},item);
        obj.licenseclasscode=obj.code;
        obj.code=this.id;

        this.MessageBox({
          title: '提示',
          message: '是否删除',
          type: 'success',
          showCancelButton: true
        }).then(function(action) {    
            if(action=="confirm"){                
                Ajax.post('/systemdata/operator/infor/delLicClass',
                  obj).then(function(res){
                    var result=res.data;

                    if(result.errorCode==0){
                        item.isselect=false;
                        if(deletecur){
                          this.boolright=0;
                        }
                    }
                }.bind(this))
            }          
        }.bind(this));
      },add1:function(item){//左边添加
        var obj=Object.assign({},item);
        
        obj.licenseclasscode=obj.code;
        obj.code=this.id;

          Ajax.post('/systemdata/operator/infor/addLicClass',
            obj).then(function(res){
              var result=res.data;   

              if(result.errorCode==0){
                  item.isselect=true;                  
              }
          }.bind(this))
      },showright:function(item){//属性配置绑定
          this.activeid=item.code;     
          var obj=Object.assign({},item);
          obj.licenseclasscode=obj.code;
          obj.code=this.id;

          Ajax.post('/systemdata/operator/infor/getTabLicenseList').
          then(function(res){
            var result=res.data;

            if(result.data){
                this.$set('rightlist',result.data);  
                //this.selectedid=result.data[0] && result.data[0].id            
            }
            this.boolright=1;
            this.booltable2=0;
            this.booltable1=0;
          }.bind(this))
          Ajax.post('/systemdata/operator/infor/getLicClassTab',
            obj).then(function(res){
              var result=res.data;

              if(result.data ){
                  this.selectedid=result.data.licensetabename;          
              }
          }.bind(this))
      },showtable1:function(){//配置 绑定    
          var id=this.selectedid;// 
          var obj={}
          obj.code=this.id;
          obj.licenseclasscode=this.activeid;
          obj.tabename=this.selectedid;

          Ajax.post('/systemdata/operator/infor/setLicClassTab',
            obj).then(function(res){
              var result=res.data;

              if(result.errorCode==0){
                  this.$set('table1list',result.data.alllist)    
                  this.booltable1=1;    
              }
          }.bind(this))
      },showtable2:function(){   //展示全部属性绑定    
          this.booltable2=1;
      },remove2:function(item){//右边删除     
        var obj=Object.assign({},item);
        obj.code=this.id;
        obj.licenseclasscode=this.activeid;
        obj.tabename=this.selectedid;
        obj.colname=obj.COLUMN_NAME;

        this.MessageBox({
          title: '提示',
          message: '是否删除',
          type: 'success',
          showCancelButton: true
        }).then(function(action) {    
            if(action=="confirm"){
                var id=item.id;//
                Ajax.post('/systemdata/operator/infor/delLicClassCol',
                  obj).then(function(res){
                    var result=res.data;

                    if(result.errorCode==0){
                        item.isselect=false;                        
                    }
                }.bind(this))
            }          
        }.bind(this));
      },add2:function(item){//右边添加
        var obj=Object.assign({},item);
        obj.code=this.id;
        obj.licenseclasscode=this.activeid;
        obj.tabename=this.selectedid;
        obj.colname=obj.COLUMN_NAME;
          Ajax.post('/systemdata/operator/infor/addLicClassCol',
            obj).then(function(res){
              var result=res.data;              

              if(result.errorCode==0){
                  item.isselect=true;                  
              }
          }.bind(this))
      }
  },ready:function(){
      this.getData();
  }
}
</script>