/* 表单搜索样式 注意：el-组件 size需要设置mini */

/* Demo
<div class="query-box">
  // 普通输入框
  <div class="query-item">
    <div class="query-label">Input</div>
    <div class="query-content">
      <el-input v-model="value" size="mini" placeholder="请输入"></el-input>
    </div>
  </div>

  // 标题可选择输入框
  <div class="query-item">
    <div class="query-label-select">
      <el-select size="mini" v-model="select" placeholder="请选择">
        <el-option label="选项1" value="选项1"></el-option>
      </el-select>
    </div>
    <div class="query-content">
      <el-input v-model="value" size="mini" placeholder="请输入"></el-input>
    </div>
  </div>

  // 开始结束时间组件选择框
  <div class="query-item">
    <div class="query-label">DateTime</div>
    <div class="query-datetime">
      <el-date-picker v-model="dateTime" size="mini" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
  </div>

  // 时间组件选择框
  <div class="query-item">
    <div class="query-label">Date</div>
    <div class="query-content">
      <el-date-picker v-model="date" size="mini" type="date" placeholder="请选择日期"></el-date-picker>
    </div>
  </div>

  // select选择框
  <div class="query-item">
    <div class="query-label">Select</div>
    <div class="query-content">
      <el-select size="mini" v-model="select" placeholder="请选择">
        <el-option label="选项1" value="选项1"></el-option>
      </el-select>
    </div>
  </div>

  // 级联选择框 过滤
  <div class="query-item">
    <div class="query-label">Cascader</div>
    <div class="query-content">
      <el-cascader style="--input-w: 220px" class="query-filter" v-model="value" :options="options" :props="{ multiple: true, checkStrictly: true }" filterable collapse-tags clearable size="mini"></el-cascader>
    </div>
  </div>

  // 两个输入框
  <div class="query-item">
    <div class="query-label">BatchInput</div>
    <div class="query-content-batch">
      <el-select size="mini" v-model="value" placeholder="请选择" clearable>
        <el-option label="选项1" value="选项1"></el-option>
      </el-select>
      <el-input v-model="value" size="mini" placeholder="请输入"></el-input>
    </div>
  </div>

  // 操作按钮
  <el-button size="mini" type="primary">搜索</el-button>
</div>
*/

/* el-select 样式重构，数据过多可能会卡顿 */
/* 预览地址 https://oss.peakc.top/demo/select-tag1.png
<div class="query-box">
  <div class="query-item">
    <div class="query-label">测试</div>
    <div class="query-content">
      <el-select size="mini" v-model="value" filterable popper-class="query-option" placeholder="请选择测试" clearable>
        <el-option label="选项1" value="1">
          <span class="query-option-tag">1</span>
          <span class="query-option-tag">WXID</span>
          <span>选项1</span>
        </el-option>
      </el-select>
    </div>
  </div>

  // 预览地址 https://oss.peakc.top/demo/select-tag2.png
  <div class="query-item">
    <div class="query-label">测试</div>
    <div class="query-content">
      <el-select size="mini" v-model="value" filterable popper-class="query-option" multiple collapse-tags placeholder="请选择测试" clearable>
        <el-option label="选项1" value="1">
          <div class="query-option-flex">
            <span class="query-option-tag">1</span>
            <div class="query-option-vertical">
              <span>wxid</span>
              <span class="query-option-desc">选项1</span>
            </div>
          </div>
        </el-option>
      </el-select>
    </div>
  </div>

  // 预览地址 https://oss.peakc.top/demo/select-tag3.png
  <div class="query-item">
    <div class="query-label">测试</div>
    <div class="query-content">
      <el-select size="mini" v-model="value" filterable popper-class="query-option" multiple collapse-tags placeholder="请选择测试" clearable>
        <div class="query-option-head">
          <div>Appkey</div>
          <div>推广位ID</div>
          <div>渠道关系ID</div>
          <div>备注</div>
          <div>备注</div>
        </div>

        <el-option label="选项1" value="1">
          <div class="query-option-row">
            <el-checkbox :value="value.includes('1')"></el-checkbox>
            <div>1</div>
            <div>选项1</div>
            <div>选项1</div>
            <div>选项1</div>
            <div>选项1</div>
          </div>
        </el-option>
      </el-select>
    </div>
  </div>
</div> 
*/

