<template>
<div style="min-height: 424px;" class="container resource">
      <div class="pop-banner clearfix">
        <!-- <div class="operate-btns">
    </div> -->
        <h3 class="current-module">供应商清单</h3>
      </div>
      <!--business-supply start-->
      <div class="supplylist clearfix supply-select">{{dual}}
        <div class="pd-form fast-search-form ">
          <div class="group-row">
            <div class="form-group"> 
              <div class="control">
              <input type="text" value="" id="cn1" title="供应商" placeholder="供应商" v-model='search1.search_LIKE_chinesename'>
              </div>
            </div>
            <div class="form-group form_group_state">
              <label class="label">业务状态</label>
             <div class="control control-filtering  control-filtering-green fl">
              <a class="{{ stateAll }} option" href="javascript:void(0)" @click="bizState('')">全部</a>
              <a class="{{ stateYes }} option" href="javascript:void(0)" @click="bizState(ctns.bizstatey)">有效</a>
              <a class="{{ stateNo }} option" href="javascript:void(0)" @click="bizState(ctns.bizstates)">停用</a>
              <a  class="{{ stateNY }} option" href="javascript:void(0)" @click="bizState(ctns.bizstatee)">作废</a>
          </div>
            </div>
          </div>
          <!--  v-if="authoritySetting.oneSearchFlag" -->
          <div class="group-row t-right">
            <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getSupplyRelation()">查 询</button>
          </div>
        </div>
<!--         <div class="supplylist-root">
      <div class="root-node" id="sortable" style='height: 480px;'>
        <template v-for="(indexI,supplyRelation) in supplyRelationList">
          <div class="list-node" :class="{ 'active': activeI[indexI] }" @click="activeIClick(indexI)">
            <span class="node-btn"></span>{{ supplyRelation.medGuidName }}<div class="fr" style="font-size:18px;font-weight:400;"><span class=" ctable-em">{{supplyRelation.supplierNameList.length}}</span>家</div>
          </div>
          <div class="list-show" v-show="activeI[indexI]">
            <template v-for="(indexJ,supplierName) in supplyRelation.supplierNameList">
              
              <div class="box-shadow"  style="margin-left: 20px;width: 331px;":class="{ 'active': activeJ[locationCalculation(indexI,indexJ)] }" 
                  @click="getGoods(locationCalculation(indexI,indexJ),supplyRelation.supplierGuidList[indexJ])">
                <div><a href="javasript:;" v-link="{ path: '/businessSupplyForm/' + supplyRelation.supplierGuidList[indexJ]+'/'+supplyRelation.medGuid+'/'+supplyRelation.medGuidName }">{{ supplierName }}</a></div>
                <span class="w80">{{  supplyRelation.supplierBizStateList[indexJ] | BIZSTATE}}</span>
                <span class="w90">{{  supplyRelation.supplierContacts[indexJ] }}</span>
                <span class="w10 tel-icon">{{ supplyRelation.supplierContactTel[indexJ] }}</span>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div> -->
    <div class="supplylist-root">
                <div class="root-node" id="sortable" style='height: 480px;'>

                        <div class="list-show" style="display:block" v-for="supplier in supplyRelationList">

                                <div class="hover-box">
                                    <a href="javascript:;" v-link="{ path: '/businessSupplyForm/' + supplier.SDSupplierGUID+'/'+medguid + '/' +supplier.GUID }">{{ supplier.ChineseName }}</a>
                                    <span class="w40 fl">{{ supplier.BizState| BIZSTATE}}</span>
                                    <span class="w120 fl">{{ supplier.Contacts}}</span>
                                    <span class="w120 tel-icon fl" v-if='supplier.ContactTel' @click="getHospitalSupplierGoodsList(supplier)">{{ supplier.ContactTel}}</span>
                                </div>

                        </div>

                </div>
            </div>
        <div class="supplylist-table">
          <div class="fheader no-bottom pd0">
                    <h4 class="fh-good">商品列表</h4>
                </div>
          <table class=" itable itable-thead-13px">
            <thead>
              <tr>
                  <th class="w50">序号</th>
                  <th class="w40" colspan='2'>商品</th>
                  <th class="w130 t-left">生产厂商</th>
                  <th class="w50">状态</th>
                  <th class="w70">证照完整率</th>
                  <th class="w100">操作</th>
              </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="5" v-if="mFMedGoodsList.length == 0 || !mFMedGoodsList">
                        暂无符合条件的记录
                    </td>
                </tr>
                <tr v-for="mFMedGoods in mFMedGoodsList">
                    <td>{{ $index + 1 }}</td>
                    <td class="pr10">
                        <imagebox :imgarr="mFMedGoodsListImg[mFMedGoods.sdgoodsguid] | original">
                            <div class="pro-pic"
                                 :style="'background-image: url('+mFMedGoodsListImg[mFMedGoods.sdgoodsguid] +  ');margin-left: 12px;'">
                                <span class="pic-max blue-search"></span>
                            </div>
                        </imagebox>
                    </td>
                    <td>
                        <div class="t-left pr10">{{ mFMedGoods.goodscode }}
                            <br>{{mFMedGoods.goodsname}}<br/>{{mFMedGoods.goodsspec}}
                        </div>
                    </td>
                    <td>
                        <div class="t-left pr10">{{ mFMedGoods.registkey ? mFMedGoods.registkey : '无' }}
                            <br>{{ mFMedGoods.producer ? mFMedGoods.producer : '无' }}</div>
                    </td>
                    <td class="text-color-yellow">{{ mFMedGoods.approvalstate | APPROVALSTATE}}</td>
                    <td>{{mFMedGoods.varchar1}}%</td>
                    <td class="pt9"><a href="javascript:;" class="btn button-green"
                                       v-link="{ path: '/businessSupply1/' + mFMedGoods.guid }">明细</a></td>
                </tr>
            </tbody>
          </table>
           <pagination 
         @page-change="getHospitalSupplierGoodsList(mfhdeptSearch.search_EQ_supplierguid)"
         :class="['m-20-0']"
         :page-no.sync="mfhdeptSearch.page" 
         :total-pages.sync="mfhdeptSearch.totalPages"></pagination>
    </div>


