<style scoped>
  .step-btn a{
    margin: 0 10px; 
  }
 </style>
 <template>
  <div class="container resource close-left-menu contaNEW">

  <div class="pop-banner clearfix">
    <div class="operate-btns">
      <a href="javascript:history.go(-1)" class="fbtn fb-return">返回</a>
    </div>
    <h3 class="current-module">维护供应关系</h3>
  </div>
  <div class="step-tips step-3 clearfix">
      <div class="step-item active">
        <span>1</span><span>选择方式</span>
      </div>
      <div class="step-item">
        <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">
          <input id="radio01" name="radioio" checked="checked" type="radio" @click="getData">
        <label class="radio" for="radio01"><a>以供应商为单位建立关系</a></label>

          <label class="f-size16 p-tit-green">或</label>

          <input id="radio02" name="radioio" type="radio" @click="getData2">
        <label class="radio ml-10" for="radio02"><a>以商品为单位建立关系</a></label>
      </div>
      </div>
      <form class="search-bar mb-20" active="###" v-if='falg'>
        <input type="text" placeholder="供应商名称" style='border:1px solid rgba(96,111,122,.2);' v-model='search.medsuppliername'>
        <div class="search-btn">
          <input type="button" @click='getData(true)'>
        </div>
     </form>
<!--     <input id="radio01" name="radioio" checked="checked" type="radio" @click="radio(1)">
    <label class="radio" for="radio01"><a>以供应商为单位建立关系</a></label>
    或
    <input id="radio02" name="radioio" type="radio" @click="radio(2)">
    <label class="radio" for="radio02"><a>以商品为单位建立关系</a></label> -->
  <div class="basic-card-show" v-if='falg'>    
    <div class="hop-basic-con">
      <table class="itable itable-thead-13px">
        <thead>
          <tr>                    
            <th class="w50">序号</th>
            <th class="w80">供应商编码</th>
            <th class="w150">供应商名称</th>
            <th class="w100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for='item in supplierList'>
            <td>{{$index+1 | getIndex}}</td>
            <td class="t-left">{{item.medsuppliercode}}</td>
            <td class="t-left">{{item.medsuppliername}}</td>
            <td><a href="javascript:;" class="btn button-green mar-none" v-link='{"path":"/supplyRelation3/"+falg+"/"+item.supplierguid+"/"
            +encodeURIComponent(item.medsuppliername)}'>添加供应品种</a></td>
          </tr> 
          <tr v-show='supplierList.length<=0'>  
            <td colspan="5">
            未找到供应商信息
            </td>
          </tr>                      
        </tbody>
      </table>  
    </div>
  </div>
  <pagination 
   @page-change="getData" 
   :class="['m-20-0']"
   :page-no.sync="search.page" 
   :total-pages.sync="search.totalPages" v-if='falg'>
  </pagination>



  <form class="search-bar mb-20" active="###" v-if='!falg'>
    <input type="text" placeholder="商品编码、商品名称、注册证号" style='border:1px solid rgba(96,111,122,.2);' v-model='search2.searchValue'>
    <div class="search-btn">
      <input type="button" @click='getData2(true)'>
    </div>
  </form>
  <div class="basic-card-show" v-if='!falg'>    
    <div class="hop-basic-con">
      <table class="itable itable-thead-13px">
        <thead>
          <tr>                    
            <th class="w50">序号</th>
            <th class="w80">商品编码</th>
            <th class="w150">商品名称</th>
            <th class="w150">生产厂商</th>
            <th class="w100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for='item in MedGoodsList'>
            <td>{{$index+1 | getIndex}}</td>
            <td class="t-left pr10">{{item.goodscode}}</td>
            <td class="t-left">
              {{item.goodsname}}<br>{{item.unitstyle}}
                <br>{{item.minunitqty}}{{item.minunitstyle}}
              </td>
            <td class="t-left pr10">{{item.producer}}</td>
            <td><a href="javascript:;" class="btn button-green mar-none" v-link='{"path":"/supplyRelation3_2/"+falg+"/"+encodeURIComponent(item.goodsname)
            +"/"+item.guid}'>添加供应商</a></td>
          </tr>                        
        </tbody>
      </table> 
    </div>
  </div>
  <pagination 
             @page-change="getData2" 
             :class="['m-20-0']"
             :page-no.sync="search2.page" 
             :total-pages.sync="search2.totalPages" v-if='!falg'></pagination>
</div>
</template>
<script>
  module.exports={
    data:function(){
      return{
        supplierList:{},
        medsuppliername:'',
        falg:true,
        search:{
          pageSize: 50,
          page: 1,
          totalPages: 0,
          medsuppliername:''
        },
        MedGoodsList:{},
        search2:{
          pageSize: 50,
          page: 1,
          totalPages: 0,
          searchValue:'',
          bizstate:'Y'
        },
      } 
    },
     methods:{
        getData:function(Boole){
          var self=this;
          self.falg=true;
          if(Boole){
            self.search.page=1;
          }
          Ajax.post('/supplyProduct/querySupplierList',self.search).
          then(function(response){
            var res=response.data.data;


            self.$set('supplierList',res.list);
            self.search.totalPages = res.totalPages;
          })
        },

        getData2:function(Boole){
          var self=this;
          self.falg=false;
          if(Boole){
            self.search2.page=1;
          }
          Ajax.post('/supplyProduct/queryMedGoodsList',self.search2).
          then(function(response){
            var res=response.data.data;

            self.$set('MedGoodsList',res.list);
            self.search2.totalPages = res.totalPages;
          })
        },

     },
     route:{
        data: function () {
          var self=this;
         if(self.falg){
          self.getData();
         }else{
          self.getData2();
         }
        }, 
      },
  }

</script>