/* 高级搜索 */
/* 预览地址 https://oss.peakc.top/demo/high-search.png
<div class="query-box">
  <div class="query-item">
    <div class="query-label">Input</div>
    <div class="query-content">
      <el-input v-model="value" size="mini" placeholder="请输入"></el-input>
    </div>
  </div>

  <div class="query-item">
    <el-button size="mini" type="primary">搜索</el-button>
  </div>

  <div class="query-item" :class="[isHigh ? 'query-high-open' : 'query-high']" @click="isHigh = !isHigh">高级搜索</div>
</div>

<div :class="[isHigh ? 'query-box-high-open' : 'query-box-high']">
  <div class="query-item" v-for="item in 3" :key="item">
    <div class="query-label">高级</div>
    <div class="query-content">
      <el-select size="mini" v-model="select" placeholder="请选择" clearable>
        <el-option label="选项1" value="选项1"></el-option>
      </el-select>
    </div>
  </div>
</div>
*/

/* 表单盒子 */
/* 可通过在页面定义变量覆盖默认值
Demo
.query-box {
  --margin-size: 10px 0; // 最外层盒子margin
  --item-margin-size: 0 20px 20px 0; // 筛选项margin
  --label-select-w: 120px; // 筛选项select类型标题的宽度
  --input-w: 160px; // 筛选项输入框宽度
}
.query-box-high-open {
  --high-max-height: 200px; // 高级搜索高度 用来处理动画 和--high-row二选一 优先使用
  --high-row: 3; // 高级搜索的行数 用来计算高级搜索盒子高度 处理动画 和--high-max-height二选一
  --margin-size: 0 0 10px; // 最外层盒子margin
  --item-margin-size: 0 10px 10px 0; // 筛选项margin
  --label-select-w: 90px; // 筛选项select类型标题的宽度
  --input-w: 160px; // 筛选项输入框宽度
}
*/
.query-box {
  --margin-size: 10px 0 0 0;
  --item-margin-size: 0 10px 10px 0;
  --label-select-w: 90px;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  margin: var(--margin-size);
}

.query-box-high,
.query-box-high-open {
  --high-row: 3;
  --margin-size: 0 0 10px;
  --item-margin-size: 0 10px 10px 0;
  --label-select-w: 90px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-height: 0;
  padding-left: 10px;
  background-color: #f2f2f2;
  border-radius: 4px;
  transition: all 0.1s linear;
  opacity: 0;
  z-index: -1;
}

.query-box-high-open {
  max-height: var(--high-max-height, calc(var(--high-row) * 28px + 20px + calc(var(--high-row) * 10px)));
  margin: var(--margin-size);
  padding-top: 10px;
  opacity: 1;
  z-index: 1;
}

/* 表单项 */
.query-item {
  display: flex;
  align-items: center;
  margin: var(--item-margin-size) !important;
}

/* 表单标题 */
.query-label,
.query-label-select {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(14px * 2);
  line-height: calc(14px * 2);
  padding: 0 calc(12px * 1);
  color: #909399;
  font-size: 12px;
  background-color: #f5f7fa;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-right: none;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.query-label-select {
  padding-right: 0;
}
/* 表单标题选择框 */
.query-label-select .el-input__inner {
  width: var(--label-select-w);
  padding: 0;
  padding-right: 30px;
  background-color: unset;
  border: none !important;
  color: #909399;
}

/* 表单内容 Input Select TimePicker DatePicker等 */
.query-content {
  display: flex;
  width: var(--input-w, calc(14px * 11));
}
.query-content-batch {
  display: flex;
}

