<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="75%"
      :close-on-click-modal="true"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <div slot="title" class="headerText">详情</div>
      <div>
        <headerTitle header="基本信息"></headerTitle>
        <descriptions :descriptionsList="list1"></descriptions>
        <headerTitle header="被抽样单位信息"></headerTitle>
        <descriptions :descriptionsList="list2"></descriptions>
        <headerTitle header="样品基本信息"></headerTitle>
        <descriptions :descriptionsList="list3"></descriptions>
        <headerTitle
          header="标示注册人/备案人/受托生产企业等信息"
        ></headerTitle>
        <descriptions :descriptionsList="list4"></descriptions>
        <headerTitle header="抽样单位信息"></headerTitle>
        <descriptions :descriptionsList="list5"></descriptions>
        <headerTitle header="检验信息"></headerTitle>
        <div class="lastBox">
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item :span="2">
              <template slot="label"> 检验机构名称</template>
              xxxxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 是否合格 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 不合格项目类型 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 不合格项目详情 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">检验结果 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">结果单位 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">判定依据 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">检验依据 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">限值规定 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">检验报告 </template>
              <div class="fileBox">
                <span>
                  <i class="el-icon-s-marketing"></i>
                </span>
                <div>A项目检验报告.doc</div>
                <div class="file-icon">
                  <i class="el-icon-download"></i>
                  下载
                </div>
              </div>
              <div class="fileBox">
                <span>
                  <i class="el-icon-s-marketing"></i>
                </span>
                <div>A项目检验报告.doc</div>
                <div class="file-icon">
                  <i class="el-icon-download"></i>
                  下载
                </div>
              </div>
              <div class="fileBox">
                <span>
                  <i class="el-icon-s-marketing"></i>
                </span>
                <div>A项目检验报告.doc</div>
                <div class="file-icon">
                  <i class="el-icon-download"></i>
                  下载
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">备注 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import headerTitle from "./components/headerTitle";
import descriptions from "./components/descriptions";
export default {
  data() {
    return {
      dialogVisible: false,
      //基本信息
      list1: [
        {
          span: 1,
          label: "计划名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样单号编号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样时间",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "任务来源",
          value: "",
          data: "",
        },
        {
          span: 2,
          label: "抽样地点性质",
          value: "",
          data: "",
        },
      ],
      //被抽样单位信息
      list2: [
        {
          span: 1,
          label: "被抽样单位名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "统一社会信用代码 ",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "地区（市、州、盟）",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "县 (市、区)",
          value: "",
          data: "",
        },
        {
          span: 2,
          label: "详细地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "联系人",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "电话",
          value: "",
          data: "",
        },
      ],
      //样品基本信息
      list3: [
        {
          span: 1,
          label: "样品通用名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "样品类别",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "样品批号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "有效期限",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样数量",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "包装规格",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "保质期 ",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "注册证编号/备案编号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "进口分包装企业",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "进口分包装批号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "现场结算",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "单价",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "总价",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "实际总价",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "保存条件",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "是否进口",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "原产地",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产/进货数量",
          value: "",
          data: "",
        },
      ],
      //标示注册人/备案人/受托生产企业等信息
      list4: [
        {
          span: 1,
          label: "注册人/备案人所属省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "注册人/备案人名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "注册/备案人地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "境内责任人所属省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "境内责任人名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "境内责任人地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "受托生产企业所属省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "受托生产企业名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "受托生产企业地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "委托单位所属省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "委托单位名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "委托单位地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产企业/代理商所属省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产企业/代理商名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产企业/代理商地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "是否进口",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "样品进口地区",
          value: "",
          data: "",
        },
      ],
      //抽样单位信息
      list5: [
        {
          span: 2,
          label: "抽样单位名称",
          value: "",
          data: "",
        },
        {
          span: 2,
          label: "地区（市、州、盟）",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样人",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "电话",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样人",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "电话",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "备注",
          value: "",
          data: "",
        },
      ],
    };
  },
  components: {
    descriptions,
    headerTitle,
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #f8f9fa;
}
.headerText {
  color: #333333;
}
.header--title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title--left {
    display: flex;
    align-items: center;
    .line {
      width: 4px;
      height: 16px;
      background: #1e80eb;
      margin-right: 8px;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #1e80eb;
    }
  }
}
.margin-top {
  margin: 15px 0;
}
::v-deep .el-descriptions-row > th {
  width: 18%;
  background: #f5f7fa;
  color: #292f38;
  font-weight: 500;
}
::v-deep .el-descriptions-row > td {
  width: 32%;
}
::v-deep .lastBox .el-descriptions-row > td {
  width: 82%;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-bottom: 1vh !important;
}
.fileBox {
  margin: 8px 0;
  display: flex;
  color: #333;
  cursor: pointer;
  & > span {
    font-size: 14px;
  }
  .file-icon {
    color: #02d1a6;
    margin-left: 40px;
  }
}
</style>