<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="task-name">
                  <span class="task-name-text">处方内容：</span>
                  <div class="task-input">
                    <el-input
                      v-model="queryCondition.PrescriptionContent"
                      placeholder="请输入内容"
                    ></el-input>
                  </div>
                </div>
                <div class="task-name">
                  <span class="task-name-text">功能主治：</span>
                  <div class="task-input">
                    <el-input
                      v-model="queryCondition.majorFunction"
                      placeholder="请输入内容"
                    ></el-input>
                  </div>
                </div>
                <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="time-interval">
                  <div class="interval-text">
                    批号有效期：
                  </div>
                  <div class="interval-select">
                    <div class="star-time">
                      <el-date-picker
                        v-model="queryCondition.startTime"
                        type="datetime"
                        align="right"
                        :clearable="false"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择开始时间"
                      >
                      </el-date-picker>
                      <!-- <i class="el-icon-date data_icon"></i> -->
                    </div> 
                    <!-- <i class="el-icon-sort-up"></i> -->
                    <div class="symbol">~</div>
                    <div class="end-time">
                      <el-date-picker
                        v-model="queryCondition.endTime"
                        type="datetime"
                        align="right"
                        :clearable="false"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择结束时间"
                      >
                      </el-date-picker>
                      <i class="el-icon-date data_icon"></i>
                    </div>
                  </div>
                </div>
                <div class="task-name">
                  <span class="task-name-text">产品标签：</span>
                  <div class="task-checkbox">
                    <el-checkbox-group v-model="queryCondition.checkList">
                      <el-checkbox label="全部"></el-checkbox>
                      <el-checkbox label="百年产品"></el-checkbox>
                      <el-checkbox label="疗效显著"></el-checkbox>
                      <el-checkbox label="无刺激"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
                <div class="task-name">
                  <span class="task-name-text">产品筛选：</span>
                  <div class="task-checkbox">
                    <el-checkbox-group v-model="queryCondition.checkListTwo">
                      <el-checkbox label="全部"></el-checkbox>
                      <el-checkbox :label="'药品' + drugnum"></el-checkbox>
                      <el-checkbox label="医疗器械"></el-checkbox>
                      <el-checkbox label="化妆品"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </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:[],
        },
      };
    },
    mounted() {},
    methods: {},
  };
  </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;
      }
    }
    .middle-box {
      margin: 10px;
    }
  
    .main {
      height: calc(100% - 40px);
    }
    .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: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
        border-radius: vw(10);
        min-height: 90vh;
        // padding-top: 3px;
        // padding-left: 15px;
      }
      .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;
            }
          }
        }
        .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;
            }
          }
        }
      }
    }
  }
  </style>