<template>
  <div class="container resource close-left-menu contaNEW">
   <div class="pop-banner clearfix">
    <!-- <div class="operate-btns">
    </div> -->
    <div class="operate-btns">
        <a href="javascript:" class="fbtn fb-add" v-on:click="add">添加</a><!--v-if-->
    </div>
     <h3 class="current-module">供应商信息维护</h3>{{dual}}
    </div>
  <!--supply-productlist start-->
    <div class="supply-productlist clearfix">

      <div class="pd-form fast-search-form ">

        <div class="group-row">
          <div class="form-group">
            <!-- <label for="cn1" class="label" style="width:8em;">医院供应商编码</label> -->
            <div class="control">
              <input type="text" id="cn0" maxlength="20" v-model="search.medsupcode" placeholder="医院供应商编码" tile='医院供应商编码'> </div>
          </div>
          <div class="form-group">
            <!-- <label class="label">医院供应商名称</label> -->
            <div class="control">
              <input type="text" id="cn1" maxlength="20" v-model="search.medsupname" placeholder="医院供应商名称" tile='医院供应商名称'> </div>
          </div>
        </div>

       <div class="group-row t-right">
          <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData">查 询</button>
        </div>
      </div>

     <table class=" itable itable-thead-13px itable-td-long-text">
        <thead id='t_header'>
          <tr>
           <th class="w70">序号</th>
           <th class="w70">医院供应商编码</th>
           <th class="w140">医院供应商名称</th>
           <th class="w100">招标平台供应商编码</th>
           <th class="w140">操作</th>
          </tr>
       </thead>
       <tbody v-if="newobj.show" class="txt_v">

         <tr >
            <td></td>
           <td class="pr20">
              <input type="text" v-model="newobj.medsuppliercode" maxlength="20"/>
           </td>
           <td class="pr20">
           <input type="text" v-model="newobj.medsuppliername" maxlength="20"/></td>
           <td class="pr20">
           <input type="text" v-model="newobj.platformsupcode"></td>
           <td>
            <div class="from-button">
             <a href="javascript:;" class="green-button" v-on:click="save">保存<i>|</i></a>
             <a href="javascript:;" class="red-button" v-on:click="cancel">取消</a>
            </div>
            <!-- <a class="btn-d btn-d-activate" v-on:click="save" >保存</a>
            <a class="btn-d btn-d-activate"  v-on:click="cancel">取消</a> -->
           </td>
         </tr>
       </tbody>
       <tbody  v-for="item in list" class="txt_v">
         <tr v-if="item.show!=true">
           <td>{{$index + 1 }}</td>
           <td class="pr10">{{item.medsuppliercode}}</td>
           <td class="pr10">{{item.medsuppliername}}</td>
           <td class="pr10">{{item.platformsupcode}}</td>
           <td>
            <div class="from-button">
             <a href="javascript:;" class="green-button"  v-on:click="update($index)">修改<i>|</i></a>
             <a href="javascript:;" class="red-button" v-on:click="remove($index)">删除</a>
            </div>
         <!--    <a class="btn-d btn-d-activate" v-on:click="update($index)" >修改</a>
            <a class="btn-d btn-d-activate"  v-on:click="remove($index)">删除</a> -->
           </td>
         </tr>
         <tr v-else>
            <td>{{$index + 1 }}</td>
           <td class="pr20">
              <input type="text" v-model="item.medsuppliercode" v-rule maxlength="20">
           </td>
           <td class="pr20">
           <input type="text" v-model="item.medsuppliername" v-rule maxlength="20"></td>
           <td class="pr20">
           <input type="text" v-model="item.platformsupcode"></td>
           <td>
            <div class="from-button">
             <a href="javascript:;" class="green-button"  v-on:click="save($index)">保存<i>|</i></a>
             <a href="javascript:;" class="red-button" v-on:click="cancel($index)">取消</a>
            </div>
          <!--   <a class="btn-d btn-d-activate" v-on:click="save($index)" >保存</a>
            <a class="btn-d btn-d-activate"  v-on:click="cancel($index)">取消</a> -->
           </td>
         </tr>

       </tbody>
      </table>
      <pagination
      @page-change="getData(false)"
      :class="['m-20-0']"
      :page-no.sync="search.page"
      :total-pages.sync="search.totalPages"
      ></pagination>
    </div>
  </div>
</template>
<script>
module.exports={
  data: function(){
    return {
      list: [],
      search: {
        pageSize: 50,
        page: 1,
        totalPages: 0,
        medsupcode:'',medsupname:''
      },guid:'',oldlist:[],newobj:{
        medsuppliercode:'',medsuppliername:'',suppliername:'',show:false
      }
    };
  },
  methods: {
    getData: function(isRefresh){
      var self = this;
      if(isRefresh) {
        this.search.page = 1;
      }
      var sear=Object.assign({},this.search);
      if(sear.medsupcode==""){
        sear.medsupcode=null
      }
      if(sear.medsupname==""){
        sear.medsupname=null
      }
      Ajax.post('/hospital/hos_medSupRelation_getSupList', sear)
        .then(function (response){
          var data = response.data.data;
          if (response.data.errorCode == 0) {
            self.$set('list',data.list);
            self.search.totalPages = data.totalPages;
            self.search.page=data.pageNo;
          } else {
            layer.msg(response.data.message);
          }
        })
    },update:function(index){
      this.guid=this.list[index].guid;
      this.oldlist[index]=Object.assign({},this.list[index]);
      this.$set('list['+index+'].show',true);
    },remove:function(index){
      Ajax.post('/hospital/hos_medSupRelation_delSup',{guid:this.list[index].guid}).
      then(function(res){

        if(res.data.errorCode==0){

        }else{
          layer.msg(response.data.message);
        }
        this.getData();
      }.bind(this))
    },cancel:function(index){
      if(index>=0){
          this.$set('list['+index+']',Object.assign({},{show:false},this.oldlist[index]));
      }else{
        this.newobj={
          medsuppliercode:'',medsuppliername:'',suppliername:'',show:false
        }
      }


    },save:function(index){

      var obj='';
      if(index>=0){
        obj=this.list[index]
      }else{
        obj=this.newobj;
      }
      Ajax.post('/hospital/hos_medSupRelation_saveOrupdateSup',obj).then(function(res){

        this.getData();
        this.newobj={
          medsuppliercode:'',medsuppliername:'',suppliername:'',show:false
        }
      }.bind(this))
    },add:function(){
      this.newobj={
          medsuppliercode:'',medsuppliername:'',suppliername:'',show:true

      }
    }
  },
  route:{
    activate : function(){
      this.getData(true);
    }
  }
};
</script>