<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>
        <div class="radioBox">
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item :span="2">
              <template slot="label"> 列入省抽计划原因</template>
              <el-radio-group v-model="radio">
                <el-radio :label="0">本行政区域内注册或者备案的产品</el-radio>
                <el-radio :label="1"
                  >产品风险较高，但未列入国抽，与高抽补充品种</el-radio
                >
                <el-radio :label="2">列入上一年省抽计划但实际未抽到的</el-radio>
                <el-radio :label="1"
                  >列入上一年国抽计划但未实际未抽到的</el-radio
                >
                <el-radio :label="2">既往国家抽查检验不符合规定的</el-radio>
                <el-radio :label="1">既往本省省级抽查检验不符合规定的</el-radio>
                <el-radio :label="2"
                  >日常监管、不良事件检测等发现可能存在质量问题的</el-radio
                >
                <el-radio :label="2"
                  >国家或省级抽查检验中确认非标示生产企业生产的</el-radio
                >
                <el-radio :label="2">在用医疗器械检验</el-radio>
                <el-radio :label="2"
                  >其他监管需要的（另请在备注栏里说明原因）</el-radio
                >
                <el-input
                  v-model="input"
                  size="mini"
                  placeholder="请输入内容"
                ></el-input>
              </el-radio-group>
            </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>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <headerTitle header="检验信息"></headerTitle>
        <descriptions :descriptionsList="list4"></descriptions>
        <headerTitle header="检验项目"></headerTitle>
        <div class="lastBox">
          <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 label="判定原则" prop="enterpriseName" />
            <el-table-column label="备注" prop="enterpriseName" />
            <el-table-column label="检验结果" prop="enterpriseName" />
            <el-table-column label="检验结论" prop="enterpriseName" />
            <el-table-column label="不合格项目细化名称" prop="enterpriseName" />
            <el-table-column label="不合格项目说明" prop="enterpriseName" />
            <el-table-column label="不合格项目危害" prop="enterpriseName" />
          </el-table>
          <div class="isYes">
            <header>综合判定</header>
            <div class="is-items">
              <section>
                本品按《辽宁省药品监督管理局关于协助做好我省疫情放防控类医疗器械抽检工作的函》（辽药监械函【2022】170号）及鲁械标准2022141343检验，结果符合规定
              </section>
              <div class="lastAside">合格</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
    <script>
    import headerTitle from "./components/headerTitle";
import descriptions from "./components/descriptions";
export default {
  data() {
    return {
      //基本信息
      list1: [
        {
          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: "",
        },
      ],
      //抽样情况
      list2: [
        {
          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: "",
        },
      ],
      //被抽样企业和单位情况
      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: "",
        },
      ],
      //检验信息
      list4: [
        {
          span: 1,
          label: "检验机构",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "检验依据",
          value: "",
          data: "",
        },
        {
          span: 2,
          label: "检验结果",
          value: "",
          data: "",
        },
        {
          span: 2,
          label: "不合格项目",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "备注",
          value: "",
          data: "",
        },
      ],
      dialogVisible: false,
      loading: false,
      radio: 0,
      input: "",
      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有限公司",
        },
      ],
    };
  },
  components: {
    descriptions,
    headerTitle
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #f8f9fa;
}

.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%;
}
.lastBox {
  margin-top: 15px;
}
::v-deep .radioBox .el-descriptions-row > td {
  width: 82%;
}
::v-deep .lastBox .el-descriptions-row > th {
  width: 10% !important;
}
::v-deep .lastBox .el-descriptions-row > td {
  width: 82%;
  padding: 0;
}
::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;
  }
}
.isYes {
  margin-top: 10px;
  display: flex;
  border: 1px solid #e6ebf5;
  height: 50px;
  header {
    height: 100%;
    width: 12%;
    padding-left: 8px;
    background: #f5f7fa;
    display: flex;
    color: #292f38;
    align-items: center;
  }
  .is-items {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: space-between;
    section {
      width: 90%;
      display: flex;
      padding-left:10px;
      align-items: center;
    }
    .lastAside {
      width: 5%;
      height: 100%;
      background: #22c98d;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style lang="scss">
.el-radio {
  margin-top: 10px;
}
.el-input {
  width: 50% !important;
  margin-left: 25px;
}
</style>