<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:;">{{suppliername}}</a>添加供应商品
    </div>
  </div>
  <div class="basic-card-show">

    <div class="basic-data-inter3">
        <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='search.searchValue'>
            <div class="search-btn">
              <input type="button" @click='getData(true)'>
            </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="w90">生产厂商</th>
                        <th class="w100">操作</th>
                      </tr>
                    </thead>
                    <tbody v-for="item in supplierList">
                      <tr>
                        <td>{{$index+1 | getIndex}}</td>
                        <td class="t-left pr10">{{item.goodscode}}</td>
                        <td class="t-left pr10">{{item.goodsname}}</td>
                        <td class="t-left">{{item.producer}}</td>
                        <td>           
                          <!-- <a  class="btn-d btn-d-activate" v-if='editList'>配置</a>               -->
                          <a class="btn button-green mar-none" @click='addSelectGoods(item.guid)'>添加</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='name'>
            <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="w130">生产厂商</th>
                  <th class="w100">操作</th>
                </tr>
              </thead>
              <tbody v-for="item in querySelectGoods | filterBy name" >             
                <tr>
                  <td id="wait.code">{{$index+1 | getIndex}}</td>
                  <td class="t-left pr10">{{item.goodscode}}</td>
                  <td class="t-left pr10">{{item.goodsname}}</td>
                  <td class="t-left">{{item.producer}}</td>
                  <td>
                    <a class="btn button-red mar-none">
                      <span v-else @click="delSelectGoods(item.guid)">删除</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:'',
            bizstate:'Y'
          },
          supplierList:'',
          suppliername:'',
          querySelectGoods:'',
          name:''
        } 
      },
     methods:{
      getData:function(Boole){
           var self = this; 
           if(Boole){
            self.search.page=1;
           }
          Ajax.post('supplyProduct/queryMedGoodsList',self.search).then(function(response){
              var res=response.data.data;
              self.$set('supplierList',res.list);
              self.search.totalPages = res.totalPages;
          });

          // 查询已选
          Ajax.post('supplyProduct/querySelectGoods',self.search).then(function(response){
              var res=response.data.data;
              self.$set('querySelectGoods',res);
              self.search.totalPages = res.totalPages;
          });

          
      },
      addSelectGoods:function(guid){
          var self=this;
           Ajax.post('supplyProduct/addSelectGoods',{'guids':[guid],'supplierguid':self.search.supplierguid}).then(function(response){
              var result=response.data;
              
              
              if(result.errorCode==0){
                self.search.totalPages = result.data.totalPages;
                self.getData();
              }
              layer.msg(result.message);
              
          });
      },
      delSelectGoods:function(guid){
        var self=this;
          Ajax.post('supplyProduct/delSelectGoods',{'guids':[guid],'supplierguid':self.search.supplierguid}).then(function(response){
              var result=response.data;
              
              if(result.errorCode==0){
                self.search.totalPages = result.data.totalPages;
                self.getData();
              }
              layer.msg(result.message);
              
          });
      },
      crearte:function(){


        self.MessageBox({
           title:'提示',
           message:'是否生成供应关系',
           type:'alert',
           showCancelButton: true
          },function(action){
             arr=JSON.stringify(arr);
             if (action=="confirm") {
                Ajax.post('/supplyProduct/supAdd').
                  then(function(response){
                    var result=response.data;
                    if(result.errorCode==0){
                        layer.msg(result.message);
                        self.getData();
                    }else{
                      layer.msg(result.message);
                    }
                })
              }
          }) 
      },
      next:function(){
        var self=this;

        localStorage.setItem('socketArr',JSON.stringify(self.querySelectGoods));
        self.$router.go({ 'path': '/supplyRelation4/'+self.falg+'/'+self.search.supplierguid });

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