<!--证照列表：经销授权书-->
<script>
  import model_tab from './cert-tab-include.vue';
  import model_rate from './cert-rate-include.vue';
  module.exports = {
    data: function () {
        return {
          requestS:false,
          focus:0,
          tab_index:5,// 标签页  
          licsType:'09',// 证照类型 
          title:'经销授权书',   

          //经销授权书
          dataList:[],
          // 查询条件
          search:{
            pageSize: 50,
            pageNo: 1,
            totalPages: 0,
            total:0,

            // 查询条件
            param:{
              keyvalue:'',
              authorizeguid:'',
            }
            // licsType:this.licsType
          },
          imgArry:[],
        }
    },
    methods:{
      getData:function(){
          var self = this;
          self.requestS = true;
          Ajax.post('/supplierProductLic/Authorize',self.search)
            .then(function (response) {
              console.log(response.data.data);
              var data = response.data;
              self.requestS = false;
              if(data.errorCode==0){ 
                // self.$set('dataList', data.data.list);
                self.dataList = data.data.list;
                console.log(self.dataList);
                self.search.pageNo = data.data.pageNo;
                self.search.totalPages = data.data.totalPages;
                self.search.total = data.data.total;
              }else{
                  layer.msg('数据获取异常!');
              }
          });
      },
      // 查询之后的数据:需要初始化页码
      getSearchData:function(){
        var self = this;
        self.search.pageNo = 1;
        self.getData();
      },
      listAuthorize:function(index,guid){
        var self=this;
        Ajax.get('/supplierProductLic/Authorize/' + guid)
          .then(function (response) {
              self.$set('dataList['+index+'].aiz', response.data.data);
          });
      },
      listLics:function(index,guid){
        var self=this;
        self.search.param.authorizeguid=guid;
        Ajax.post('/supplierProductLic/listAuthorizeLicsPO', self.search)
          .then(function (response) {
              self.$set('dataList['+index+'].lics', response.data.data);
              self.$set('dataList['+index+'].licIndex', 0);
          });
      },
      turnImg:function(index,currentIndex,num){
        var self=this;
          if(num==-1){
            if(currentIndex==0){
                layer.msg('已经是第一张图片!');
                return;
            }else{
                self.$set('dataList['+index+'].licIndex', currentIndex-1);
            }
          }else{
            var len=self.dataList[index].lics.length;
            if(currentIndex==(len-1)){
                layer.msg('已经是最后一张图片!');
                return;
            }else{
                self.$set('dataList['+index+'].licIndex', currentIndex+1);
            }
          }
      },
      slideup:function(index,guid,num){
        $("#row-l"+num+index).slideUp(400,function(){
            $("#ct-r"+index).removeClass('active');
            $("#isFocus"+num+index).removeClass("focus");
            $(".ct-col:eq("+index+")").removeClass('activate');
        });
      },
      slidedown:function(index,guid,num){
        var clss=$("#ct-r"+index).attr("class");
        if(clss.indexOf("active")!=-1 && this.focus==num){
          this.slideup(index,guid,num);
          return;
        }
        this.focus=num;
        if(num==1){
          $("#row-l"+2+index).slideUp(400,function(){
              $("#isFocus"+2+index).removeClass("focus");
          });
          this.listAuthorize(index,guid);
        }else{
          $("#row-l"+1+index).slideUp(400,function(){
              $("#isFocus"+1+index).removeClass("focus");
          });
          this.listLics(index,guid);
        }
        $("#ct-r"+index).addClass("active");
        $("#isFocus"+num+index).addClass("focus");
        $("#row-l"+num+index).slideDown(400,function(){
        
        });
      },
      showBigImages:function(obj,num){
         var txt="", imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
         if(num==1){
             if(obj.isunlimited=='Y'){
                txt="授权范围："+this.delNull(obj.authorizerange)+"     有效期限："+this.delNull(obj.begindate)+" 至 "+"无期限";
             }else{
                txt="授权范围："+this.delNull(obj.authorizerange)+"     有效期限："+this.delNull(obj.begindate)+" 至 "+this.delNull(obj.enddate);
             }
             var pics=JSON.parse(obj.pictcontent);
             var path=imgReg.test(pics[0].original.path) ? pics[0].original.path : pics[0].original.path+pics[0].original.name;
             var jsonStr='[{"img":"'+path+'","txt":"'+txt+'"}]';
         }else{
             var jsonStr="[";
             for(var i=0;i<obj.length;i++){
               if(obj[i].isunlimited=='Y'){
                  txt="授权范围："+this.delNull(obj[i].authorizerange)+"     有效期限："+this.delNull(obj[i].begindate)+" 至 "+"无期限";
               }else{
                  txt="授权范围："+this.delNull(obj[i].authorizerange)+"     有效期限："+this.delNull(obj[i].begindate)+" 至 "+this.delNull(obj[i].enddate);
               }
               var pics=JSON.parse(obj[i].pictcontent);
               var path=imgReg.test(pics[0].original.path) ? pics[0].original.path : pics[0].original.path+pics[0].original.name;
               if(i==(obj.length-1)){
                  jsonStr+='{"img":"'+path+'","txt":"'+txt+'"}';
               }else{
                  jsonStr+='{"img":"'+path+'","txt":"'+txt+'"},';
               }
             }
             jsonStr+="]";
         }
         this.$set('imgArry',JSON.parse(jsonStr));
         $("#bigImgs").click();
      },
      delNull:function(val){
         if(val==null){
            return '';
         }
         val=val.replace('00:00:00','');
         return val;
      },
    },
    route: {
      activate: function () {
        this.getData();
      }
    },
    components: {
        model_tab,model_rate
    },
  };
