<template>
  <div class="container">
    <div class="right-content">
      <div class="tabs">
        <el-tabs v-model="activeName" style="color: #edeef0">
          <el-tab-pane label="查询条件" name="first">
            <div class="screen">
              <div class="task-name">
                <span class="task-name-text">产品名称：</span>
                <div class="task-input">
                  <el-input
                    v-model="queryCondition.fullTextSearch"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
              <div class="task-name">
                <span class="task-name-text">注册证号/备案号：</span>
                <div class="task-input">
                  <el-input
                    v-model="queryCondition.firmName"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
              <div class="task-name">
                <span class="task-name-text">生产企业：</span>
                <div class="task-input">
                  <el-input
                    v-model="queryCondition.approvalNumber"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>

              <div class="btn">
                <el-button size="mini" icon="el-icon-refresh-left"
                  >重置</el-button
                >
                <el-button size="mini" type="primary" icon="el-icon-search"
                  >查询</el-button
                >
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="tabsTwo" :style="tabsTwoStyle">
          <el-tabs v-model="activeName" style="color: #edeef0">
            <el-tab-pane label="医疗器械列表" name="first">
              <div class="daochu">
                <div class="btn">导出</div>
              </div>
              <div class="mytable">
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  border
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    header-align="center"
                    class-name="column-text-one"
                    width="44"
                  >
                  </el-table-column>
                  <el-table-column label="序号" width="50">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column prop="name" label="产品名称">
                  </el-table-column>
                  <el-table-column
                    prop="firmName"
                    label="注册证号/备案号"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="firmName"
                    label="生产企业"
                    show-overflow-tooltip
                  >
                  </el-table-column>

                  <el-table-column prop="address" label="操作" width="180">
                    <template slot-scope="scope">
                      <div class="button">
                        <el-button
                          size="mini"
                          type="primary"
                          class="xiangqing"
                          plain
                          @click="handleEdit(scope.$index, scope.row)"
                          >详情</el-button
                        >
                        <el-button
                          size="mini"
                          type="primary"
                          class="bianji"
                          plain
                          @click="handleView(scope.$index, scope.row)"
                          >编辑</el-button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination">
                  <!-- <span class="custom"
                    >共{{ total }}条，显示{{
                      total == 0
                        ? "0"
                        : queryCondition.current == 1
                        ? "1"
                        : queryCondition.size * (queryCondition.current - 1) + 1
                    }}-{{ numberMap() }}条</span
                  > -->
                  <span class="custom"> 共100条，显示1-10条 </span>
                  <el-pagination
                    background
                    :page-sizes="[10, 15]"
                    :total="total"
                    layout=" prev, pager, next, sizes, jumper"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :current-page.sync="currentPage"
                    :page-size.sync="pageSize"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      drugnum: "(20)",
      activeName: "first",
      queryCondition: {
        fullTextSearch: "", // 全文检索
        firmName: "", // 企业名称
        approvalNumber: "", // 批准文号
        taskName: "", // 产品名称
        PrescriptionContent: "", // 处方内容
        majorFunction: "", // 功能主治
        startTime: "", // 开始日期
        endTime: "", // 结束日期
        checkList: [],
        checkListTwo: [],
      },
      tableData: [
        {
          date: "1",
          name: "辽-xxxx",
          type: "药品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "2",
          name: "辽-aaaa",
          type: "医疗器械",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "3",
          name: "辽-zzzz",
          type: "化妆品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "4",
          name: "辽-qqqq",
          type: "药品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "5",
          name: "辽-xxxx",
          type: "医疗器械",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "6",
          name: "辽-aaaa",
          type: "化妆品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "7",
          name: "辽-zzzz",
          type: "药品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "8",
          name: "辽-qqqq",
          type: "医疗器械",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "9",
          name: "辽-xxxx",
          type: "化妆品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
        {
          date: "10",
          name: "辽-aaaa",
          type: "药品",
          approvalNumber: "12421432143214321",
          firmName: "XXX有限公司",
        },
      ],
      tabsTwoStyle: {
        height: "",
      },
      multipleSelection: [],
      total: 100,
      currentPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳至";
    this.$nextTick(() => {
      let dom = document.getElementsByClassName("tabsTwo");
      let height = dom[0].getBoundingClientRect();
      // let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      let relativeHeight = windowHeight - height.top;
      this.tabsTwoStyle.height = relativeHeight + "px";
    });
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    currentChange(val) {},
    sizeChange(val) {},
    // 详情
    handleEdit(index, row) {
      console.log(index);
      this.$router.push({ name: "productInfo" });
    },
    // 编辑
    handleView(index, row) {},
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #f2f2f2;
  // padding: 10px;
  & > div {
    flex: 1;
    height: 100%;
  }
  & > div:nth-child(2) {
    flex: 2;
    margin: 0 10px;
  }
  .middle {
    height: 100%;
    background: #ffff;
    border-radius: 8px;
    overflow: hidden;
  }
  .left,
  .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    & > div {
      width: 100%;
      border-radius: 8px;
      flex: 1;
      background: #ffffff;
    }
  }
  .right-content {
    background-color: #fff;
    ::v-deep .el-tabs__header {
      margin: 0;
      .el-tabs__nav-scroll {
        padding-left: 15px;
        padding-top: 3px;
      }
      .el-tabs__item {
        font-size: 18px;
        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
        font-weight: bold;
        color: #323233;
      }
      .el-tabs__active-bar {
        background-color: #1349c5;
        height: 2px;
        border-radius: 0px 0px 0px 0px;
      }
    }
    .tabs {
      background: #f2f2f2;
      box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
      border-radius: vw(10);
      min-height: 88vh;
      // padding-top: 3px;
      // padding-left: 15px;
      ::v-deep .el-tabs {
        background-color: #fff;
      }
    }
    .screen {
      padding: 15px 0 26px 28px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .task-name {
        display: flex;
        align-items: center;
        margin-right: 30px;
        .task-name-text {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #6a6c6f;
          line-height: 50px;
          // margin-right: vw(10);
        }
        .task-input {
          width: 251px;
          height: 32px;
          ::v-deep .el-input {
            width: 251px;
            height: 32px;
          }
          ::v-deep .el-input__inner {
            width: 100%;
            height: 100%;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            // color: #B1B6BF;
            line-height: 50px;
            padding-left: 15px;
          }
        }
      }
      .checkbox-group-name {
        width: 695px;
      }
      .btn {
        width: 100%;
        //   padding-left: 600px;
        text-align: center;
        margin-top: 15px;
      }
      .time-interval {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .interval-text {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #6a6c6f;
          // line-height: 50px;
          // margin-right: vw(10);
        }
        .interval-select {
          display: flex;
          align-items: center;
          border: 1px solid #dbe0e8;
          border-radius: 4px;
          height: 32px;
          .star-time,
          .end-time {
            position: relative;
            .data_icon {
              position: absolute;
              top: 50%;
              right: 17px;
              z-index: 9;
              color: #c0c4cc;
              font-size: 14px;
              transform: translateY(-50%);
            }
            ::v-deep .el-input__prefix {
              display: none;
            }
            ::v-deep .el-input {
              width: 243px;
              height: 30px;
            }
            ::v-deep .el-input__inner {
              width: 100%;
              height: 100%;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              // color: #B1B6BF;
              line-height: 30px;
              padding-left: 15px;
              border: none;
              cursor: pointer;
            }
          }
          .symbol {
            background: rgba(219, 224, 232, 0.5);
            width: 40px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #292f38;
            line-height: 28px;
          }
        }
      }
    }
    .tabsTwo {
      margin: 10px 0;
      overflow-y: scroll;
      // padding: 10px 0;
      padding-bottom: 20px;
      background-color: #fff;
      .daochu {
        padding: 10px;
        .btn {
          display: flex;
          justify-content: center;
          width: 64px;
          height: 32px;
          background: #1e80eb;
          border-radius: 4px 4px 4px 4px;
          font-size: 14px;
          font-family: MicrosoftYaHei-, MicrosoftYaHei;
          font-weight: normal;
          color: #ffffff;
          line-height: 31px;
        }
      }
      .mytable {
        width: 99%;
        margin: 0 auto;
        ::v-deep .column-text-one {
          text-align: center;
        }
        ::v-deep .el-table td {
          height: 40px;
          padding: 0;
        }
        ::v-deep .el-table th {
          height: 40px;
          padding: 0;
          font-size: 14px;
          font-family: Source Han Sans SC-Medium, Source Han Sans SC;
          font-weight: bold;
          color: #292f38;
          line-height: 36px;
        }
        .button {
          display: flex;
          align-items: center;
          .xiangqing {
            height: 23px;
            padding: 3px;
            border-radius: 4px;
            line-height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 5px;
            background: #ebf5ff;
            border: 1px solid #a1cbf8;
            ::v-deep span {
              display: inline-block;
              color: #0e7cf4;
            }
          }
          .bianji {
            height: 23px;
            padding: 3px;
            border-radius: 4px;
            line-height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #ffefe3;
            border: 1px solid #ffc89f;
            ::v-deep span {
              display: inline-block;
              color: #f88129;
            }
          }
        }
      }
      .pagination {
        margin-top: 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding-bottom: vh(20);
        ::v-deep .el-pagination__jump {
          margin: 0;
        }
        .custom {
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #292f38;
          line-height: 18px;
        }
      }
    }
    .tabsTwo::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
  