<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.taskName"
                      placeholder="请输入内容"
                    ></el-input>
                  </div>
                </div>
                <div class="task-name">
                  <span class="task-name-text">药品分类：</span>
                  <div class="task-input">
                    <el-select v-model="queryCondition.drugClassification" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </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="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-select v-model="queryCondition.dosageForm" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </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="mytable">
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  border
                  style="width: 100%"
                >
                  <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="approvalNumber"
                    label="批准文号"
                    show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                    prop="type"
                    label="药品分类"
                    show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                    prop="dosageForm"
                    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="100"
                  >
                    <template slot-scope="scope">
                      <div class="button">
                        <el-button
                          size="mini"
                          type="primary"
                          class="xiangqing"
                          plain
                          @click="handleEdit(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:{
          firmName:"",                   // 企业名称
          approvalNumber:"",             // 批准文号
          taskName:"",                   // 产品名称
          dosageForm:'',                 // 剂型
          drugClassification:'',         // 药品分类
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        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:''
        },
        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: {
      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: 100px;
          .task-name-text {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #6a6c6f;
            line-height: 50px;
            display: inline-block;
            width: 80px;
            text-align: right;
            // margin-right: vw(10);
          }
          .task-input {
            width: 351px;
            height: 32px;
            ::v-deep .el-input {
              width: 351px !important;
              height: 32px;
              margin-left: 0 !important;
            }
            ::v-deep .el-input__inner {
              width: 100%;
              height: 100%;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              line-height: 50px;
              padding-left: 15px;
            }
          }
        }
        .checkbox-group-name {
          width: 695px;
        }
        .btn{
          width: 100%;
          display: flex;
          justify-content: center;
        }
        .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;
          }
        }
      }
      .tabsTwo {
        margin: 10px 0;
        overflow-y: scroll;
        // padding: 10px 0;
        padding-bottom: 20px;
        background-color: #fff;
        .mytable {
          width: 99%;
          margin: 10px auto;
          ::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 10px;
              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>
  