</script>
<template>
  <div>
    <div class="container resource close-left-menu contaNEW">
      <!--完整率-->
      <model_rate :licstype="licsType" :title="title" v-on:click="getData"></model_rate>

      <!--不同证照的标签页切换-->
      <model_tab :tab_index="tab_index" :licsnum="search.total"></model_tab>
      <imagebox v-bind:imgarr="imgArry">
        <span class="pic-max blue-search" id="bigImgs"></span>
      </imagebox>

      <!--搜索区域-->
      <!-- <div class="clearfix pt20">
        <form action="###" class="filter-form fl ">
          <input type="text" placeholder="请输入搜索条件"  v-model="search.param.keyvalue">
          <input type="button" @click="getSearchData" value="搜索"></form>
      </div> -->
      <div class="clearfix pt20">
       
        <form class="search-bar" active="###" >
      
          <input type="text" placeholder="输入关键词" class="ipt"  v-model="search.param.keyvalue">
          <div class="search-btn">
            <input type="button"  @click="getSearchData" value="搜索">
          </div>
        </form>
      </div>

      <div class="tab-section">
        <div class="ctable ct-parent">
          <div class="ct-head" id='t_header'>
            <span class="ct-col w50">序号{{dataList.length}}</span>
            <span class="ct-col w240">授权产品</span>
            <span class="ct-col w240">授权单位</span>
            <span class="ct-col w140">上级授权级数</span>
            <span class="ct-col w90">是否总代</span>
            <span class="ct-col w140">关联授权书证照</span>
            <span class="ct-col w80">操作</span>
          </div>
          <!-- <div class="ct-row" v-if="dataList.length==0">
            <div class="row-line" style="text-align: center;">
               <span class="ct-col w160 break-it">未查询到相关信息！</span>
            </div>
          </div> -->
          <div class="ct-row" v-for="authorize in dataList" id="ct-r{{$index}}">
            <div class="row-line">
              <span class="ct-col w50">{{$index+1}}</span>
              <span class="ct-col w240 break-it ">
                <div class="p-name break">{{authorize.productname}}</div>
                <div class="p-cert-num break">{{authorize.registkey}}</div>
              </span>
              <span class="ct-col w240 break-it">
                <span class="com-name break">{{authorize.authorizecorpname}}</span>
              </span>
              <span class="ct-col w140 activate" id="isFocus1{{$index}}" v-if="authorize.authorizelevel>0">
                <a href="javascript:void(0)" @click="slidedown($index,authorize.productguid,1)">{{authorize.authorizelevel}}</a>
              </span>
              <span class="ct-col w140 activate" id="isFocus1{{$index}}" v-if="authorize.authorizelevel==0">
                0
              </span>
              <span class="ct-col w90">{{authorize.isgeneralagent == 'Y'?'是':'否'}}</span>
              <span class="ct-col w140" v-if="authorize.zjCount==0" class="empting">缺</span>
              <span class="ct-col w140 activate" id="isFocus2{{$index}}" v-if="authorize.zjCount>
                0">
                <!-- <a href="javascript:void(0)" @click="slidedown($index,authorize.guid,2)">{{authorize.zjCount}}份</a> -->
                {{authorize.zjCount}}份
              </span>
              <span class="ct-col w80">
                <a href="javascript:void(0)" 
                    v-link="{path:'/certAuthEdit/'+authorize.productguid}"  class="btn button-green">明细</a>
              </span>
            </div>

             <div class="row-launch" style="display:none;" id="row-l1{{$index}}">
              <h3>上级授权级数（{{authorize.authorizelevel}}）</h3>
              <!-- 授权信息 -->

              <div class="switch-content show">
                <div class="row-launch clearfix show">
                  <!-- 授权信息 -->
                  <div class="auth-info auth-level-4 w60 fl">
                    <div class="auth-item">
                      <div class="ai-title">授权单位</div>
                    </div>
                    <div class="auth-item">
                      <div class="ai-title">授权时间</div>
                    </div>
                    <div class="auth-item">
                      <div class="ai-title">授权截止</div>
                    </div>
                    <div class="auth-item">
                      <div class="ai-title">授权范围</div>
                    </div>
                    <div class="auth-item">
                      <div class="ai-title">证书照片</div>
                    </div>
                  </div>

                  <div class="auth-info auth-level-4 w810">
                    <div style="width:1230px;">
                      <!-- 这里宽度的公式为：    140 + (n-2)*180 + 200 + n*12         -->
                      <div class="auth-item">
                        <div class="ai-msg">
                          <ul class="auth-org-list">
                             <li v-for="ra in authorize.aiz">
                                <span>{{ra.authorizecorpname}}</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="auth-item">
                        <div class="ai-msg">
                          <span class="ai-col">{{authorize.aiz[0].lics[0].begindate | getYMD}}</span>
                        </div>
                      </div>
                      <div class="auth-item">
                        <div class="ai-msg">
                          <span class="ai-col">{{authorize.aiz[0].lics[0].enddate | getYMD}}</span>
                        </div>
                      </div>
                      <div class="auth-item">
                        <div class="ai-msg">
                          <span class="ai-col">{{authorize.aiz[0].lics[0].authorizerange}}</span>
                        </div>
                      </div>
                      <div class="auth-item">
                        <div class="ai-msg">
                          <ul class="cert-list">
                            <li v-for="ra in authorize.aiz">
                                <div class="cert-box big-imgs" @click="showBigImages(ra.lics,2)" style="background-image: url({{ra.lics[0].pictcontent | thumbnail}})"></div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
              <div class="zip" @click="slideup($index,authorize.productguid,1)"></div>
            </div>


            <div class="row-launch" style="display:none;" id="row-l2{{$index}}">
              <h3>关联授权书证照({{authorize.zjCount}}份)</h3>
              <div class="cert-slider">
                <div class="prev" @click="turnImg($index,authorize.licIndex,-1)"></div>
                <div class="next" @click="turnImg($index,authorize.licIndex,1)"></div>
                <div class="cert-box big-imgs" @click="showBigImages(authorize.lics[authorize.licIndex],1)">
                  <img :src="authorize.lics[authorize.licIndex].pictcontent | original">
                </div>
              </div>
              <div class="zip" @click="slideup($index,authorize.guid,2)"></div>
            </div>

          </div>
        </div>
        <div class="pagination m-20-0">
          <pagination 
               @page-change="getData" 

               :page-no.sync="search.pageNo" 
               :total-pages.sync="search.totalPages"></pagination>
        </div>
      </div>
    </div>
      <div class="roll-bg" v-if='requestS'>
          <div class="w60" style="margin:0 auto;">
              <img src="/images/roll.gif">
          </div>
          <div class="container resource t-center text-color-red">
              正在处理中，请勿关闭！
          </div>
      </div>
  </div>

</template>