<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="w80">序号</th>
                <th class="w200">中英文名称</th>
                <th class="">操作</th>
              </tr>
            </thead>
            <tbody>             
              <tr v-for="item in list | filterBy true in 'isselect'" 
              :class="{'tr_active':item.ename==activeid}">
                <td>{{$index+1}}</td>
                <td class="txt-left">{{item.cname}}<br>
                {{item.ename}}
                </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-->
          <span class="btn_blue" v-on:click="showtable1()">展示全部指标表</span>
          <!--table-->
          <table class="itable basic-user-info data-ind-table data-inb-table"
          v-show="booltable1">
            <thead>
              <tr>
                <th class="w80">序号</th>
                <th class="w250">中英文名称</th>
                <th class="">操作</th>
              </tr>
            </thead>
            <tbody>             
              <tr v-for="item in list  ">
                <td>{{$index+1}}</td>
                <td class="txt-left">{{item.cname}}<br>
                {{item.ename}}
                </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" v-show="boolright"><span>&gt;&gt;</span></div>
      <div class="indicators-right" v-show="boolright">
          <h3>
          系统表字段名<sub>(医疗机构专属供应商企业信息)</sub></h3>
          <div class="bor_btm_1"></div>

          <!--table-->
          <table class="itable basic-user-info data-inc-table data-ind-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 rightlist | filterBy true in 'isselect' ">
                <td>{{$index+1}}</td>
                <td class="txt-left">{{item.COLUMN_COMMENT}}<br>
                {{item.COLUMN_NAME}}
                </td>
                <td>
                    <a class="btn-d btn-d-red btn-w60"
                     href="javascript:"
                      v-on:click="removeright(item)">
                    删除</a>
                </td>
              </tr>   
            </tbody>
          </table> 
           <!--end table-->

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


          <div v-show="booltable2">

          
              <!--table-->
              <table class="itable basic-user-info data-inc-table data-ind-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 rightlist  ">
                    <td>{{$index+1}}</td>
                    <td class="txt-left">{{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 class="pagination m-20-0 hide">
                  <ul>
                    <li><span>上一页</span></li>
                    <li><span>下一页</span></li>
                  </ul>
                  <em class="page">第1页</em>
                  <em>共1页</em>
              </div>

          </div>
      </div>
  </div>

</div>
</template>
<script>
module.exports={
  data:function(){
    return {
        id:0,list:[],rightlist:[],
        search: {
          pageSize: 6,
          page: 1,
          totalPages: 0,searchtxt:''       
        },boolright:0,booltable1:0,booltable2:0,activeid: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/getProTabList',{
          code:this.id}).then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list',result.data.alllist);                    
          }
        }.bind(this))
      },showright:function(item){//获取右边数据，并显示
          this.activeid=item.ename;
          var obj=Object.assign({},item);
          obj.code=this.id;

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

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

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

                    if(result.errorCode==0){
                        item.isselect=false;
                        if(deletecur){
                          this.boolright=0;
                        }
                    }
                }.bind(this))
            }          
        }.bind(this));
      },removeright:function(item){//右边删除
        var obj=Object.assign({},item);
        obj.code=this.id;
        obj.ename=this.activeid;
        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/delPro',
                  obj).then(function(res){
                    var result=res.data;

                    if(result.errorCode==0){
                        item.isselect=false;
                    }
                }.bind(this))
            }          
        }.bind(this));
      },showtable1:function(){   //展示全部指标表 并显示      
          this.booltable1=1;          
      },showtable2:function(){  //展示全部属性 并显示      
          this.booltable2=1;          
      },add1:function(item){//左边添加
          var obj=Object.assign({},item);
          obj.code=this.id;

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

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

              if(result.errorCode==0){
                  item.isselect=true;                  
              }
          }.bind(this))
      }
  },ready:function(){
      this.getData();
  },route:{
    activate:function(){

    }
  }
}
</script>