<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>
