<!--证照列表：产品说明书-->
<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:7,// 标签页   
          licsType:'05',// 证照类型
          title:'产品说明书',

          // 产品说明书上传
          fileType:'file',
          tagType:'span',
          fileLabel:'上传',

          //产品说明资料表
          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/Prodes',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();
      },
      // 上传产品说明书
      uploadProdes:function(backObj){
        var self = this;
        Ajax.get('/supplierProductLic/Prodes/upload',backObj)
          .then(function (response) {
            var data = response.data;
            if(data.errorCode==0){
                self.MessageBox({
                  title:'提示',
                  message:data.data,
                  type:'alert'
                },function(action){
                  self.getData();
                }); 
            }else{
                layer.msg('上传数据异常!');

            }
        });
      },
      // 下载
      download:function(srcJson){
        var self = this;
        if (srcJson == undefined || srcJson==null || srcJson=='') {
            layer.msg('暂无产品说明书!');

          return ;
        }
        var jsonArray = JSON.parse(srcJson);

        if(jsonArray==null || jsonArray.length==0){
            layer.msg('暂无产品说明书!');

          return ;
        }
        var imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径
        var downloadUrl = imgReg.test(jsonArray[0].original.path) ? jsonArray[0].original.path : jsonArray[0].original.path + jsonArray[0].original.name;
        window.open (downloadUrl);        
      },
    },
    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" > -->
          <input type="text" placeholder="请输入搜索条件" v-model="search.param.keyvalue">
            <div class="search-btn">
              <input type="button"  v-on:click="getSearchData" value="搜索">
            </div>
          </form>
      </div>


      <div class="tab-section">
        <div class="ctable ct-parent">
          <div class="ct-head">
            <span class="ct-col w100">序号</span>
            <span class="ct-col w270">产品</span>
            <span class="ct-col w180">产品说明书</span>
          </div>
          <div class="ct-row" v-if="dataList==null || dataList.length==0">
            <div class="row-line">
              <span class="ct-col  break-it" style="text-align: center;width:100%;">
                暂无符合条件的记录
              </span>
            </div>
          </div>
          <div class="ct-row" v-for="pd in dataList" v-if="dataList">
            <div class="row-line">
              <span class="ct-col w100">{{$index+1 }}</span>
              <span class="ct-col w270 break-it ">
                <span class="break p-cert-num">{{pd.productname}}</span>
                <span class="break p-cert-num">{{pd.registkey==null?'':pd.registkey}}</span>
              </span>
              <span class="ct-col w180" :class="pd.description==null?'empting':''">{{pd.description==null?"无":"有"}}</span>
              <span class="ct-col w80"></span>
              <span class="ct-col w190">
                <div class="pr-upload" :class="pd.description!=null?'has-file':''">
                  <span class="file" v-if="pd.description!=null">
                    <span class="file-type">PDF</span>
                    <span class="file-size">{{pd.description | fileSize}}M</span>
                  </span>
                  <upload :class="['upload-btn fl']" 
                    :tag="tagType" 
                    :type="fileType" 
                    :label="fileLabel"
                    :ywtag="pd.guid"
                    v-on:file-change="uploadProdes"
                  ></upload>
                  <a href="javascript:void(0);" class="fl ml-20" style="color: #86b8bc;" v-on:click="download(pd.description)">
                  <p class="download-btn w30"></p> <br>
                  <p class="w30">下载</p> 
                  </a>
              </div>
            </span>
          </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>