<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      <!-- <div class="operate-btns">
        <a @click="getData" class="fbtn fb-refresh">刷新</a>
        <a @click="edit" class="fbtn fb-modify">修改</a>
      </div> -->
      <h3 class="current-module">维护供应关系</h3>
    </div>
  <div class="step-tips step-3 clearfix">
      <div class="step-item">
        <span>1</span><span>选择方式</span>
      </div>
      <div class="step-item active">
        <span>2</span><span>维护供应关系</span>
      </div>
      <div class="step-item">
        <span>3</span><span>完成</span>
      </div>
  </div>
  <div class="step-btn">
    <div class="radio-control">
        为<a style='text-decoration: none;cursor:default;margin: 0 20px;' href="javascript:;">{{goodsname}}</a>添加供应商
    </div>
  </div>
  <div class="basic-card-show">

    <div class="basic-data-inter3" v-if='falg'>
        <div class="basic-data-inter3-left" style='padding-top:15px;width:500px;'>
          <form class="search-bar mb-20" active="###">
            <input type="text" placeholder="供应商名称" style='border:1px solid rgba(96,111,122,.2);' v-model='refer'>
            <div class="search-btn">
              <input type="button" @click='getData'>
            </div>
         </form>
              <div class="basic-data-inter3-left-div">
                  <table class="itable basic-user-info data-ind-table table-bor-trl">
                    <thead>
                      <tr>
                        <th class="w60">序号</th>
                        <th class="w100">供应商编码</th>                          
                        <th class="w100">供应商名称</th>
                        <th class="">操作</th>
                      </tr>
                    </thead>
                    <tbody v-for="item in supplierList | filterBy refer">
                      <tr>
                        <td>{{$index+1 | getIndex}}</td>
                        <td class="t-left pr10">{{item.medsuppliercode}}</td>
                        <td class="t-left pr10">{{item.suppliername}}</td>
                        <td>           
                          <!-- <a  class="btn-d btn-d-activate" v-if='editList'>配置</a>               -->
                          <a @click="add($index)" class="btn button-green mar-none">添加</a>
                        </td>
                      </tr>                  
                    </tbody>
                  </table>
                  <span class="basic-data-inter3-left-prev"><<</span>
              </div>
               <pagination 
             @page-change="getData" 
             :class="['m-20-0']"
             :page-no.sync="search.page" 
             :total-pages.sync="search.totalPages"></pagination>
        </div>  
        <div class="basic-data-inter3-right" style='width:450px;'>
          <form class="search-bar mb-20" active="###">
            <input type="text" placeholder="供应商名称" style='border:1px solid rgba(96,111,122,.2);' v-model='refer2'>
            <div class="search-btn">
              <input type="button">
            </div>
         </form>
            <h3>待选列表</h3>
            <div class="bor_btm_1"></div>
            <table class="itable basic-user-info data-inc-table data-ind-table">
              <thead>
                <tr>
                  <th class="w80">序号</th>
                  <th class="w120">供应商编码</th>
                  <th class="w130">供应商名称</th>
                  <th class="w100">操作</th>
                </tr>
              </thead>
              <tbody v-for="item in supplier | filterBy refer2">             
                <tr>
                  <td id="wait.code">{{$index+1 | getIndex}}</td>
                  <td class="text-left">{{item.medsuppliercode}}</td>
                  <td>{{item.suppliername}}</td>
                  <td>
                    <a class="btn button-red mar-none">
                      <span v-else @click="del($index)">删除</span>
                    </a>
                  </td>
                </tr>    
              </tbody>
            </table>
        </div>
    </div>
  </div>
  <div class="step-btn">
    <a href="javascript:history.go(-1)">上一步，重新选择</a>
    <a href="javascript:;" @click='next'>下一步，生成供应关系</a>
  </div>
</div> 
</template>
<script>
    module.exports={
      data:function(){
        return{
          falg:'',
          search:{
            pageSize: 50,
            page: 1,
            totalPages: 0,
            supplierguid:'',
            searchValue:'',
            guid:''
          },
          supplierList:[],
          supplier:[],
          goodsname:'',
          refer:'',
          refer2:'',
        } 
      },
     methods:{
      getData:function(){
          var self = this;
          self.supplier=[];
          Ajax.post('supplyProduct/querySupplierList',self.search).then(function(response){
              var res=response.data.data;
              self.$set('supplierList',res.list);
              self.search.totalPages = res.totalPages;
          });
      },
      add:function(index){
        var self =this;
        var arr=[];

        self.supplier.push(self.supplierList[index]);

        self.supplierList.splice(index,1);
      },
      del:function(index){
        var self=this;

        self.supplierList.push(self.supplier[index]);

        self.supplier.splice(index,1);
      },
      next:function(){
        var self=this;

        localStorage.setItem('supplier',JSON.stringify(self.supplier));
        self.$set('supplier',[]);
        localStorage.setItem('medGoodsGuid',JSON.stringify(self.medGoodsGuidList));
        localStorage.setItem('guid',JSON.stringify(self.search.guid));
        self.$router.go({ 'path': '/supplyRelation4/'+self.falg +'/'+'11'});

      }
    },
     route :{
        data: function (transition) {
          this.search.guid=transition.to.params.guid;
          this.falg=transition.to.params.falg;
          this.search.supplierguid=transition.to.params.supplierguid;
          this.goodsname=decodeURIComponent(transition.to.params.goodsname);
          this.getData();
        }, 
      },
    }
</script>