<!--证照列表：生产厂商-->
<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:2,// 标签页   
          licsType:'10',// 证照类型  
          title:'生产厂商',  
          imgArry:[],
          //生产厂商
          dataList:[],
          // 查询条件
          search:{
            pageSize: 50,
            pageNo: 1,
            totalPages: 0,
            total:0,

            // 查询条件
            param:{
              keyvalue:'',
            }
            // licsType:this.licsType
          },
        }
    },
    methods:{
      // 获得初始数据
      getData: function(){
          var self = this;
          self.requestS = true;
          Ajax.post('/supplierProductLic/Producer',self.search)
            .then(function (response) {
              var data = response.data;
              self.requestS = false;
              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:10,
            pageNo: 1,
            totalPages: 0,
            param:{
              ywguid:dpoObj.guid,
            }
          };
        }

        Ajax.post('/certacc/listProducerGoods',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(){
        
        });
      },
      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();
      },
    },
    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>

      <!--搜索区域-->
      <!-- <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>


      <imagebox v-bind:imgarr="imgArry">
          <span class="pic-max blue-search" id="bigImgs"></span>
      </imagebox>
      <div class="tab-section">
        <div class="ctable ct-parent">
          <div class="ct-head" id='t_header'>
            <span class="ct-col w50">序号</span>
            <span class="ct-col w250">生产厂商</span>
            <span class="ct-col w100">供应种类</span>
            <span class="ct-col w70">商品数</span>
            <span class="ct-col w70">营业执照</span>
            <span class="ct-col w100">生产许可证</span>
            <span class="ct-col w100">税务登记证</span>
            <span class="ct-col w120">组织机构代码证</span>
            <span class="ct-col w80">操作</span>
          </div>
          <div class="ct-row " v-for="detailpo in dataList" id="ct-r{{$index}}">
            <div class="row-line">
              <span class="ct-col w50">{{$index+1}}</span>
              <span class="ct-col w250 break-it activate t-left pr10">
                {{detailpo.producer}}
              </span>
              <span class="ct-col w100">{{detailpo.detailpotype | supplierType}}</span>
              <span class="ct-col w70 activate" id="isFocus1{{$index}}" v-if="detailpo.goodsCount>0">
                <div>
                  <a href="javascript:void(0);"  class="txt_underline text-color-green"
                    @click="slidedown($index,1)" >{{detailpo.goodsCount}}</a>
                </div>
              </span>
              <span class="ct-col w70" v-if="detailpo.goodsCount<=0">
                <div>
                  {{detailpo.goodsCount}}
                </div>
              </span>
              <span class="ct-col w70" :class="detailpo.picCount1>
                0?'':'empting'">
                {{detailpo.picCount1>0?"有":"缺"}}
              </span>
              <span class="ct-col w100 " :class="detailpo.picCount4>
                0?'':'empting'">
                {{detailpo.picCount4>0?"有":"缺"}}
              </span>
              <span class="ct-col w100" :class="detailpo.picCount3>
                0?'':'empting'">
                {{detailpo.picCount3>0?"有":"缺"}}
              </span>
              <span class="ct-col w120" :class="detailpo.picCount2>
                0?'':'empting'">
                {{detailpo.picCount2>0?"有":"缺"}}
              </span>
              <span class="ct-col w80 pt9">
                <a class="btn button-green " v-link="{path:'/certContractor/'+detailpo.guid}" href="javascript:void(0);">明细</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="w80">商品编号</th>
                    <th class="w100">商品名称</th>
                    <th class="w100">规格</th>
                    <th class="w100">小包装含量</th>
                    <th class="w100">包装单位</th>
                    <th class="w100">进口／国产</th>
                    <th class="w100">注册证号</th>
                    <th class="w80">照片</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 class="t-left">
                        <p class="ellipsis-sty w150">
                            <a :title="mx.goodsname" style="cursor: default;">{{mx.goodsname}}</a>
                       </p>
                    </td>
                    <td class="t-left">
                    <p class="ellipsis-sty w150">
                            <a :title="mx.goodsspec" style="cursor: default;">{{mx.goodsspec}}</a>
                       </p>
                    </td>
                    <td>{{mx.minunitqty}}</td>
                    <td>{{mx.minunitstyle}}</td>
                    <td>{{mx.importedflag | IMPORTEDFLAG}}</td>
                    <td>{{mx.registkey}}</td>
                    <td>
                      <div class="pro-box big-imgs" v-if="mx.pictcontent!=null && mx.pictcontent!=''" @click="showBigImgs(mx.pictcontent)" style="background-image: url({{mx.pictcontent | thumbnail}})"></div>
                      <div class="pro-box pro-pic" v-if="mx.pictcontent==null || mx.pictcontent==''" style="background-image: url(/images/default.jpg)">
                        <!--<span class="pic-max blue-search"></span>-->

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