<template>
  <el-container class="repository-query text-general-color">
      <div v-if="this.$store.getters.getNavigationQueryVisibleFn" class="basic-query-div">
        <div style="margin: 0 0 0 0px;overflow-y: auto;" :style="{height: basicQueryAreaHeight}">
          <ul>
            <li class="li-general-hover-bgcolor li-general-height">
              <div class="li-div-basic-query" style="border-bottom: 1px solid #F2F2F2;">
                <div style="margin: 0 10px;position: relative;">
                  <div class="li-basic-icon-div icon-div-repository" :style="{'background-color': '#4E7FF9'}">
                    <i class="awsui-iconfont"><i class="iconfont li-basic-icon">&#xe758;</i></i>
                  </div>
                  <div style="display: inline-block;cursor: pointer; position: relative;left: 40px;text-align: left;width: 280px;height: 30px;line-height: 30px;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" @click="openConditionQuery">
                    在高级搜索中查看"<span class="text-linker-color">{{queryInput}}</span>"
                  </div>
                </div>
              </div>
            </li>
            <template v-for="(item, i) in basicQueryResult">
              <li class="li-general-hover-bgcolor li-general-height">
                <div class="li-div-basic-query" style="border-bottom: 1px solid white;">
                  <div style="margin: 0 10px;position: relative;">
                    <div v-if="!item.folder" class="li-basic-icon-div icon-div-repository" :style="{'background-color': item.icon.color}">
                      <i class="awsui-iconfont"><i class="awsui-iconfont li-basic-icon" v-html="item.icon.code"></i></i>
                    </div>
                    <div v-else class="li-basic-icon-div icon-div-repository">
                      <i class="awsui-iconfont"><i class="awsui-iconfont li-basic-icon" :style="{color: item.icon.color, 'font-size': '32px'}" v-html="item.icon.code"></i></i>
                    </div>
                    <div class="li-basic-title-div" v-html="item.name" @click="positionRepository(item.id, item.versionId, item.path)">
                    </div>
                    <i v-if="!item.folder" style="float: right;cursor: pointer;" class="iconfont text-second-color icon-open-repository" @click="openRepository(item.id)">&#xe8b5;</i>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <el-dialog
        :visible.sync="this.$store.getters.getNavigationConditionQueryVisibleFn"
        :before-close="handleClose"
        :close-on-click-modal=false
        :destroy-on-close=true
        :show-close=false
        width="800px">
        <div style="height: 564px;">
          <!-- head -->
          <div class="condition-query-header" style="border-bottom: 1px solid #F2F2F2;">
            <el-input
              style="border: 0px;width: 90%;"
              placeholder="请输入关键字"
              prefix-icon="el-icon-search"
              v-model="conditionQueryInput"
              @input="queryConditionTimer">
            </el-input>
            <span class="condition-query-clear text-second-color" :style="{visibility: showClearButton ? 'visible' : 'hidden'}" @click="clearQueryInput">清除</span>
            <div style="height:10px;display:inline-block;border-left: 1px solid #F2F2F2;margin-left: 5px;"></div>
            <button type="button" aria-label="Close" class="el-dialog__headerbtn" style="float: right;" @click="closeDlg">
              <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
          </div>
          <!--tabs header-->
          <div>
            <el-tabs v-model="activeTabName" @tab-click="handleCagegoryChange">
              <el-tab-pane v-for="item in tabData" :label="item.label" :name="item.name"></el-tab-pane>
            </el-tabs>
          </div>
          <!--tabs contents-->
          <div>
            <div v-loading="loading" style="width: 70%;height:477px;float: left;overflow-x: hidden;overflow-y: auto;">
              <div style="padding: 0 10px;">
                <template>
                  <el-table
                          :data="conditionQueryResult"
                          :row-style="{height:'50px'}"
                          :cell-style="{padding:'0px'}"
                          :show-header=false
                          style="width: 100%">
                    <div slot="empty">
                      <div class="text-second-color">
                        <i class="iconfont icon-wushuju" style="font-size: 60px;"></i>
                        <p style="line-height: 0">暂无数据，请输入关键字搜索</p>
                      </div>
                    </div>
                    <el-table-column
                            prop="icon"
                            label=""
                            align="right"
                            width="52px">
                      <template slot-scope="scope">
                        <div v-if="!scope.row.folder" class="icon-div-condition-query" :style="{'background-color': scope.row.icon.color}">
                          <i class="awsui-iconfont icon-condition-query" v-html="scope.row.icon.code"></i>
                        </div>
                        <div v-else class="icon-div-condition-query">
                          <i class="awsui-iconfont icon-condition-query" :style="{color: scope.row.icon.color, 'font-size': '32px'}" v-html="scope.row.icon.code"></i>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            align="left"
                            label="名称">
                      <template slot-scope="scope">
                        <div>
                          <p class="condition-query-row-name"><span @click="positionRepository(scope.row.id, scope.row.versionId, scope.row.path)" v-html="scope.row.name"></span></p>
                          <p class="condition-query-row-desc text-second-color" v-if="scope.row.shapeDataSize == 0" v-html="scope.row.createUser + ' 于' +scope.row.createDate + ' 创建 · ' + scope.row.updateUser + ' 于' + scope.row.updateDate + ' 修改'"></p>
                          <p class="condition-query-row-desc text-second-color" v-else v-html="'包含 ' + scope.row.shapeDataStr + ' ' + scope.row.shapeDataSize + '个节点'"></p>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="operate"
                            label="操作"
                            width="40">
                      <template slot-scope="scope">
                        <i v-if="scope.row.methodId !='default'" class="iconfont text-second-color icon-open-repository" style="cursor: pointer;position:relative;top:2px;" @click="openRepository(scope.row.id)">&#xe8b5;</i>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </div>
            <div style="width: 30%;height: 477px;float: left;overflow-y: auto;overflow-x: hidden;">
              <div style="border-left: 1px solid #F2F2F2;">
                <div style="padding: 10px;">
                  <p class="query-filter-item-title">搜索类型</p>
                  <template>
                    <el-checkbox-group v-model="queryTypeChecked" class="query-filter-item-checkbox-group" @change="queryConditionTimer">
                      <el-checkbox class="query-filter-item-checkbox" style="display: block;" label="file">文件</el-checkbox>
                      <el-checkbox class="query-filter-item-checkbox" style="display: block;" label="shape">形状</el-checkbox>
                    </el-checkbox-group>
                  </template>
                  <p class="query-filter-item-title">
                    文件类型
                    <template v-if="repositoryMethodList.length > 3">
                      <i v-if="conditionFold.method" class="awsui-iconfont condition-query-item-fold" @click="conditionFold.method = conditionFold.method ? false : true">&#xe716;</i>
                      <i v-else class="awsui-iconfont condition-query-item-fold" @click="conditionFold.method = conditionFold.method ? false : true">&#xe718;</i>
                    </template>
                  </p>
                  <template v-if="repositoryMethodList.length > 0">
                    <el-checkbox-group v-model="repositoryMethodChecked" class="query-filter-item-checkbox-group" @change="queryConditionTimer">
                      <template v-for="(list, i) in repositoryMethodList">
                        <el-checkbox v-show="i < 3 || (i >= 3 && !conditionFold.method)" class="query-filter-item-checkbox" style="display: block;" :label="list.id">{{list.name}}</el-checkbox>
                      </template>
                    </el-checkbox-group>
                    <p v-if="repositoryMethodList.length > 3 && conditionFold.method" style="padding-left: 10px;"><i class="awsui-iconfont text-second-color condition-query-item-fold-more" @click="conditionFold.method = conditionFold.method ? false : true">&#xe600;</i></p>
                  </template>
                  <p class="query-filter-item-title">
                    创建人
                    <template v-if="createUserList.length > 3">
                      <i v-if="conditionFold.createUser" class="awsui-iconfont condition-query-item-fold" @click="conditionFold.createUser = conditionFold.createUser ? false : true">&#xe716;</i>
                      <i v-else class="awsui-iconfont condition-query-item-fold" @click="conditionFold.createUser = conditionFold.createUser ? false : true">&#xe718;</i>
                    </template>
                  </p>
                  <template v-if="createUserList.length > 0">
                    <el-checkbox-group v-model="createUserChecked" class="query-filter-item-checkbox-group" @change="queryConditionTimer">
                      <template v-for="(list, i) in createUserList">
                        <el-checkbox v-show="i < 3 || (i >= 3 && !conditionFold.createUser)" class="query-filter-item-checkbox" style="display: block;" :label="list.id">{{list.name}}</el-checkbox>
                      </template>
                    </el-checkbox-group>
                    <p v-if="createUserList.length > 3 && conditionFold.createUser" style="padding-left: 10px;"><i class="awsui-iconfont text-second-color condition-query-item-fold-more" @click="conditionFold.createUser = conditionFold.createUser ? false : true">&#xe600;</i></p>
                  </template>
                  <p class="query-filter-item-title">修改时间</p>
                  <template>
                    <el-radio-group v-model="updateDateChecked" class="query-filter-item-checkbox-group" @change="queryConditionTimer">
                      <el-radio class="query-filter-item-checkbox" style="display: block;" label="all">全部</el-radio>
                      <el-radio class="query-filter-item-checkbox" style="display: block;" label="thirty">近30天</el-radio>
                      <el-radio class="query-filter-item-checkbox" style="display: block;" label="fifteen">近15天</el-radio>
                      <el-radio class="query-filter-item-checkbox" style="display: block;" label="seven">近7天</el-radio>
                      <el-radio class="query-filter-item-checkbox" style="display: block;" label="today">今天</el-radio>
                    </el-radio-group>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
  </el-container>
