<template>
  
  <div class="container resource">
      <div class="pop-banner clearfix">
        <h3 class="current-module">开通恋链</h3>
      </div>
      <div class="pd-form fast-search-form">
        <div class="group-row">
          <div class="form-group">
            <label for="cn1" class="label">供应商</label>
            <div class="control">
              <input type="text" maxlength="20" value="" id="cn1" v-model='search.suppliername' v-rule>
            </div>
          </div>
          <div class="form-group">
            <label for="cn3" class="label">启用状态</label>
            <div class="control control-filtering control-filtering-green">
              <a :class="{'active all':search.syncstate==''}" href="javascript:;" @click="search.syncstate=''" class="option">所有</a>
              <a :class="{'active all':search.syncstate==1}" href="javascript:;" @click="search.syncstate=1" class="option">已启用</a>
              <a :class="{'active all':search.syncstate==2}" href="javascript:;" @click="search.syncstate=2" class="option">未启用</a>
            </div>
          </div>
        </div>
        <div class="form-group">
             <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle fr"  @click="getData(true)">查 询</button>
        </div>
      </div>
      <div class="m-20-0">
         <button class="btn button-green" @click='start(1)'>批量启用</button> 
        </div>
      <table class="itable itable-thead-13px">
        <thead>
          <tr>
            <th class="w60">序号</th>
            <th class="w90">供应商</th>
            <th class="w190">联系人</th>
            <th class="w190">联系电话</th>
            <th class="w100">启用状态</th>
            <th class="w70">是否启用恋链</th>
          </tr>
        </thead>
        <tbody>
        <tr v-for="user in userList">
        <td>
           {{$index + 1}}
          <div class="checkbox-control checkbox-inline" v-if='!user.type==true'>            
            <input type="checkbox" :id='user.guid' v-model='user.checked'>
            <label class="checkbox" :for='user.guid'></label>
          </div>
        </td>
        <td class="t-left pr10">{{user.chinesename}}</td>
        <td class="pr10">{{user.contacts}}</td>
        <td>{{user.contacttel}}</td>
        <td>{{!user.type==true?'未启用':'已启用'}}</td>
        <td>
          <a href="javascript:;" class="btn-d btn-d-activate" v-if='!user.type==true' @click='start(2,user)'>启用</a>
          <a href="javascript:;" class="btn-d btn-d-red" v-else @click='end(user)'>关闭</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>
</template>

<script>
module.exports={
  data: function(){
    return {
      userList: [],
      search: {
        pageSize: 50,
        page: 1,
        totalPages: 0,
        suppliername:'',
        syncstate:2
      },
    };
  },
  methods: {
    getData: function(isRefresh){
      var self = this;

      self.$set('userList',[]);
      if(isRefresh) {
        this.search.page = 1;
      }
      Ajax.post('/systemdata/getcsbr20sup', this.search)
        .then(function (response){
          var data = response.data.data;
          for(var a=0;a<data.list.length;a++){
            data.list[a].checked=false;
          }
          self.$set('userList',data.list);
          self.search.totalPages = data.totalPages;
        })
    },
    // 启用 、 批量开启
    start:function(num,item){
      var self = this;
      var arr=[];
      if(num==1){
       
        for(var a=0;a<self.userList.length;a++){
          if(self.userList[a].checked){
            arr.push(self.userList[a]);
          }
        }

      }else{
        arr.push(item);
      }
      if(arr.length==0){
           layer.msg('请至少选择一条启用的供应商');
           return;
        }
       Ajax.post('/systemdata/synccsbr20sup', JSON.stringify(arr))
        .then(function (response){
          var data = response.data.data;
          if(response.data.errorCode==0 && data>0){
            layer.msg('启用成功');
            self.getData(true);
          }else{
            layer.msg(response.data.message);
          }
        })
    },
    end:function(item){
      var self = this;
      
       Ajax.post('/systemdata/closecsbr20sup', item)
        .then(function (response){
          var data = response.data.data;
          if(response.data.errorCode==0 && data>0){
            layer.msg('关闭成功');
            self.getData(true);
          }else{
            layer.msg(response.data.message);
          }
        })
    }
  },
  route:{
    activate : function(){
      this.getData(false);
    }
  },
  watch:{
    'search.syncstate':function(){
      this.getData(true);
    }
  }
};
</script>