</template>
<script>
module.exports={
  data: function(){
    return {
       iCount: [],                   //外层记录内层数量
      activeI :[],                  //外层显示
      activeJ :[],                  //内层显示
       medguid:'',
      stateAll:'all active',
      supplyRelationList :[],
       countIndex:0,
        authoritySetting: {
          oneSearchFlag:false,
      },
      mfEntSpecListImg:[],
       // 证照完整率
        myrate:'',
      distrbguid:'',
      medguid:'',
      mfsupplyrelation:[],
      distributorSupplierList: [],
      mfEntSpecList: [],
      activeTemp :[],
      search: {
        search_EQ_masterguid:'',
        search_EQ_distrbGuid:'',
        pageSize: 2,
        page: 1,
        totalPages: 0
      },
      mfhdeptSearch: {                     
        pageSize: 2,                                        //每页数量      
        page: 1,                                            //当前页      
        totalPages: 0,                                      //分页数     
        total: 0,                                           //数据总量    
        search_LIKE_goodsname: '',                          //商品名称模糊查询条件
        // search_EQ_meddeptguid: '',                       //商品名称科室查询条件
        search_EQ_supplierguid: '',                         //商品名称供应商查询条件
        search_EQ_distrbguid: '',                              //商品名称配送查询条件
        search_EQ_bizstate: this.ctns.bizstatey,            //商品有效状态
        search_EQ_approvalstate: this.ctns.approvalstatey,  //供应商专属资料审批状态
      },
      search1: {
        search_LIKE_chinesename: '',
        search_EQ_bizstate: '',
        search_EQ_distrbguid:'',
      },
      authoritySetting: {
          oneSearchFlag:true,
      },
    };
  },
     computed: {
      dual: function () {
        var self = this;
        var curMenuRole = this.$store.state.user.curMenuRole;
        self.search.search_EQ_distrbguid = this.$store.state.user.curUser.distrbguid;
        self.search1.search_EQ_distrbguid = this.$store.state.user.curUser.distrbguid;
        self.distrbguid = this.$store.state.user.curUser.distrbguid;
        if (self.search.search_EQ_distrbguid!=undefined && self.search.search_EQ_distrbguid!=null) {
          self.getData();
          if (curMenuRole!=undefined && curMenuRole!=null) {
              for (var i=0;i<curMenuRole.length;i++) {
                  if(curMenuRole[i].menu != null) {
                      if (curMenuRole[i].menu.name == '供应商清单') {
                          for (var j=0;j<curMenuRole[i].buttonList.length;j++) {
                               // 一级菜单设置
                               var name = curMenuRole[i].buttonList[j].name.trim();
                               var isValid = curMenuRole[i].buttonList[j].isvalid;
                               var level = curMenuRole[i].buttonList[j].level;
                               // 一级菜单设置
                               if (!self.authoritySetting.oneSearchFlag && level=='1' && name =='检索' && isValid=='y') {
                                  self.authoritySetting.oneSearchFlag = true;
                               }
                           }
                         break;
                      }
                  }
              }
          }
        }
        //this.$store.state.user.userName;
        return '';
      }
    },
  methods: {
  	 bizState: function(flag){
      var self = this;
      if(flag == ''){
        self.$set('stateAll',"all active");
        self.$set('stateNo',"option");
        self.$set('stateYes',"option");
        self.$set('stateNY',"option");
        self.$set('search1.search_EQ_bizstate',flag);
      }else if(flag == self.ctns.bizstatey){
        self.$set('stateAll',"option");
        self.$set('stateNo',"option");
        self.$set('stateYes',"all active");
        self.$set('stateNY',"option");
        self.$set('search1.search_EQ_bizstate',flag);
      }else if(flag == self.ctns.bizstates){
        self.$set('stateAll',"option");
        self.$set('stateNo',"all active");
        self.$set('stateYes',"option");
        self.$set('stateNY',"option");
        self.$set('search1.search_EQ_bizstate',flag);
      }else if(flag == self.ctns.bizstatee){
        self.$set('stateAll',"option");
        self.$set('stateNY',"all active");
        self.$set('stateYes',"option");
        self.$set('stateNo',"option");
        self.$set('search1.search_EQ_bizstate',flag);
      }
    },
    //外层显示控制
    activeIClick: function(indexI){
      this.$set('activeI['+indexI+']',!this.activeI[indexI]);
    },
    //通过内外层索引定位文件真实索引
    locationCalculation: function(indexI,indexJ){
      var count = 0;
      for(var i=0;i<indexI;i++){
        count += this.iCount[i];
      }
      return count + indexJ;
    },
    _getGoods: function(index,supplierguid){
      var self = this;
      for (var i=0; i<this.activeTemp.length; i++) {
            this.$set('activeTemp['+i+']',false);
      }
      this.$set('activeTemp['+index+']',true);
      self.mfhdeptSearch.search_EQ_supplierguid = supplierguid;
      self.mfhdeptSearch.search_EQ_distrbguid = self.distrbguid;
        Ajax.get('/supplier/distributorGoodsList', this.mfhdeptSearch)
        .then(function (response){
            var data = response.data;
          if(data.errorCode == 0){
            self.$set('mfEntSpecList',data.data.list);
            self.$set('mfEntSpecListImg',data.senData);
            self.mfhdeptSearch.totalPages = data.data.totalPages;
            self.mfhdeptSearch.total = data.data.total;
          }else{
            self.MessageBox({
              title:'提示',message:data.message,type:'alert'
            },function(action){})
          }
          self.getMyLicsRate();
        })
        //内层显示控制，-1代表分页
      if(index != -1){
        for (var i=0; i<self.activeJ.length; i++) {
          self.$set('activeJ['+i+']',false);
        }
        self.$set('activeJ['+index+']',true);
      }
  },
    
    _getSupplyRelation: function(){
      var self = this;
      this.search1.search_EQ_distrbguid = self.$store.state.user.curUser.distrbguid;
        Ajax.get('/supplier/supplierByDistributor',self.search1)
          .then(function (response){
          var data = response.data;
          if(data.errorCode == 0){
            //内层循环计数器
            var count = 0;
            self.supplyRelationList = [];
            for(var i=0;i<data.data.length;i++){
              var supplyRelationListTemp = {};
              supplyRelationListTemp.medGuid = data.data[i].medguid;
              supplyRelationListTemp.medGuidName = data.data[i].medguidName;
              if(data.data[i].SupplierGUID != null)
                supplyRelationListTemp.supplierGuidList = data.data[i].SupplierGUID.split(",");
              if(data.data[i].SupplierName != null)
                supplyRelationListTemp.supplierNameList = data.data[i].SupplierName.split(",");
              if(data.data[i].SupplierBizState != null)
                supplyRelationListTemp.supplierBizStateList = data.data[i].SupplierBizState.split(",");
              if(data.data[i].SupplierContacts != null)
                supplyRelationListTemp.supplierContacts = data.data[i].SupplierContacts.split(",");
              if(data.data[i].SupplierContactTel != null)
                supplyRelationListTemp.supplierContactTel = data.data[i].SupplierContactTel.split(",");
              //累加内层数量
              count += supplyRelationListTemp.supplierGuidList.length;
              //记录内层数量
              self.iCount.push(supplyRelationListTemp.supplierGuidList.length);
              //外层效果初始化
              self.activeI.push(false);
              self.supplyRelationList.push(supplyRelationListTemp);
            }
            self.getHospitalSupplierGoodsList(0,self.supplyRelationList[0].supplierGuidList[0]);
            for(var i=0;i<count;i++){
              //内层效果初始化
              self.activeJ.push(false);
            }
          }else{
            self.MessageBox({
              title:'提示',message:data.message,type:'alert'
            },function(action){})
          }
        })
    },
      getSupplyRelation: function(){
          var self = this;
          this.search1.search_EQ_distrbguid = self.$store.state.user.curUser.distrbguid;
          Ajax.post('/supplier/supplierByDistributor',self.search1)
              .then(function (response){
                  var data = response.data;
                  if(data.errorCode == 0){
                      self.$set("supplyRelationList",data.data);
                      self.getHospitalSupplierGoodsList(self.supplyRelationList[0]);
                  }else{
                      self.MessageBox({
                          title:'提示',message:data.message,type:'alert'
                      },function(action){})
                  }
              })
      },


      getHospitalSupplierGoodsList: function (supplier) {
          var self = this,supplierguid = ""
  	      if(supplier && supplier.SDSupplierGUID){
              supplierguid = supplier.SDSupplierGUID;
          }
          if(supplier && supplier.MedGuid){
              self.medguid = supplier.MedGuid;
          }
          self.mfhdeptSearch.search_EQ_supplierguid = supplierguid;
          self.mfhdeptSearch.search_EQ_medguid = self.medguid;
          Ajax.post('/supplier/distributorGoodsListSupGoods', this.mfhdeptSearch)
              .then(function (response) {
                  var data = response.data;
                  if (data.errorCode == 0) {
                      self.$set('mFMedGoodsList', data.data.list);
                      self.$set('mFMedGoodsListImg', data.senData);
                      self.mfhdeptSearch.totalPages = data.data.totalPages;
                      self.mfhdeptSearch.total = data.data.total;
                  } else {
                      layer.msg(data.message);

                  }
              })
              /*if (index != -1) {
                  for (var i = 0; i < self.activeJ.length; i++) {
                      self.$set('activeJ[' + i + ']', false);
                  }
                  self.$set('activeJ[' + index + ']', true);
              }*/
      },


  },
 

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