<template>
  <block-header title="基本信息">
    <el-descriptions :column="2" :colon="false" border labelClassName='labelClassName' contentClassName="contentClassName">
      <el-descriptions-item label="产品名称">{{ cpmc }}</el-descriptions-item>
      <el-descriptions-item label="注册厂家"></el-descriptions-item>
      <el-descriptions-item label="统一社会信用代码">{{ shxydm }}</el-descriptions-item>
      <el-descriptions-item label="生产地址">{{ scdz }}</el-descriptions-item>
      <el-descriptions-item label="注册人住所/备案人注册地址">{{ sczdz }}</el-descriptions-item>
      <el-descriptions-item label="注册人/备案人所在地区">{{ zcrszx }}</el-descriptions-item>
      <el-descriptions-item label="注册人/备案人所在市">{{ zcrszshi }}</el-descriptions-item>
      <el-descriptions-item label="产品类型">{{ cplx }}</el-descriptions-item>
      <el-descriptions-item label="行政区划代码">{{ xzqydm }}</el-descriptions-item>
      <el-descriptions-item label="结构特征">{{ ylqxjgtz }}</el-descriptions-item>
      <el-descriptions-item label="注册证编号/备案号">{{ zczh }}</el-descriptions-item>
      <el-descriptions-item label="创新产品">{{ sfCxcp }}</el-descriptions-item>
      <el-descriptions-item label="分类编码">{{ ylqxflbm }}</el-descriptions-item>
      <el-descriptions-item label="产品管理类别">{{ cplb }}</el-descriptions-item>
      <el-descriptions-item label="结构及组成或主要组成部分" span="2">{{ jgjzccf }}</el-descriptions-item>
      <el-descriptions-item label="结构及组成或主要组成部分附件" span="2">
        <div class="fileBox">
          <span>
            <i class="el-icon-s-marketing"></i>
          </span>
          <div>{{ jgjzccffj }}</div>
          <div class="file-icon">
            <!-- jgjzccflj  下载地址字段 -->
            <i class="el-icon-download"></i>
            下载
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="适用范围或预期用途" span="2">{{ cpsyfw }}</el-descriptions-item>
      <el-descriptions-item label="适用范围或预期用途附件" span="2">
        <div class="fileBox">
          <span>
            <i class="el-icon-s-marketing"></i>
          </span>
          <div>{{ cpsyfwfj }}</div>
          <div class="file-icon">
            <!-- cpsyfwlj -->
            <i class="el-icon-download"></i>
            下载
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="规格型号/包装规格" span="2">{{ xhgg }}</el-descriptions-item>
      <el-descriptions-item label="规格型号/包装规格附件" span="2">
        <div class="fileBox">
          <span>
            <i class="el-icon-s-marketing"></i>
          </span>
          <div>{{ xhggfj }}</div>
          <div class="file-icon" @click="downloadFile(xhgglj)">
            <!-- xhgglj -->
            <i class="el-icon-download"></i>
            下载
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="产品存储条件/产品有效期" span="2">{{ cpyxq }}</el-descriptions-item>
      <el-descriptions-item label="批准日期">{{ pzrq }}</el-descriptions-item>
      <el-descriptions-item label="生效日期">{{ sxrq }}</el-descriptions-item>
      <el-descriptions-item label="批准有效期">{{ pzyxq }}</el-descriptions-item>
      <el-descriptions-item label="批准有效期至疫情结束">{{ pzyxqzyqjs }}</el-descriptions-item>
      <el-descriptions-item label="产品技术要求" span="2">{{ cpjsyq }}</el-descriptions-item>
      <el-descriptions-item label="产品技术要求附件" span="2">
        <div class="fileBox">
          <span>
            <i class="el-icon-s-marketing"></i>
          </span>
          <div>A项目检验报告.doc</div>
          <div class="file-icon">
            <!-- cpjsyqlj -->
            <i class="el-icon-download"></i>
            下载
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="产品状态"></el-descriptions-item>
      <el-descriptions-item label="首次上报标志">{{ isUpload == 1 ? "是":"否" }}</el-descriptions-item>
      <el-descriptions-item label="审批部门/备案部门">{{ spbm }}</el-descriptions-item>
      <el-descriptions-item label="注册证状态/备案凭证状态">{{ ppztDm }}</el-descriptions-item>
      <el-descriptions-item label="注销/撤销/吊销/取消备案时间" span="2">{{ zxsj }}</el-descriptions-item>
      <el-descriptions-item label="原注册证号">{{ yzczh }}</el-descriptions-item>
      <!-- xkztpfjId附件id字段 -->
      <el-descriptions-item label="许可证图片附件"></el-descriptions-item>
      <el-descriptions-item label="延续注册次数">{{ yxzccs }}</el-descriptions-item>
      <el-descriptions-item label="联系人">{{ lxr }}</el-descriptions-item>
      <el-descriptions-item label="电话号码">{{ lxdh }}</el-descriptions-item>
      <el-descriptions-item label="传真">{{ cz }}</el-descriptions-item>
      <el-descriptions-item label="电子邮箱">{{ dzyx }}</el-descriptions-item>
      <el-descriptions-item label="是否为优先注册产品">{{ sfYxz }}</el-descriptions-item>
      <el-descriptions-item label="是否为应急注册产品">{{ sfYjzccp }}</el-descriptions-item>
      <el-descriptions-item label="是否为组合包装类产品">{{ sfZhlcp }}</el-descriptions-item>
      <el-descriptions-item label="是否为一次性适用产品">{{ sfYcxsycp }}</el-descriptions-item>
      <el-descriptions-item label="是否为附条件审批产品">{{ sfFjtjspcp }}</el-descriptions-item>
      <!-- smslj -->
      <el-descriptions-item label="说明书附件" span="2">{{ sms ? sms:'-' }}</el-descriptions-item>
      <el-descriptions-item label="变更内容" span="2">{{ bgqk }}</el-descriptions-item>
      <el-descriptions-item label="变更日期" span="2">{{ bgrq }}</el-descriptions-item>
      <el-descriptions-item label="变更历史记录" span="2">{{ bglsjl }}</el-descriptions-item>
      <el-descriptions-item label="其他内容" span="2">{{ qtnr }}</el-descriptions-item>
      <el-descriptions-item label="备注" span="2">{{ bz }}</el-descriptions-item>
    </el-descriptions>
  </block-header>