</template>

<script>

  import {openDesigner} from "../../api/commonFun";
  import awsuiAxios from "../../awsuiAxios";

    export default {
      name: "RepositoryQuery",
      data() {
        return {
          conditionQueryInput: this.queryInput,// 高级查询关键字搜索框
          showClearButton: false,
          basicQueryResult: [],
          basicQueryAreaHeight: '0px',
          activeTabName: '',
          queryTypeChecked: ['file'],
          repositoryMethodChecked: [],
          createUserChecked: [],
          updateDateChecked: 'all',
          repositoryMethodList: [],
          createUserList: [],
          tabData: [],
          conditionQueryResult: [],
          conditionFold: {// 条件选项中折叠处理
            method: true,// 文件类型，默认不折叠
            createUser: true // 创建人，默认不折叠
          },
          loading: false,
          timeStamp: 0,// 查询时记录时间戳
          queryInterval: 1000,// 查询时间间隔1000ms
          timer: null // 定时器
        }
      },
      props: ['queryInput'],
      computed: {
        listenNavigationConditionQueryVisibleFn() {
          return this.$store.getters.getNavigationConditionQueryVisibleFn;
        }
      },
      watch: {
        queryInput(val, oldVal) {// 基础查询输入值变动事件
          if (val.trim() != '') {
            if (this.$store.getters.getNavigationQueryVisibleFn) {// 基础查询
              this.basicQueryResult = [];// 清空记录
              this.queryBasicTimer();
            }
          }
        },
        conditionQueryInput(val, oldVal) {// 高级输入值变动事件
          if (val.trim() != '') {
            this.showClearButton = true;
          } else {
            this.showClearButton = false;
          }
        },
        listenNavigationConditionQueryVisibleFn: function (newd, old) {
          if (newd) {
            this.conditionQueryInput = this.queryInput;
            // 获取分类，以及各个分类的文件类型，创建人信息，默认选中信息
            this.queryTabInfo();
          }
        }
      },
      methods: {
        queryTabInfo() {// 获取所有的tab信息，该窗口打开后立即执行
          const that = this;
          const data = {
            url:'jd',
            data:{
              cmd: 'com.actionsoft.apps.coe.pal_processlevel_condition_main_query',
              wsId: that.$store.getters.getWsIdFn,
              teamId: that.$store.getters.getTeamIdFn
            }
          };
          // 查询数据
          awsuiAxios.post(data).then(function (ro) {
            if (ro.result == 'ok') {
              const data = ro.data.data;
              const userData = ro.data.userData;
              for (let i = 0; i < data.length; i++) {
                const curr = data[i];
                curr.createUserList = JSON.parse(JSON.stringify(userData));
              }
              that.tabData = data;
              that.$nextTick(function(){
                // 执行查询全部
                that.activeTabName = 'all';
                that.handleCagegoryChange({'name': 'all'});// 执行查询
              });
            } else {
              that.$message.error(ro.msg);
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        clearQueryInput() {
          this.conditionQueryInput = '';
          this.queryConditionTimer();
        },
        closeDlg() {
          // 清空（恢复默认值）
          this.conditionQueryInput = '';
          this.showClearButton = false;
          this.queryTypeChecked = ['file'];
          this.repositoryMethodChecked = [];
          this.createUserChecked = [];
          this.updateDateChecked = 'all';
          this.repositoryMethodList = [];
          this.createUserList = [];
          this.tabData = [];
          this.conditionQueryResult = [];
          this.conditionFold.method = true;
          this.conditionFold.createUser = true;
          // 关闭dialog
          this.$store.commit('setNavigationConditionQueryVisibleFn', false);
        },
        save() {
          // 保存处理
          this.closeDlg();
        },
        handleClose(done) {
          done();
          this.closeDlg();
        },
        openConditionQuery() {// 打开高级查询
          this.$store.commit('setNavigationQueryVisibleFn',false);// 关闭普通查询
          this.$store.commit('setNavigationConditionQueryVisibleFn', true);
        },
        clearTimer() {// 清除定时器
          if (this.timer != null) {
            clearTimeout(this.timer);
          }
        },
        queryBasicTimer() {// 基础查询定时器
          const that = this;
          that.timeStamp = new Date().getTime() + '';// 记录最新时间戳
          that.clearTimer();// 清除之前的定时器
          that.timer = setTimeout(function(){// 等待间隔过后开始查询
            that.queryBasicRepository();
          }, that.queryInterval);
        },
        queryBasicRepository() {// 基本查询
          if (this.queryInput && this.queryInput.trim() != '') {
            const that = this;
            const params = {
              url:'jd',
              data:{
                cmd: 'com.actionsoft.apps.coe.pal_processlevel_basic_query',
                wsId: that.$store.getters.getWsIdFn,
                teamId: that.$store.getters.getTeamIdFn,
                name: that.queryInput.trim(),
                timeStamp: that.timeStamp
              }
            };
            // 查询数据
            awsuiAxios.post(params).then(function (ro) {
              if (ro.data.timeStamp == that.timeStamp) {// 时间戳比对成功，是最新的查询key
                that.clearTimer();// 清除定时器
                if (ro.result == 'ok') {
                  const data = ro.data.data;
                  for (let i = 0; i < data.length; i++) {
                    const curr = data[i];
                    curr.name = that.matchStyle(0, curr.name, that.queryInput.trim());
                  }
                  that.basicQueryAreaHeight = ((51 + data.length*50) > 350 ? 350 : (51 + data.length*50)) + 'px';
                  that.basicQueryResult = data;
                } else {
                  that.$message.error(ro.msg);
                }
              }

            }).catch(error=>{
              console.log(error);
            })
          }
        },
        matchStyle(start, str, key) {// 是否匹配文字校验并添加样式
          let str1 = str.toLocaleLowerCase();
          let key1 = key.toLocaleLowerCase();
          if (start > str.length - 1) {
            return str;
          }
          const index = str1.indexOf(key1, start);
          if (index != -1) {
            const key2 = str.substring(index, index + key.length);
            const prefix = '<span class="text-linker-color">';
            const suffix = '</span>';
            str = str.substring(0, start) + str.substring(start).replace(key2, prefix + key2 + suffix);
            start = index + key.length + prefix.length + suffix.length;
            return this.matchStyle(start, str, key);
          } else {
            return str;
          }
        },
        queryConditionTimer() {// 高级筛选查询定时器
          const that = this;
          that.timeStamp = new Date().getTime() + '';// 记录最新时间戳
          that.clearTimer();// 清除之前的定时器
          that.loading = true;
          that.timer = setTimeout(function(){// 等待间隔过后开始查询
            that.queryConditionRepository();
          }, that.queryInterval);
        },
        queryConditionRepository() {// 高级查询
          const that = this;
          if (that.conditionQueryInput && that.conditionQueryInput.trim() != '') {
            if (that.queryTypeChecked.length == 0 || that.repositoryMethodChecked.length == 0 || that.createUserChecked.length == 0) {
              that.conditionQueryResult = [];
              that.loading = false;
              return;
            }
            const params = {
              url:'jd',
              data:{
                cmd: 'com.actionsoft.apps.coe.pal_processlevel_condition_data_query',
                wsId: that.$store.getters.getWsIdFn,
                teamId: that.$store.getters.getTeamIdFn,
                type: JSON.stringify(that.queryTypeChecked),// 查询类型，文件/形状
                method: JSON.stringify(that.repositoryMethodChecked),// 建模方法分类范围
                createUser: JSON.stringify(that.createUserChecked),// 创建人
                updateDate: that.updateDateChecked, // 修改时间范围
                key: that.conditionQueryInput, // 搜索关键字
                timeStamp: that.timeStamp// 时间戳
              }
            };
            // 查询数据
            awsuiAxios.post(params).then(function (ro) {
              if (ro.data.timeStamp == that.timeStamp) {// 时间戳比对成功，是最新的查询key
                that.clearTimer();// 清除定时器
                if (ro.result == 'ok') {
                  const data = ro.data.data;
                  for (let i = 0; i < data.length; i++) {
                    const curr = data[i];
                    if (that.queryTypeChecked.indexOf("file") != -1) {
                      curr.name = that.matchStyle(0, curr.name, that.conditionQueryInput);
                    }
                    if (that.queryTypeChecked.indexOf("shape") != -1 && curr.shapeDataSize > 0) {
                      for (let j = 0; j < curr.shapeData.length; j++) {
                        const shapeName = curr.shapeData[j];
                        curr.shapeData[j] = that.matchStyle(0, shapeName, that.conditionQueryInput);
                      }
                      curr.shapeDataStr = curr.shapeData.join('、');
                    }
                  }
                  that.conditionQueryResult = data;
                } else {
                  that.$message.error(ro.msg);
                }
              }
              that.loading = false;
            }).catch(error=>{
              console.log(error);
            })
          } else {
            that.conditionQueryResult = [];
            that.loading = false;
            return;
          }
        },
        handleCagegoryChange(tab, event) {// tab变更，重新加载文件类型，再执行查询
          // 重置文件类型，创建人
          const name = tab.name;
          for (let i = 0; i < this.tabData.length; i++) {
            const data = this.tabData[i];
            if (data.name == name) {
              this.repositoryMethodList = data.methodList;
              this.repositoryMethodChecked = [];
              for (let j = 0; j < this.repositoryMethodList.length; j++) {
                this.repositoryMethodChecked.push(this.repositoryMethodList[j].id);// 设置文件类型默认值
              }
              this.createUserList = data.createUserList;
              this.createUserChecked = [];
              for (let j = 0; j < this.createUserList.length; j++) {
                this.createUserChecked.push(this.createUserList[j].id);// 设置文件属性默认值
              }
            }
          }
          this.queryConditionTimer();// 查询
        },
        positionRepository(id, versionId, path) {// 定位查询的流程（基础查询和高级查询通用）
          this.$router.push({path: '/Repository', query: {id: id, versionId: versionId, path: path, param: Math.random()}});
          if (this.$store.getters.getNavigationQueryVisibleFn) {
            this.$store.commit('setNavigationQueryVisibleFn',false);// 关闭普通查询
          }
          if (this.$store.getters.getNavigationConditionQueryVisibleFn) {
            this.$store.commit('setNavigationConditionQueryVisibleFn', false);// 关闭高级查询
          }
        },
        openRepository(id) {// 打开查询的流程（基础查询和高级查询通用）
          if (this.$store.getters.getNavigationQueryVisibleFn) {
            this.$store.commit('setNavigationQueryVisibleFn',false);// 关闭普通查询
          }
          if (this.$store.getters.getNavigationConditionQueryVisibleFn) {
            this.$store.commit('setNavigationConditionQueryVisibleFn', false);// 关闭高级查询
          }
          openDesigner(this.$store.getters.getTeamIdFn, id, this.$store.state.sessionId);
        }
      }
    }
</script>

<style scoped>
  .repository-query >>> .el-dialog__body {
    padding: 0px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  .repository-query >>> .el-dialog__header {
    padding: 0;
  }


  .repository-query >>> .el-tabs__nav-wrap:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #F2F2F2;
    z-index: 1;
  }
  .repository-query >>> .el-tabs__active-bar {
    height: 1px;
    background-color: #4E7FF9;
  }
  .repository-query >>> .el-tabs__item.is-active {
    color: #4E7FF9;
    font-weight: 600 !important;
  }
  .repository-query >>> .el-checkbox {
    margin-right: 0;
  }
  .repository-query >>> .el-radio {
    margin-right: 0;
  }
  .repository-query >>> .el-radio__input.is-checked .el-radio__inner {
    border-color: #4E7FF9;
    background: #4E7FF9;
  }
  .repository-query >>> .el-radio__input.is-checked+.el-radio__label {
    color: #606266;
    font-weight: normal;
  }
  .repository-query >>> .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #606266;
    font-weight: normal;
  }
  .repository-query >>> .el-checkbox__label {
    color: #606266;
    font-weight: normal;
  }
  .repository-query >>> .el-radio__label {
    color: #606266;
    font-weight: normal;
  }
  .repository-query >>> .el-checkbox__label:hover {
    color: #4E7FF9;
  }
  .repository-query >>> .el-radio__label:hover {
    color: #4E7FF9;
  }
  .repository-query >>> .el-radio__input.is-checked+.el-radio__label:hover {
    color: #4E7FF9;
  }
  .repository-query >>> .el-checkbox__input.is-checked+.el-checkbox__label:hover {
    color: #4E7FF9;
  }
  .repository-query >>> .el-tabs__item {
    color: #606266;
    font-weight: normal !important;
  }
  .repository-query >>> .el-tabs__item:hover {
    color: #4E7FF9;
  }
  .repository-query >>> .el-dialog__headerbtn {
    z-index: 999;
    top: 16px;
    right: 8px;
  }
  .repository-query >>> .el-input__inner {
    border: 0px;
    padding-left: 45px;
  }


  .repository-query >>> .el-tabs__header {
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #F2F2F2;
    margin-bottom: 0;
  }
  .repository-query >>> .el-table--mini td, .el-table--mini th {
    padding: 0px;
  }
  .repository-query >>> .el-table__row:hover .icon-open-repository{
    display: inline-block;
  }
  .repository-query >>> .el-table__row .icon-open-repository{
    display: none;
  }
  .repository-query >>> .el-table__empty-block {
    height: 470px !important;
  }
  .icon-div-repository {
    position: absolute;
    border-radius: 50%;
    left: 0px;
  }
  .li-general-hover-bgcolor :hover .icon-open-repository {
    display: inline;
  }
  .li-general-hover-bgcolor .icon-open-repository {
    display: none;
  }
  .icon-open-repository:hover {
    color: #4E7FF9 !important;
  }
  .query-filter-item-checkbox-group {
    padding-left: 10px;
  }
  .query-filter-item-checkbox {
    height: 24px;
  }
  .basic-query-div {
    width: 350px;
    position: absolute;
    top: 40px;
    background-color: white;
    z-index: 3000;
    border-radius: 3px;
    border: 0px solid #F2F2F2;
    box-shadow: rgba(170, 170, 170, 0.3) 0px 2px 5px 0px;
  }
  .li-general-height {
    height: 50px;
    line-height: 50px;
  }
  .li-div-basic-query {
    display: inline-block;
    width:100%;
    position: relative;
    line-height: 50px;
    vertical-align: middle;
  }
  .li-basic-icon-div {
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    vertical-align: middle;
    top: 10px;
  }
  .li-basic-icon {
    color: white;
    font-size: 18px;
  }
  .li-basic-title-div {
    display: inline-block;
    cursor: pointer;
    position: relative;
    left: 40px;
    text-align: left;
    width: 260px;
    height: 48px;
    line-height: 48px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .icon-div-condition-query {
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    vertical-align: middle;
    border-radius: 50%;
    left: 9px;
    position: relative;
  }
  .icon-condition-query {
    color: white;
    font-size: 18px;
  }
  .condition-query-row-name {
    display: inline-block;
    width: 427px;
    height: 14px;
    line-height: 14px;
    font-size: 13px;
    position: relative;
    top: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .condition-query-row-name span:hover {
    color: #4E7FF9 !important;
    cursor: pointer;
  }
  .condition-query-row-desc {
    display:inline-block;
    font-size: 12px;
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 533px;/*427/0.8*/
    height: 14px;
    line-height: 14px;
    position: relative;
    top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
  }
  .condition-query-header >>> .el-input__inner {
    height: 46px;
    line-height: 46px;
  }
  .condition-query-header >>> .el-input__icon {
    font-size: 16px !important;
    width: 46px;
    hight:46px
  }
  .condition-query-clear {
    font-size: 12px;
    cursor: pointer;
  }
  .condition-query-clear:hover {
    color: #4E7FF9 !important;
  }
  .query-filter-item-title {
    display: inline-block;
    width: 100%;
    padding: 6px 0 6px 0;
    font-weight: 600;
    font-size: 14px;
  }
  .condition-query-item-fold {
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
  }
  .condition-query-item-fold:hover {
    color: #4E7FF9;
  }
  .condition-query-item-fold-more {
    cursor: pointer;
    font-size: 12px;
  }
  .condition-query-item-fold-more:hover {
    color: #4E7FF9;
  }

  .el-table:before{
  height:0px;
  }
</style>
