<!--证照列表：医疗器械证-->
<script>
  import model_tab from './cert-tab-include.vue';
  import model_rate from './cert-rate-include.vue';
  module.exports = {
    data: function () {
        return {
          requestS:false,
          tab_index:1,// 标签页  
          licsType:'03',// 证照类型  
          title:'医疗器械注册证', 
          dayFlagList:[{
              value:'-1',
              name:'已过期'
            },{
              value:'60',
              name:'近效60天'
            }], 
          dataList:[],// 数据
          // 查询条件
          search:{
            pageSize: 50,
            pageNo: 1,
            totalPages: 0,
            total:0,

            // 查询条件
            param:{
              keyvalue:'', 
              diffDay:'-9999',
            }
            // licsType:this.licsType
          },
        }
    },
    methods:{
      // 加载数据
      getData: function () {
          var self = this;
          self.requestS = true;
          Ajax.post('/supplierProductLic/YLRegistLic',this.search)
            .then(function (response) {
                self.requestS = false;
              var data = response.data;
              if(data.errorCode==0){
                self.$set('dataList', data.data.list);
                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();
      },
      // 医疗器械注册证 - 查询注册证关联的商品
      listAccordion:function(index){
        var self = this;

        var dpoObj = self.dataList[index];
        if(dpoObj.search==null){
          // 设置每组的查询条件
          dpoObj.search = {
            pageSize:3,
            pageNo: 1,
            totalPages: 0,
            param:{
              ywguid:dpoObj.productguid,
            }
          };
        }

        Ajax.post('/certacc/listRegistryGoods',dpoObj.search)
          .then(function (response) {
            var data = response.data.data;
            if(response.data.errorCode==0){
              self.$set('dataList['+index+'].mxList', data.list);
              
              dpoObj.search.pageNo = data.pageNo;
              dpoObj.search.totalPages = data.totalPages;
              dpoObj.search.total = data.total;
              self.$set('dataList['+index+'].search',dpoObj.search);
            }else{
            }
        });
      },
      slideup:function(index,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,num){
        var clss=$("#ct-r"+index).attr("class");
        if(clss.indexOf("active")!=-1){
          this.slideup(index,num);
          return;
        }
        this.listAccordion(index);
        $("#ct-r"+index).addClass("active");
        $("#isFocus"+num+index).addClass("focus");
        $("#row-l"+num+index).slideDown(400,function(){
        
        });
      },
      // 没有图片的提示
      noPic:function(){
        var self = this;
          layer.msg('暂无注册证图片!');

      },
      showBigImgs:function(obj){
        var jsonStr='[', imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
          if(obj!=null && obj.length>0){
            obj=JSON.parse(obj);
            for(var i=0;i<obj.length;i++){
               var path=imgReg.test(obj[i].original.path) ? obj[i].original.path : obj[i].original.path+obj[i].original.name;
               jsonStr+='"'+path+'",';
            }
            jsonStr=jsonStr.substring(0,jsonStr.length-1);
         }
         jsonStr+=']';
         this.$set('imgArry',JSON.parse(jsonStr));
         $("#bigImgs").click();
      },
    },
    watch:{
      'search.param.diffDay':function(){
        this.getData();
      }
    },
    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="submit" v-link="{path:'/certComplete3/0'}"  
            class="w100 mr-20" value="添加注册证" v-if="'/supplier/registerLic:add' | myqx">
          <input type="text" placeholder="请输入搜索条件" v-model="search.param.keyvalue">
          <input type="button" v-on:click="getSearchData" value="搜索"></form>
      </div> -->


      <div class="clearfix pt20"> 
          <input type="submit" class="btn button-green fl" value="添加注册证"
          style="float:left;margin-right:20px;" v-link="{path:'/certComplete3/0'}"
           v-if="'/supplier/registerLic:add' | myqx" > 
           <!-- <div class="form-group fl" style="width: 310px;">
              <div class="control select-style">
                <select v-model="search.param.diffDay">
                <option value="-9999"  selected>全部</option>
                  <option :value="ite.value" v-for="ite in dayFlagList">{{ite.name}}</option>
                </select>
              </div>
            </div>  -->
          <form class="search-bar fl" active="###"  style="width: 320px;"> 
            <!--<input type="text" placeholder="输入关键词" class="ipt" -->
          <input type="text" placeholder="请输入搜索条件" v-model="search.param.keyvalue" maxlength="50" v-rule>
            <div class="search-btn">
              <input type="button"  v-on:click="getSearchData" value="搜索">
            </div>
          </form> 
          <div class="form-group fl"  style="width: 330px; margin-left: 20px;"> 
                    <label class="label w70 lh-34 fl" style="font-weight:bold;">效期状态</label>
                    <div class="control control-filtering control-filtering-green fl w250">
                        <a class="option" href="javascript:;" :class="{'all active':search.param.diffDay=='-9999'}" v-on:click="search.param.diffDay='-9999'">全部</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.param.diffDay=='-1'}" v-on:click="search.param.diffDay='-1'">已过期</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.param.diffDay=='60'}" v-on:click="search.param.diffDay='60'">近效60天</a>
                    </div>
                </div>
      </div> 
      <div class="tab-section"> 
      <!-- <div class="lh-34 h-34 t-right text-color-green"><span style="color: #FB6161;">红色: 已过期</span>   <span style="color: #EA9036;">橙黄: 近效期</span></div> -->
        <div class="ctable ct-parent">
          <div class="ct-head" id='t_header'>
            <span class="ct-col w90">序号</span>
            <span class="ct-col w180">注册证号</span> 
            <span class="ct-col w220">生产厂商</span>
            <span class="ct-col w90">生产来源</span>
            <span class="ct-col w70">规格数</span>
            <span class="ct-col w100">有效期</span>
            <span class="ct-col w90">近效期(天)</span>
            <span class="ct-col w70">业务状态</span>
            <span class="ct-col w70">操作</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="detailpo in dataList" id="ct-r{{$index}}">
            <div class="row-line">
              <span class="ct-col w90 cert-select cert-mini">
                {{$index+1}}

                  <div class="cert-mini" v-if="detailpo.pictcontent!=null && detailpo.pictcontent!=''" :style="'backgroundImage: url('+detailpo.pictcontent +')'">
                    <span class="cert-max" @click="showBigImgs(detailpo.pictcontent)"></span>
                  </div>
                  
                  <div class="cert-mini" v-if="detailpo.pictcontent==null || detailpo.pictcontent==''" style="background-image: url(/images/default.jpg)">
                  </div>
               
              </span>
              <span class="ct-col w180 break-it ">
                <div class="p-name break">{{detailpo.registkeyname}}</div>
                <div class="p-cert-num break">{{detailpo.registkey}}</div>
              </span>  
              <span class="ct-col w220 break-it t-left pr10">
                <span class="com-name break">{{detailpo.producer}}</span>
              </span>
              <span class="ct-col w90">{{detailpo.importedflag | IMPORTEDFLAG}}</span>
              <!--如果数量不为0，显示手风琴-->
              <span class="ct-col w70 activate" id="isFocus1{{$index}}" v-if="detailpo.guigeNum>0">
                <div>
                  <a href="javascript:void(0);" 
                    @click="slidedown($index,1)" >{{detailpo.guigeNum}}</a>
                </div>
              </span>
              <!--如果数量为0，则不显示手风琴-->
              <span class="ct-col w70" v-if="detailpo.guigeNum<=0">
                <div>
                  {{detailpo.guigeNum}}
                </div>
              </span>
              <span class="ct-col w100 break-it">
                <span class="valid-date break">    <!-- style="color: #FB6161;" v-if="detailpo.diffDay >= 0" -->
                  {{detailpo.begindate | getYMD}} <br> 至{{detailpo.enddate | getYMD}}
                </span>
                <!-- <span class="valid-date break" style="color: #EA9036;" v-else>
                  {{detailpo.begindate | getYMD}} <br> 至{{detailpo.enddate | getYMD}}
                </span> -->
              </span>
              <span class="ct-col w90">
                  <!-- <p style="color: #FB6161; width: 55px;height: 0;border: 1px solid #FB6161; margin-left: 18px; padding: 0 5px;border-radius: 12px;" v-if="detailpo.diffDay < 0">已过期</p>
                  <p style="color: #EA9036; width: 55px;height: 0;border: 1px solid #EA9036; margin-left: 18px; padding: 0 5px;border-radius: 12px;" v-if="detailpo.diffDay < 60 && detailpo.diffDay > 0">近效期</p><br> -->
              {{detailpo.diffDay}}
              </span>
              <span class="ct-col w70">{{detailpo.state | bizstate}}</span>
              <span class="ct-col w70">
                <a class="btn button-green " 
                  v-link="{path:'/certComplete/'+detailpo.guid}">明细</a>
              </span>
            </div>
            <div class="row-launch" style="display:none;" id="row-l1{{$index}}">
              <h3>规格数（{{detailpo.search==null?0:detailpo.search.total}}）</h3>
              <table class="itable">
                <thead>
                  <tr>
                    <th class="w40">序号</th>
                    <th class="w70">商品编号</th>
                    <th class="w150">商品名称</th>
                    <th class="w70">规格</th>
                    <th class="w150">生产厂商</th>
                    <th class="w60">包装含量</th>
                    <th class="w60">大包装</th>
                    <th class="w80">小包装单位</th>
                    <th class="w60">状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="!detailpo.mxList" >
                    <td colspan="9">暂无符合条件的记录</td>
                  </tr>
                  <tr v-else v-for="mx in detailpo.mxList"  >
                    <td>{{$index+1}}</td>
                    <td>{{mx.goodscode}}</td>
                    <td>{{mx.goodsname}}</td>
                    <td>{{mx.goodsspec}}</td>
                    <td>{{mx.producer}}</td>
                    <!--大包装含量-->
                    <td>{{mx.minunitqty}}</td>
                    <td>{{mx.bigunitqty}}</td>
                    <td>{{mx.minunitstyle}}</td>
                    <td>
                      <span>{{mx.bizstate | bizstate}}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="pagination page-line" v-if="detailpo.mxList" >
                <pagination
                   @page-change="listAccordion($index)"
                   :page-no.sync="detailpo.search.pageNo"
                   :total-pages.sync="detailpo.search.totalPages">          
                </pagination>
              </div>
              <div class="zip" @click="slideup($index,1)"></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>

    <!--展示图片 start-->
    <div class="modal" v-if="showed">
      <div class="container resource">
        <div class="pic-viewer no-list">
          <span class="close" @click="closeShowPic">X</span>
          <div class="pv-body">
            <div class="pv-list">
              <div class="prev"></div>
              <div class="next"></div>
              <div class="pv-box">
                <img src="/assets/c14.png"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--展示图片 end-->

      <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>