.query-content .el-select__tags .el-tag,
.query-content .el-cascader__tags .el-tag,
.query-content-batch .el-select__tags .el-tag,
.query-content-batch .el-cascader__tags .el-tag {
  max-width: calc(100% - 60px);
}

.query-content .el-cascader--mini .el-input__inner {
  height: 28px !important;
}
.query-content .el-cascader__tags {
  flex-wrap: nowrap;
  align-items: center;
}
.query-filter .el-cascader__tags .el-tag {
  max-width: calc(100% - 110px) !important;
}

/* 表单内容 DateTimePicker */
.query-datetime {
  width: var(--input-w, calc(14px * 20));
}

.query-content .el-input__inner,
.query-content .el-input-number {
  width: var(--input-w, calc(14px * 11));
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: unset !important;
}
.query-content-batch .el-input__inner,
.query-content-batch .el-input-number {
  width: var(--input-w, calc(14px * 8));
  border-radius: 0;
}
.query-content-batch > div:last-child .el-input__inner {
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.query-datetime .el-input__inner {
  width: 100% !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.query-datetime .el-range-separator {
  padding: 0 !important;
  width: 7% !important;
}

.query-high,
.query-high-open {
  position: relative;
  color: #409eff;
  font-size: 12px;
  line-height: 28px;
  cursor: pointer;
  user-select: none;
}

.query-high::after,
.query-high-open::after {
  font-family: element-icons !important;
  content: "\e790";
  position: absolute;
  right: -14px;
  font-size: 14px;
  transform: rotate(0deg);
  transition: all 0.2s linear;
}

.query-high-open::after {
  transform: rotate(180deg);
}
/* begin select样式重构 */
.query-option .query-option-head ~ .el-select-dropdown__item {
  border-bottom: 1px solid #ebeef5;
}
.query-option-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 40px;
  color: #909399;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid #ebeef5;
}
.query-option-head > div,
.query-option-row > div {
  width: var(--option-row-width, 60px);
  white-space: wrap;
}
.query-option .el-select-dropdown__item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto;
  line-height: 18px;
  padding: 8px 16px !important;
  color: #606266;
  font-size: 14px;
  box-sizing: content-box;
}
.query-option .el-select-dropdown__item.selected::after {
  display: none;
}
.query-option .el-select-dropdown__item.selected .query-option-tag {
  color: #409eff;
  border: 1px solid #d9ecff;
  background-color: #ecf5ff;
}
.query-option .el-select-dropdown__item.selected,
.query-option .el-select-dropdown__item.selected .query-option-desc {
  color: #409eff;
  font-weight: 400;
}
.query-option .el-select-dropdown__item.selected .query-option-row {
  color: #606266;
  font-weight: 400;
}
.query-option .el-select-dropdown__list {
  padding: 6px 0 !important;
}
.query-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.query-option-row .el-checkbox {
  margin-bottom: 0;
  pointer-events: none;
}
.query-option-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  color: #909399;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #e9e9eb;
  background-color: #f4f4f5;
}
.query-option .query-option-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}
.query-option .query-option-vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.query-option .query-option-desc {
  font-size: 12px;
  color: #909399;
}

/* 优化formQuery.css 统一管理按钮的位置 */
.el-select-dropdown__list:has(.query-tab) {
  padding-top: 0 !important;
}

.el-select-dropdown__list .query-tab {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
  z-index: 99;
}

.el-select-dropdown__list .query-tab-item {
  flex: 1;
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 4px 0;
  transition: all 0.3s;
}

.el-select-dropdown__list .query-tab-item + .query-tab-item {
  border-left: 1px solid #ebeef5;
}

.el-select-dropdown__list .query-tab-item:focus,
.el-select-dropdown__list .query-tab-item:hover {
  color: #66b1ff;
}

.el-select-dropdown__list .query-tab-item:active {
  color: #3a8ee6;
}
/* begin select样式重构 */