</template>
<script>
import blockHeader from "@/views/firmContent/components/blockHeader/index.vue"
import downloadFilebox from "@/views/firmContent/components/downloadFileBox/index.vue"
export default {
  data() {
    return {
      files:[
        {
          id:1,
          name:'A项目检验报告.pdf',
          size:'44KB',
        }
      ],
      cpmc:'-',
      shxydm:'-',
      scdz:'-',
      sczdz:'-',
      zcrszx:'-',
      zcrszshi:'-',
      cplx:'-',
      xzqydm:'-',
      ylqxjgtz:'-',
      zczh:'-',
      sfCxcp:'-',
      ylqxflbm:'-',
      cplb:'-',
      jgjzccf:'-',
      jgjzccffj:'-',
      cpsyfw:'-',
      cpsyfwfj:'-',
      xhgg:'-',
      xhggfj:'-',
      cpyxq:'-',
      pzrq:'-',
      sxrq:'-',
      pzyxq:'-',
      pzyxqzyqjs:'-',
      cpjsyq:'-',
      isUpload:'-',
      spbm:'-',
      ppztDm:'-',
      zxsj:'-',
      yzczh:'-',
      yxzccs:'-',
      lxr:'-',
      lxdh:'-',
      cz:'-',
      dzyx:'-',
      sfYxz:'-',
      sfYjzccp:'-',
      sfZhlcp:'-',
      sfYcxsycp:'-',
      sfFjtjspcp:'-',
      sms:'-',
      bgqk:'-',
      bgrq:'-',
      bglsjl:'-',
      qtnr:'-',
      bz:'-',
      xhgglj:null,
    }
  },
  props:['myzczh'],
  components:{blockHeader,downloadFilebox},
  methods:{
    async ylqxJnyelcp(){
      let data = await this.$api.productDetails.ylqxJnyelcp(this.myzczh);
      this.cpmc = data.data.cpmc;
      this.shxydm = data.data.shxydm;
      this.scdz = data.data.scdz;
      this.sczdz = data.data.sczdz;
      this.zcrszx = data.data.zcrszx;
      this.zcrszshi = data.data.zcrszshi;
      this.cplx = data.data.cplx;
      this.xzqydm = data.data.xzqydm;
      this.ylqxjgtz = data.data.ylqxjgtz;
      this.zczh = data.data.zczh;
      this.sfCxcp = data.data.sfCxcp;
      this.ylqxflbm = data.data.ylqxflbm;
      this.cplb = data.data.cplb;
      this.jgjzccf = data.data.jgjzccf;
      this.jgjzccffj = data.data.jgjzccffj;
      this.cpsyfw = data.data.cpsyfw;
      this.cpsyfwfj = data.data.cpsyfwfj;
      this.xhgg = data.data.xhgg;
      this.xhggfj = data.data.xhggfj;
      this.cpyxq = data.data.cpyxq;
      this.pzrq = data.data.pzrq;
      this.sxrq = data.data.sxrq;
      this.pzyxq = data.data.pzyxq;
      this.pzyxqzyqjs = data.data.pzyxqzyqjs;
      this.cpjsyq = data.data.cpjsyq;
      this.isUpload = data.data.isUpload;
      this.spbm = data.data.spbm;
      this.ppztDm = data.data.ppztDm;
      this.zxsj = data.data.zxsj;
      this.yzczh = data.data.yzczh;
      this.yxzccs = data.data.yxzccs;
      this.lxr = data.data.lxr;
      this.lxdh = data.data.lxdh;
      this.cz = data.data.cz;
      this.dzyx = data.data.dzyx;
      this.sfYxz = data.data.sfYxz;
      this.sfYjzccp = data.data.sfYjzccp;
      this.sfZhlcp = data.data.sfZhlcp;
      this.sfYcxsycp = data.data.sfYcxsycp;
      this.sfFjtjspcp = data.data.sfFjtjspcp;
      this.sms = data.data.sms;
      this.bgqk = data.data.bgqk;
      this.bgrq = data.data.bgrq;
      this.bglsjl = data.data.bglsjl;
      this.qtnr = data.data.qtnr;
      this.bz = data.data.bz;
      this.xhgglj = data.data.xhgglj;
    },
    downloadFile(url){
      console.log(url)
    }
  },
  mounted(){
    this.ylqxJnyelcp()
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
::v-deep .el-descriptions__body {
  .labelClassName{
    background-color: #F7FAFC;
    width: vw(246);
    font-size: vw(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #6A6C6F;
  }
  .contentClassName{
    font-size: vw(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #292F38;
    .my--file {
      display: flex;
      flex-direction: column;
      width: 95%;
    }
  }
  .fileBox {
    margin-top: 8px;
    display: flex;
    color: #333;
    cursor: pointer;
    & > span {
      font-size: 14px;
    }
    .file-icon {
      color: #02d1a6;
      margin-left: 40px;
    }
  }
}
</style>