<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 class="content-tabs">
        <div class="tabs">
          <div
            class="tab"
            v-for="(item, index) in options"
            :key="index"
            @click="actionTab(index)"
            :class="action == index ? 'actionTab' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <div v-if="action == 0">
        <div class="mar">
          <headerTitle header="国家药品抽检信息"></headerTitle>
        </div>
        <descriptions :descriptionsList="list1"></descriptions>
      </div>
      <div v-if="action == 1">
        <div class="mar">
          <headerTitle header="检验项目信息"></headerTitle>
        </div>
        <el-table v-loading="loading" :data="tableList" border :stripe="false">
          <el-table-column type="index" label="序号" width="50" />
          <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>
          <el-table-column label="检验结论" prop="num" />
          <el-table-column label="检验依据" prop="enterpriseName">
          </el-table-column>
          <el-table-column label="检验序号" prop="num" />
          <el-table-column label="报告类别" prop="enterpriseName">
          </el-table-column>
          <el-table-column label="抽样编号" prop="enterpriseName">
          </el-table-column>
          <el-table-column label="药品通用名" prop="enterpriseName">
          </el-table-column>
          <el-table-column label="编辑时间" prop="enterpriseName">
          </el-table-column>
          <el-table-column label="更新时间" prop="enterpriseName">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <span class="custom">共100条，显示1条</span>
          <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-sizes="[10, 5]"
            layout=" prev, pager, next, sizes, jumper"
            :total="querydata.total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import headerTitle from "./components/headerTitle";
import descriptions from "./components/descriptions";
export default {
  data() {
    return {
      dialogVisible: false,
      action: 0,
      options: ["基本信息", "检验项目"],
      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有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
      ],
      querydata: {
        total: 11,
      },
      list1: [
        {
          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: "",
        },
        {
          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: "",
        },
        {
          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: "计划ID",
          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;
    },
    actionTab(e) {
      this.action = e;
    },
    currentChange() {},
    sizeChange() {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #f8f9fa;
}
.headerText {
  color: #333333;
}
.header--title {
  margin: 15px 0;
  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;
    }
  }
}
.mar {
  margin: 10px 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 .el-dialog:not(.is-fullscreen) {
  margin-bottom: 1vh !important;
}
.content-tabs {
  .tabs {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #dbe0e8;
    .tab {
      border: 1px solid #dbe0e8;
      background: #f8f9f9;
      color: #292f38;
      padding: 7px 18px;
      display: flex;
      align-items: center;
      border-bottom: none;
      margin-right: 7px;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
    }
    .actionTab {
      background-color: #1e80eb;
      color: #fff;
    }
  }
}
.pagination {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
</style>