<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">
          <button>初检</button>
          <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>
              <el-table
                v-loading="loading"
                :data="tableList"
                border
                :stripe="false"
              >
                <el-table-column type="index" label="序号" width="55" />
                <el-table-column label="大类" prop="name" />
                <el-table-column label="检验项目" prop="type">
                </el-table-column>

                <el-table-column label="备注" prop="num" />
                <el-table-column label="检验结果" prop="enterpriseName" />
                <el-table-column label="检验结论" prop="enterpriseName">
                </el-table-column>
              </el-table>
            </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>
            </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>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import headerTitle from "./components/headerTitle";
import descriptions from "./components/descriptions";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableList: [
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "药品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
      ],
      //基本信息
      list1: [
        {
          span: 1,
          label: "计划名称",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "抽样单号编号",
          value: "",
          data: "idsd",
        },
        {
          span: 1,
          label: "抽样环节",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样时间",
          value: "",
          data: "",
        },
      ],
      //被抽样单位信息
      list2: [
        {
          span: 1,
          label: "被抽样单位名称",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "统一社会信用代码",
          value: "",
          data: "idsd",
        },
        {
          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: "",
        },
        {
          span: 1,
          label: "抽样地点性质",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "电话 ",
          value: "",
          data: "",
        },
      ],
      //样品基本信息
      list3: [
        {
          span: 1,
          label: "样品通用名称",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "生产日期",
          value: "",
          data: "idsd",
        },
        {
          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: 2,
          label: "是否国家药品集中招标采购中标品种",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "进口分包装企业",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "进口分包装批号",
          value: "",
          data: "",
        },
      ],
      //受托生产企业信息
      list4: [
        {
          span: 2,
          label: "选择涉及主体",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "委托单位企业名称1",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "委托单位企业地址1",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "委托单位企业名称1",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "委托单位企业地址1",
          value: "",
          data: "asd",
        },
      ],
      //抽样单位信息
      list5: [
        {
          span: 2,
          label: "抽样单位名称",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "地区（市、州、盟）",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "县（市、区）",
          value: "",
          data: "asd",
        },
        {
          span: 2,
          label: "详细地址",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "电话",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "联系人",
          value: "",
          data: "asd",
        },
        {
          span: 1,
          label: "备注（需要其他说明的情况）",
          value: "",
          data: "asd",
        },
      ],
    };
  },
  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;
    }
  }
}

::v-deep .el-descriptions-row > th {
  width: 20%;
  background: #f5f7fa;
  color: #292f38;
  font-weight: 500;
}
::v-deep .el-descriptions-row > td {
  width: 30%;
}
.lastBox {
  width: 100%;
  margin-top:15px;
  border: 1px dashed #dee2ee;
  button {
    background: #1e80eb;
    font-size:14px;
    padding:4px 14px;
    color: #fff;
    border: none;
    border-radius: 0px 0px 15px 0px;
  }
}
.margin-top{
  margin: 20px;
}
::v-deep .lastBox .el-descriptions-row > td {
  width: 80%;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-bottom: 1vh !important;
}
.fileBox {
  margin-top: 8px;
  display: flex;
  color: #333;
  cursor: pointer;
  & > span {
    font-size: 14px;
  }
  .file-icon {
    color: #02d1a6;
    margin-left: 40px;
  }
}
</style>