<template>
  <div class="logRetrival">
    <manager-ui
      :show-query="false"
      :show-pagination="true"      
      :table-data="logTableData"
      :column-items="logColumns"
      :pagination="pageQuery"
      @allDownload="exportOper"
      @search="search"
      @selection-change="handleSelectionChange"
    >
      <template #extra>
        <el-row
          type="flex"
          style="
            padding: 0 20px;
            align-items: center;
            border-bottom: 10px solid #e6e9f0;
            height: 75px;
          "
        >
          <el-col :span="8">
            <el-date-picker
              v-model="queryPeriod.periodTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              @change="changeDateTime"
            />
          </el-col>
          <el-col :span="16" class="rightBtns">
            <search-box
              ref="searchBox"
              :popperVisible.sync="isShowForm"
              @search="
                queryForm.page.current = 1;
                search();
              "
            />
            <div class="searchBtns">
              <el-button type="text" @click="saveOper">保存策略</el-button>
              <el-popover
                trigger="hover"
                @show="searchRecord"
                popper-class="searchRecordPopper"
              >
                <div class="searchRecord__list">
                  <span
                    class="searchRecord__list__item"
                    v-for="(item, index) in searchRecordList"
                    :key="index"
                    @click="searchRecordBack(item)"
                  >
                    {{ item.createTime }}
                  </span>
                </div>
                <el-button
                  style="margin: 0 10px"
                  slot="reference"
                  type="text"
                  icon="el-icon-document"
                ></el-button>
              </el-popover>

              <el-tooltip placement="top" content="配置记录">
                <el-button
                  type="text"
                  icon="el-icon-s-tools"
                  @click="configRecord"
                ></el-button>
              </el-tooltip>
              <el-tooltip placement="top" content="重置">
                <el-button
                  type="text"
                  icon="el-icon-refresh-right"
                  @click="
                    queryForm.page.current = 1;
                    resetForm();
                  "
                ></el-button>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>

        <el-row class="logRetrival__barChart">
          <el-col :span="24">
            <el-row class="logRetrival__barChart__header">
              <el-col :span="12" style="height: 100%">
                <span class="logRetrival__title">图表名称</span>
              </el-col>
              <el-col :span="12">
                <div style="float: right; display: flex; align-items: center">
                  <img
                    class="logRetrival__download"
                    src="../assets/img/download.png"
                    @click="saveImage('.logRetrival__barChart', '事件趋势')"
                  />
                  <span class="logRetrival__chartInfo">
                    <img src="../assets/img/eventBg.png" />
                    <span>{{
                      chartResultInfo.substring(0, chartResultInfo.indexOf("("))
                    }}</span>
                  </span>
                </div>
              </el-col>
            </el-row>
            <el-row class="logRetrival__barChart__content">
              <el-col :span="24" style="height: 100%">
                <div
                  v-if="
                    JSON.stringify(chartQuery.chartData) == '{}' ||
                    chartQuery.chartData.yAxisDataList.length == 0
                  "
                  class="noData"
                >
                  <img src="../assets/img/icon_zanwu.png" alt="" />
                  <p class="noData--text">暂无数据</p>
                </div>
                <bar-chart
                  v-else
                  :height="height"
                  :chart-bar-data="chartQuery.chartData"
                  :option="option"
                  :bar-width="58"
                />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </manager-ui>

    <!-- 关键字配置 -->
    <manager-dialog
      :visible.sync="keyFieldsConfigDL"
      width="56%"
      class="dialog-cfg"
      @close="clearKeyFieldsConfigDL"
    >
      <span
        slot="title"
        style="display: flex; align-items: center"
        class="dialog-title"
      >
        <span>关键字段配置</span>
        <el-input
          v-model="keyFieldsSearch"
          style="max-width: 215px; margin-left: 20px"
          placeholder="请输入关键字"
          clearable
        />
      </span>
      <el-row style="height: 380px; overflow: scroll">
        <el-checkbox
          v-if="filterWordType.length"
          :indeterminate="isIndeterminate"
          v-model="keyFieldsCheckAll"
          @change="handleKeyFieldsAllChange"
          >全选</el-checkbox
        >
        <el-form ref="configForm" :model="keyFieldsQuery">
          <el-form-item label="" label-width="20px" prop="keyFieldSelected">
            <el-checkbox-group
              v-model="keyFieldsQuery.keyFieldSelected"
              @change="handleKeyFieldsChange"
            >
              <el-checkbox
                v-for="item in filterWordType"
                :key="item.fieldId"
                class="checkbox"
                :label="item.fieldName"
                >{{ item.fieldName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="border-radius: 3px"
          type="primary"
          @click="submitCfgKeyFields"
          >提交</el-button
        >
        <el-button style="border-radius: 3px" @click="clearKeyFieldsConfigDL"
          >关闭</el-button
        >
      </span>
    </manager-dialog>
    <!-- 查询配置记录 -->
    <manager-dialog
      :visible.sync="configRecordDialog"
      title="策略配置记录"
      @close="closeConfigRecord"
    >
      <el-row>
        <el-table
          v-loading="tableLoading"
          :data="cfgRecordData"
          border
          stripe
          element-loading-text="数据正在加载中"
          element-loading-spinner="el-icon-loading"
          :header-cell-style="{
            background: '#F5F5F5',
            border: 'none',
            color: '#606266',
            fontSize: '13px',
            padding: '6px 0',
          }"
          :cell-style="{ padding: '3px' }"
        >
          <el-table-column width="60px" align="center">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-thumb"
                type="text"
                @click="chooseCurrent(scope.row)"
              />
              <el-popover
                placement="top-start"
                trigger="hover"
                popper-class="poptooltip"
                content="点击查询当前策略结果"
              >
                <i
                  slot="reference"
                  class="el-icon-info"
                  style="color: orange; font-size: 10px; cursor: pointer"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="策略名称"
            prop="ruleName"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="!iotTag"
            label="日志类型"
            prop="indexId"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.indexId | toCase(logTypeList, "indexId", "indexName")
              }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="iotTag"
            label="日志类型"
            prop="indexId"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.indexId
                  | toCase(iotlogTypeList, "indexId", "indexName")
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            show-overflow-tooltip
          />
          <el-table-column label="操作" width="110px">
            <template slot-scope="scope">
              <el-button
                style="color: #d9001b; padding: 4px 8px; border: none"
                size="mini"
                @click="ruleDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :page-size="pageCfg.size"
          layout="prev, pager, next,total"
          :total="pageCfg.total"
          :current-page.sync="pageCfg.current"
          @current-change="handleCurrentCfgRChange"
        />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button style="border-radius: 3px" @click="closeConfigRecord"
          >关闭</el-button
        >
      </span>
    </manager-dialog>
    <manager-dialog
      :visible.sync="eventDetailVisible"
      title="事件详情"
      :show-footer="false"
      @close="closeEventDetail"
    >
      <el-row style="width: 92%; margin: 15px auto 0px 6px">
        <el-col v-for="(item, index) in tabledata" :key="index" :span="12">
          <el-col :span="8" class="name border" :title="item.name">{{
            item.name
          }}</el-col>
          <el-col :span="16" class="border" :title="item.value">{{
            item.value
          }}</el-col>
        </el-col>
      </el-row>
      <el-row
        v-if="descriptionObj != null"
        style="width: 92%; margin: 0px auto 10px 6px"
      >
        <el-col
          :span="4"
          class="name"
          style="
            border: 1px solid #cdd9e3;
            padding: 0 12px 0;
            min-height: 40px;
            max-height: 110px;
            line-height: 110px;
            font-size: 12px;
            font-weight: 500;
          "
          :title="descriptionObj.name"
          >{{ descriptionObj.name }}</el-col
        >
        <el-col :span="20" style="border: 1px solid #cdd9e3">
          <el-input
            v-model="descriptionObj.value"
            type="textarea"
            :rows="5"
            readonly
          />
        </el-col>
      </el-row>
    </manager-dialog>
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
import searchBox from "../components/search";
import sourceData from "./data";
import barChart from "../../../components/Echarts/BarChart";
import ElRuleButton from "../components/button";
import {
  getEventDetailInfo,
  getLogTypeList,
  getFieldList,
  getListData,
  exportListData,
  getChartData,
  saveRuleConfig,
  searchRuleConfig,
  delRuleConfig,
  getDefaultTime,
  querySearchRecord,
  getAllDeviceType,
  getEventGroup,
} from "../api/log-retrival-manage";
import staticsData from "@ability/mixins/staticsData";
import html2canvas from 'html2canvas'

export default {
  name: "logRetrival",
  provide() {
    return {
      logRetrival: this,
    };
  },
  mixins: [staticsData],
  components: {
    barChart,
    ElRuleButton,
    searchBox,
  },
  data() {
    return sourceData;
  },
  watch: {
    // "chartQuery.chartData"(val) {
    //   this.option.xAxis.data = val.xAxisData;
    //   if (val.yAxisDataList.length) {
    //     val.yAxisDataList.forEach((item) => {
    //       dataList.push(item.data);
    //       legendList.push(item.name);
    //     });
    //   }
    // },
    businessTree(val) {
      this.statics.businessTree = val;
    },
    eventGroupFilterText(val) {
      this.$refs["eventGroupTree"][0].filter(val);
    },
    keyFieldsSearch(val) {
      if (this.keyFieldsQuery.keyFieldSelected.length) {
        let selectedStr = this.keyFieldsQuery.keyFieldSelected.join();
        let every = this.filterWordType.every((el) =>
          selectedStr.includes(el.fieldName)
        );
        if (every) {
          this.isIndeterminate = false;
          this.keyFieldsCheckAll = true;
        } else {
          let some = this.filterWordType.some((el) =>
            selectedStr.includes(el.fieldName)
          );
          if (some) {
            this.isIndeterminate = true;
            this.keyFieldsCheckAll = false;
          } else {
            this.isIndeterminate = false;
            this.keyFieldsCheckAll = false;
          }
        }
      }
    },
  },
  computed: {
    filterWordType() {
      return this.statics.wordType.filter((el) =>
        el.fieldName.includes(this.keyFieldsSearch)
      );
    },
    searchData() {
      const departTree = this.$store.getters.departTree;
      const assetType = this.$store.getters.assetType;
      const newAssetType = [];
      assetType.map((item) => {
        if (item.dataId != 4) {
          newAssetType.push(item);
        }
      });
      return {
        businessTree: this.businessTree,
        departTree,
        taskTypeList: this.taskTypeList,
        logTypeList: this.logTypeList,
        analyzeLogTimingList: this.analyzeLogTimingList,
        chartTypeList: this.chartTypeList,
      };
    },
    iotTag() {
      return this.$store.getters.iotTag;
    },
  },
  methods: {
    setTableEmptyWidth() {
      let ele = document.querySelector('.el-manager-ui__tableBox--tableContent > .el-table')
      let emptyEle = ele.querySelector('.el-table__empty-block')
      emptyEle.style.position = 'absolute'
      emptyEle.style.width = ele.clientWidth + 'px'
    },
    // 图片转换格式的方法
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },  
    saveImage(className, imgText) {
      let canvasID = document.querySelector(className);
      let that = this;
      let a = document.createElement("a");
      html2canvas(canvasID).then((canvas) => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute("download", imgText + ".png");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterNode(value, data, node) {
      if (!value) {
        node.expanded = false;
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },
    handleKeyFieldsAllChange(val) {
      let array = this.filterWordType.map((el) => el.fieldName);
      if (this.keyFieldsSearch != "") {
        let selectedStr = array.join();
        this.keyFieldsQuery.keyFieldSelected = val
          ? Array.from(
              new Set(array.concat(this.keyFieldsQuery.keyFieldSelected))
            )
          : this.keyFieldsQuery.keyFieldSelected.filter(
              (el) => !selectedStr.includes(el)
            );
      } else {
        this.keyFieldsQuery.keyFieldSelected = val ? array : [];
      }
      this.isIndeterminate = false;
    },
    handleKeyFieldsChange(val) {
      if (this.keyFieldsSearch != "") {
        let selectedStr = val.join();
        let res = this.filterWordType.every((el) =>
          selectedStr.includes(el.fieldName)
        );
        this.keyFieldsCheckAll = res;
        this.isIndeterminate = !res;
      } else {
        let checkedCount = val.length;
        this.keyFieldsCheckAll = checkedCount === this.filterWordType.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.filterWordType.length;
      }
    },
    toConvert(input = "", source, keyName, valueName) {
      if (!(source instanceof Array) || !source.length) return input;
      if (source[0].children) {
        source = this.recursiveArray(source);
      }
      for (const e of source) {
        if (e[keyName] == input) {
          return e[valueName];
        }
      }
      return input;
    },
    recursiveArray(list) {
      let source = [];
      list.forEach((el) => {
        source.push(el);
        if (el.children) {
          let childList = this.recursiveArray(el.children);
          source.push(...childList);
        }
      });
      return source;
    },
    // 获取事件分组
    getEventGroup() {
      this.statics.eventGroupTree = [];
      getEventGroup().then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            this.statics.eventGroupTree.push(resp.data.data.list);
          }
        },
        (error) => {
          this.$message.error("事件分组获取失败");
        }
      );
    },
    // 获取设备来源
    getAllDeviceType() {
      getAllDeviceType().then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            this.statics.device_type = resp.data.data.list;
          }
        },
        (error) => {
          this.$message.error("设备类型获取失败");
        }
      );
    },
    closeEventDetail() {
      this.eventDetailVisible = false;
    },
    // 判断奇数偶数
    checkNum(num) {
      let flag;
      if (num % 2 == 0) {
        flag = true;
      } else {
        flag = false;
      }
      return flag;
    },
    // 获取关键字字段
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.detailInfo[data[i].fieldNote];
        res.push({
          name: data[i].fieldName,
          key: data[i].fieldNote,
          value: geoCoord == undefined ? "" : geoCoord,
        });
      }
      return res;
    },
    getEventDetailInfo() {
      getEventDetailInfo(this.queryForm.indexId).then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            this.keyWordsList = resp.data.data;
            const list = this.convertData(this.keyWordsList);
            let descriptionObj = {};
            setTimeout(() => {
              this.tabledata = list.filter((item) => {
                return (
                  item.value != null &&
                  item.value != undefined &&
                  item.value != "" &&
                  item.key != "description"
                );
              });
              descriptionObj = list.find((item) => {
                return item.key == "description";
              });
              this.descriptionObj = JSON.parse(JSON.stringify(descriptionObj));

              this.eventDetailVisible = true;
            });
          }
        },
        (error) => {
          this.$message.error("关键字字段列表获取失败！");
        }
      );
    },
    // 根据选中的关键字字段 渲染查询条件
    myFilter(arr1, arr2) {
      var ret = [];
      for (let i = 0; i < arr2.length; i++) {
        const findEle = arr1.find((item) => item.fieldName == arr2[i]);
        findEle ? ret.push(findEle) : "";
      }
      return ret;
    },
    concat_arr(arr1, arr2) {
      const result = [];
      for (var i = 0; i < arr1.length; i++) {
        var obj = arr1[i];
        var num = obj.fieldNote;
        var flag = false;
        for (var j = 0; j < arr2.length; j++) {
          var aj = arr2[j];
          var n = aj.fieldNote;
          if (n != num || n == num) {
            flag = true;
            break;
          }
        }
        if (flag) {
          result.push(obj);
        }
      }
      return result;
    },
    // 关键字配置 -- 提交
    submitCfgKeyFields() {
      this.$refs["configForm"].validate((valid) => {
        if (valid) {
          let tempList = [];
          const tempColumns = [];
          const tempFormList = [];
          const differCondition = [];
          const differColumn = [];
          // 过滤出选中的关键字数组
          tempList = this.myFilter(
            this.statics.countType,
            this.keyFieldsQuery.keyFieldSelected
          );
          if (tempList.length == 0) {
            this.$message({
              message: "至少选择一个关键字段",
              type: "warning",
            });
          } else {
            for (let i = 0; i < this.keyword.length; i++) {
              // this.keyword[i].conditions = []//重置关键字配置数组
              this.logColumns = []; // 重置列表
              tempList.forEach((item) => {
                const obj = {};
                obj.fieldName = item.fieldName;
                obj.fieldNote = item.fieldNote;
                obj.field = item.fieldId;
                obj.itemCondition = null;
                obj.itemValue = this.treeSelectField[item.fieldNote] ? [] : "";
                tempFormList.push(obj);
              });
              // this.keyword[i].conditions = this.uniqueForm(this.keyword[i].conditions.concat(tempFormList))
              this.keyword[i].conditions = this.concat_arr(
                tempFormList,
                this.keyword[i].conditions
              );
            }
            // 表格列数据
            for (let i = 0; i < tempList.length; i++) {
              const obj = {};
              obj.label = tempList[i].fieldName;
              obj.prop = tempList[i].fieldNote;
              Object.assign(obj, this.columnConfig);
              tempColumns.push(obj);
            }
            this.logColumns = this.unique(this.logColumns.concat(tempColumns));
            this.keyFieldsConfigDL = false;
            this.keyFieldsSearch = "";
            this.selectedPolicyArray = [];
            if (this.logTypeList.length != 0) {
              // 选中的关键字 默认值为2
              // this.queryForm.indexId = 2;
              // this.getKeyFieldsData(2,'日志类型','indexId','select')
              this.commonChangeOptions(
                this.queryForm.indexId,
                "日志类型",
                "indexId",
                "select"
              );
            }
          }
        } else {
          return false;
        }
      });
    },
    // 选择当前行
    chooseCurrent(row) {
      this.currentClick = true;
      this.keyFieldsQuery.keyFieldSelected = [];
      this.selectedPolicyArray = [];
      this.queryForm.indexId = row.indexId;
      const keyFieldsSelected = row.eir.items[0].conditions;
      this.getKeyFieldsData(row.indexId, "日志类型", "indexId", "select");
      let indexObj = {};
      indexObj = this.logTypeList.find((item) => {
        return item.indexId === row.indexId;
      });
      this.queryForm.indexNote = indexObj.indexNote;
      this.keyword = row.eir.items;
      this.search();

      this.keyword[0].conditions.forEach((item) => {
        let obj = {};
        obj = this.statics.countType.find((m) => {
          return m.fieldNote == item.fieldNote;
        });
        this.$set(item, "fieldName", obj.fieldName);
        if (item.itemCondition != null && item.itemValue != null) {
          this.conditionKeywordSelect(item.itemCondition, item);
          this.conditionKeywordInput(item.itemValue, item);
        } else if (
          item.itemCondition != null &&
          (item.itemValue == null || item.itemValue == "")
        ) {
          this.$set(item, "itemCondition", null);
        } else {
          this.$set(item, "itemValue", "");
        }
      });
      keyFieldsSelected.forEach((item) => {
        this.keyFieldsQuery.keyFieldSelected.push(item.fieldName);
      });
      let tempList = [];
      const tempColumns = [];
      const tempFormList = [];
      // 过滤出选中的关键字数组
      tempList = this.myFilter(
        this.statics.countType,
        this.keyFieldsQuery.keyFieldSelected
      );
      // 表格列数据
      for (let i = 0; i < tempList.length; i++) {
        const obj = {};
        obj.label = tempList[i].fieldName;
        obj.prop = tempList[i].fieldNote;
        Object.assign(obj, this.columnConfig);
        tempColumns.push(obj);
      }
      this.logColumns = this.unique(this.logColumns.concat(tempColumns));
      this.configRecordDialog = false;
    },
    // 配置记录关闭按钮
    closeConfigRecord() {
      this.cfgRecordQuery.page.current = 1;
      this.configRecordDialog = false;
    },
    // 关键字配置
    clearKeyFieldsConfigDL() {
      this.keyFieldsQuery.keyFieldSelected = this.keyword[0].conditions.map(
        (el) => el.fieldName
      );
      this.isIndeterminate = !!this.keyFieldsQuery.keyFieldSelected.length;
      this.keyFieldsConfigDL = false;
    },
    handleCurrentChangeMain(current) {
      this.queryForm.page.current = current;
      this.search();
    },
    handleSizeChangeMain(size) {
      this.queryForm.page.size = size;
      this.search();
    },
    // 重置
    resetForm() {
      this.isShowForm = false;
      // this.$refs.form.resetFields();
      this.queryForm.page.current = 1;
      this.pageQuery.total = 0;
      this.pageQuery.current = 1;
      this.selectedPolicyArray = [];
      this.keyword[0].conditions = [];
      this.queryForm.eir.items = [];
      this.$set(this.queryForm, "indexId", null);
      this.queryForm.beginTime = "";
      this.queryForm.endTime = "";
      this.queryForm.indexNote = "";
      this.queryPeriod.periodTime = "";
      this.queryPeriod.periodType = "";
      this.queryForm.selectFiled = [];
      this.currentClick = false;

      // 关键字配置选中的id
      this.keyFieldsQuery.keyFieldSelected = [];
      this.cfgRecordQuery.logRetrievaRuleMap.indexId = null; // 配置记录
      // 清空列data和表格data
      this.logColumns = [];
      this.logTableData = [];
      // 清空事件分组
      this.selectedEventGroup = [];
      this.eventGroupFilterText = "";
      if (this.$refs["eventGroupTree"])
        this.$refs["eventGroupTree"][0].setCheckedKeys([]);
      this.getDefaultTime();
      setTimeout(() => {
        this.getLogTypeData();
      }, 500);
    },
    // 查询条件展开与收缩
    filterKeyFields() {
      this.isShowForm = !this.isShowForm;
    },
    // 增加选中数据项
    addConditionTags(isExit, obj) {
      if (!this.showIndex) {
        if (obj.prop === "indexId") {
          return;
        }
      }
      // console.log(obj)
      if (this.selectedPolicyArray.length == 0) {
        this.selectedPolicyArray.push(obj);
      } else {
        for (let i = 0; i < this.selectedPolicyArray.length; i++) {
          if (this.selectedPolicyArray[i].prop == obj.prop) {
            isExit = true;
            this.selectedPolicyArray[i].conditionLabel = obj.conditionLabel;
            this.selectedPolicyArray[i].value = obj.value;
            this.$set(this.selectedPolicyArray, i, obj);
            break;
          }
        }
        if (!isExit) {
          this.$set(
            this.selectedPolicyArray,
            this.selectedPolicyArray.length,
            obj
          );
        }
      }
    },
    handleClose(item, index) {
      this.selectedPolicyArray.splice(index, 1);
      for (const val in this.queryForm) {
        if (item.prop == val && item.type == "select") {
          this.$set(this.queryForm, val, null);
        } else if (item.type == "selectInput") {
          this.keyword[0].conditions.forEach((i, index) => {
            if (item.prop == i.fieldNote) {
              this.$set(
                this.keyword[0].conditions[index],
                "itemCondition",
                null
              );
              this.$set(
                this.keyword[0].conditions[index],
                "itemValue",
                this.treeSelectField[item.prop] ? [] : ""
              );
              if (i.fieldNote == "event_group") {
                this.selectedEventGroup = [];
                this.eventGroupFilterText = "";
                // 待定，后续改修改的时候看
                // this.$refs["eventGroupTree"][0].setCheckedKeys([]);
              } else if (this.treeSelectField[i.fieldNote]) {
                // this.$refs[i.fieldNote][0].filterText = "";
              }
            }
          });
        }
      }
      if (item.type == "treeSelect") {
        this.queryList.map((i) => {
          if (i.type == "treeSelect") {
            this.$refs[i.ref][0].setCheckedKeys([]); // 取消勾选节点
          }
        });
      }
      this.search();
    },
    conditionKeywordSelect(val, item) {
      if (
        item.fieldType == 3 &&
        Object.prototype.toString.call(item.itemValue) == "[object Array]"
      ) {
        let index = this.selectedPolicyArray.findIndex(
          (el) => el.prop == item.fieldNote
        );
        this.selectedPolicyArray[index].value = "";
        item.itemValue = "";
      }
      let valObj = {};
      const isExit = false;
      const obj = { label: "", prop: "", value: "", type: "selectInput" };
      valObj = this.statics.conditionType.find((item) => {
        return item.value === val;
      });
      if (valObj != undefined) {
        this.$set(item, "conditionLabel", valObj.label);
        // obj.label = item.fieldNote
        obj.label = item.fieldName;
        obj.prop = item.fieldNote;
        obj.conditionLabel = item.conditionLabel;
        obj.value = item.itemValue;
        if (obj.value != NaN) {
          this.addConditionTags(isExit, obj);
        }
      }
    },
    conditionKeywordInput(val, item) {
      const valObj = {};
      const isExit = false;
      const inputValue = "";
      const obj = { label: "", prop: "", value: "", type: "selectInput" };
      obj.label = item.fieldName;
      obj.prop = item.fieldNote;
      obj.conditionLabel = item.conditionLabel;
      obj.value = val;

      if (val != undefined && val != "") {
        this.addConditionTags(isExit, obj);
      } else {
        let index = this.selectedPolicyArray.findIndex(
          (el) => el.prop == obj.prop
        );
        if (index != -1) {
          this.selectedPolicyArray.splice(
            this.selectedPolicyArray.findIndex((el) => el.prop == obj.prop),
            1
          );
        }
      }
    },
    commonChangeOptions(val, label, prop, type) {
      const isExit = false;
      const obj = {
        label: "",
        prop: "",
        value: "",
        valueList: { dataId: "", dataName: "" },
      };
      obj.label = label; // 条件名
      obj.prop = prop; // 条件key
      obj.type = type; // 类型
      if (type == "select") {
        obj.value = val; // 选中值
        obj.multiple = false;
        let list = {};
        list = this.logTypeList.find((m) => {
          return m.indexId == val;
        });
        obj.valueList.dataId = list.indexId;
        obj.valueList.dataName = list.indexName;
      }
      this.addConditionTags(isExit, obj);
    },
    // input 输入框
    conditionInput(val, type, item) {
      this.commonChangeOptions(val, type, item);
    },
    handleCurrentChangeMain(current) {
      this.queryForm.page.current = current;
      this.search();
    },
    handleSizeChangeMain(size) {
      this.queryForm.page.size = size;
      this.search();
    },
    handleCurrentRowEvent(val) {
      // this.detailInfo = JSON.parse(JSON.stringify(val))
      // this.getEventDetailInfo()
      let path = `/asp/logAlarmDetail?indexId=${
        this.queryForm.indexId
      }&detailInfo=${encodeURIComponent(
        JSON.stringify(val).replace(/%/g, "%25")
      )}`;
      //window.open(path, '_blank')
      this.$router.push({ path: path });
    },
    // 获取默认时间
    getDefaultTime() {
      getDefaultTime().then((res) => {
        if (res.data.returnCode == "0") {
          this.changeDateTime(res.data.data);
        }
      });
    },
    // 获取日志类型
    getLogTypeData() {
      this.iotlogTypeList = [];
      getLogTypeList().then((resp) => {
        if (resp.data.returnCode == "0") {
          this.logTypeList = resp.data.data;
          this.iotlogTypeList = resp.data.data.filter((item) => {
            return (
              item.indexNote == "default" || item.indexNote == "default_new"
            );
          });
          if (this.$route.params.id) {
            var indexNum = parseInt(this.$route.params.id);
            this.queryForm.indexId = indexNum;
            this.showIndex = false;
            this.getKeyFieldsData(indexNum, "日志类型", "indexId", "select");
          } else if (this.logTypeList.length != 0) {
            // 选中的关键字 默认值为2
            this.showIndex = true;
            this.queryForm.indexId = 2;
            this.getKeyFieldsData(2, "日志类型", "indexId", "select");
          }
        }
      });
    },
    // 根据时间段类型触发默认时间
    changeDateTimeType(val) {
      if (val == "1000") {
        // 5
        this.changeDateTime(1000);
      } else if (val == "2000") {
        // 30
        this.changeDateTime(2000);
      } else if (val == "3000") {
        // 60
        this.changeDateTime(3000);
      } else if (val == "4000") {
        // 一天
        this.changeDateTime(4000);
      } else if (val == "5000") {
        // 自定义
        this.changeDateTime(5000);
      } else {
        this.isDefine = true;
        this.changeDateTime();
      }
    },
    // 默认时间
    changeDateTime(type) {
      if (typeof type == "number") {
        const start = new Date();
        const end = new Date();
        if (type == "1000") {
          start.setTime(end.getTime() - 60 * 5 * 1000);
          this.queryPeriod.periodTime = [start, end];
        } else if (type == "2000") {
          start.setTime(end.getTime() - 60 * 30 * 1000);
          this.queryPeriod.periodTime = [start, end];
        } else if (type == "3000") {
          start.setTime(end.getTime() - 60 * 60 * 1000);
          this.queryPeriod.periodTime = [start, end];
        } else if (type == "4000") {
          start.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          this.queryPeriod.periodTime = [start, end];
        } else if (type == "5000") {
          start.setTime(end.getTime() - 3600 * 1000 * 24 * 7);
          this.queryPeriod.periodTime = [start, end];
        } else {
          start.setTime(end.getTime() - 60 * 60 * 1000 * type);
          this.queryPeriod.periodTime = [start, end];
        }
        this.queryForm.beginTime = start.Format("yyyy-MM-dd hh:mm:ss");
        this.queryForm.endTime = end.Format("yyyy-MM-dd hh:mm:ss");
      } else {
        if (type != undefined) {
          this.queryForm.beginTime = type[0];
          this.queryForm.endTime = type[1];
        }
      }
      this.search();
    },
    // 根据日志类型获取关键字段信息
    getKeyFieldsData(IndexId, label, prop, type) {
      this.logColumns = [];
      this.currentClick = false;
      let indexObj = {};
      if (this.logTypeList.length != 0) {
        indexObj = this.logTypeList.find((item) => {
          return item.indexId === IndexId;
        });
      }
      if (indexObj != undefined) {
        this.queryForm.indexNote = indexObj.indexNote;
      }
      this.commonChangeOptions(IndexId, label, prop, type);
      getFieldList(IndexId).then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            let i = 0;
            let listLength = 0;
            const tempList = [];
            const tempFormList = [];
            const tempColumns = [];
            this.keyFieldsQuery.keyFieldSelected = [];
            var list = resp.data.data;
            listLength = list.length;
            this.statics.countType = [];
            this.statics.wordType = [];
            for (i = 0; i < listLength; i++) {
              const obj = list[i];
              if (obj.conditionFlag == "1") {
                this.statics.wordType.push(obj);
              }
              if (obj.dimensionsFlag == "1") {
                this.statics.countType.push(obj);
              }
              if (obj.selected == "1") {
                tempList.push(obj);
              }
            }
            if (this.currentClick == false) {
              var k = 0;
              if (tempList.length != 0) {
                tempList.forEach((item) => {
                  const obj = {};
                  const objColumn = {};
                  obj.fieldName = item.fieldName;
                  obj.fieldNote = item.fieldNote;
                  obj.field = item.fieldId;
                  obj.itemCondition = null;
                  obj.itemValue = this.treeSelectField[item.fieldNote]
                    ? []
                    : "";
                  obj.fieldType = item.fieldType;

                  if (
                    this.$route.query.eventId &&
                    item.fieldNote == "event_id" &&
                    this.firstLoad
                  ) {
                    obj.itemValue = this.$route.query.eventId;
                    obj.itemCondition = 1;
                    this.addConditionTags(false, {
                      label: "事件ID",
                      prop: "event_id",
                      conditionLabel: "等于",
                      value: this.$route.query.eventId,
                      type: "selectInput",
                    });
                    this.firstLoad = false;
                  }

                  tempFormList.push(obj);
                  this.keyword[0].conditions = this.uniqueForm(
                    this.keyword[0].conditions.concat(tempFormList)
                  );
                  objColumn.label = item.fieldName;
                  objColumn.prop = item.fieldNote;
                  Object.assign(objColumn, this.columnConfig);
                  tempColumns.push(objColumn);
                  k++;
                  this.logColumns = this.unique(
                    this.logColumns.concat(tempColumns)
                  );
                  this.keyFieldsQuery.keyFieldSelected.push(item.fieldName);
                });
                this.search();
              }
            }
          }
        },
        (error) => {
          this.$message.error(error.returnMsg);
        }
      );
      this.keyword[0].conditions = [];
    },
    // 判断表格列是否包含重复字段
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.prop) && res.set(arr.prop, 1));
    },
    uniqueForm(arr) {
      const res = new Map();
      return arr.filter(
        (arr) => !res.has(arr.fieldNote) && res.set(arr.fieldNote, 1)
      );
    },
    commonChangeOptions(val, label, prop, type) {
      const isExit = false;
      const obj = {
        label: "",
        prop: "",
        value: "",
        valueList: { dataId: "", dataName: "" },
      };
      obj.label = label; // 条件名
      obj.prop = prop; // 条件key
      obj.type = type; // 类型
      if (type == "select") {
        obj.value = val; // 选中值
        obj.multiple = false;
        let list = {};
        list = this.logTypeList.find((m) => {
          return m.indexId == val;
        });
        obj.valueList.dataId = list.indexId;
        obj.valueList.dataName = list.indexName;
      }
      this.addConditionTags(isExit, obj);
    },
    // 导出
    exportOper() {
      this.queryForm.selectFiled = [];
      if (this.logColumns.length > 0) {
        for (let i = 0; i < this.logColumns.length; i++) {
          const obj = {};
          const item = this.logColumns[i];
          obj.fieldNote = item.prop;
          obj.fieldName = item.label;
          this.queryForm.selectFiled.push(obj);
        }
        let indexObj = {};
        indexObj = this.logTypeList.find((item) => {
          return item.indexId === this.queryForm.indexId;
        });
        if (indexObj != undefined) {
          this.queryForm.indexId = indexObj.indexId;
          this.queryForm.indexNote = indexObj.indexNote;
        } else {
          this.queryForm.indexId = null;
          this.queryForm.indexNote = "";
        }
        exportListData(this.queryForm).then(
          (resp) => {
            if (resp.data.returnCode == "0") {
              this.$store.dispatch("beginRefresh");
              this.$message.success(
                "已加入离线任务队列，请在离线任务栏进行查看"
              );
            }
          },
          (error) => {
            this.$message.error(error.returnMsg);
          }
        );
      } else {
        this.$message.warning("请先配置关键字");
        return false;
      }
    },
    // 获取柱状图图表参数
    getBarChartData() {
      let indexObj = {};
      indexObj = this.logTypeList.find((item) => {
        return item.indexId === this.queryForm.indexId;
      });
      if (indexObj != undefined) {
        this.queryForm.indexId = indexObj.indexId;
        this.queryForm.indexNote = indexObj.indexNote;
      } else {
        this.queryForm.indexId = null;
        this.queryForm.indexNote = "";
      }
      getChartData(this.queryForm).then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            this.chartResultInfo = resp.data.data.auditTaskName;
            if (resp.data.data.chartData != null) {
              this.option.xAxis[0].data = resp.data.data.chartData.xAxisData;
              if (
                resp.data.data.chartData &&
                resp.data.data.chartData.yAxisDataList
              ) {
                this.option.series = []
                resp.data.data.chartData.yAxisDataList.forEach((item) => {
                  this.option.series.push({
                    name: item.name,
                    type: "bar",
                    stack: item.name,
                    data: item.data,
                    // barWidth: "5%",
                    barMaxWidth: 50,
                    label: {
                      show: true,
                      position: "outside",
                    },
                    itemStyle: {
                      normal: {
                        color: {
                          type: "linear",
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0,
                              color: "#418DFF",
                            },
                            {
                              offset: 1,
                              color: "#C5DEFF",
                            },
                          ],
                          globalCoord: false,
                        },
                      },
                    },
                  });
                });
              }
              // this.option.dataZoom[1].height = 25
              this.$set(this.chartQuery, "chartData", resp.data.data.chartData);
            }
          }
        },
        (error) => {
          this.$message.error(error.returnMsg);
        }
      );
    },
    // 关键字配置 - 弹窗
    cfgKeyFieldOper() {
      if (this.queryForm.indexId != null) {
        if (
          this.keyFieldsQuery.keyFieldSelected.length ==
          this.filterWordType.length
        ) {
          this.keyFieldsCheckAll = true;
          this.isIndeterminate = false;
        }
        this.keyFieldsConfigDL = true;
      } else {
        this.$message.warning("请先选择日志类型！");
      }
    },
    // 保存配置
    saveOper() {
      for (let i = 0; i < this.keyword.length; i++) {
        if (this.keyword[i].conditions.length != 0) {
          const obj = this.keyword[i].conditions.find(
            (item) => item.itemCondition != null && item.itemValue != ""
          );
          if (obj == undefined) {
            this.$message.warning("请至少完整填写一项关键字信息！");
            setTimeout(() => {
              this.$refs.searchBox.$el.click();
            }, 10);
            return false;
          } else {
            this.definePolicyName();
          }
        } else {
          this.$message.warning("请先配置关键字！");
        }
      }
    },
    // 保存策略->1、输入名称
    definePolicyName() {
      this.$prompt("请输入你要保存的策略名称", "提示", {
        confirmButtonText: "保存",
        cancelButtonText: "关闭",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        inputErrorMessage: "请输入策略名称",
        inputValidator: (value) => {
          if (value.trim().length < 1) {
            return "策略名称不能为空";
          }
        },
        beforeClose: (action, instance, done) => {
          if (action == "confirm") {
            const value = instance.inputValue;
            if (value && value != "") {
              let keyword = JSON.parse(JSON.stringify(this.keyword));
              keyword[0].conditions.forEach((el) => {
                if (this.treeSelectField[el.fieldNote])
                  el.itemValue = el.itemValue.join();
              });
              this.saveQuery.eir.items = keyword;
              this.saveQuery.ruleName = value;
              this.saveQuery.indexId = this.queryForm.indexId;
              saveRuleConfig(this.saveQuery).then(
                (resp) => {
                  if (resp.data.returnCode == "0") {
                    this.$message.success("保存记录成功");
                    done();
                  }
                },
                (error) => {
                  this.$message.error(error.returnMsg);
                }
              );
            } else {
              this.$notify({
                type: "error",
                message: "请输入名称",
                duration: 2000,
              });
            }
          } else {
            done();
          }
        },
      });
    },
    // 查询
    search() {
      this.queryForm.eir.items = JSON.parse(JSON.stringify(this.keyword));
      this.queryForm.eir.items[0].conditions.forEach((el) => {
        if (this.treeSelectField[el.fieldNote]) {
          if (Object.prototype.toString.call(el.itemValue) == "[object Array]")
            el.itemValue = el.itemValue.join("");
        }
      });
      // 获取列表
      this.isShowForm = false;
      this.loading = true;
      if (this.queryForm.eir.items[0].conditions.length == 0) {
        this.loading = false;
      } else {
        getListData(this.queryForm).then(
          (resp) => {
            if (resp.data.returnCode == "0") {
              if (resp.data.data != null) {
                this.logTableData = resp.data.data.list;
                this.pageQuery.currentPage = resp.data.data.page.current;
                this.pageQuery.total = resp.data.data.page.total;
                this.pageQuery.size = resp.data.data.page.size;
              }
              this.loading = false;
            } else {
              this.loading = false;
            }
          },
          (error) => {
            this.loading = false;
            this.$message.error(error.returnMsg || '');
          }
        );
      }
      // 获取图表
      this.getBarChartData();
    },
    searchClick() {
      this.search();
    },
    // 查询搜索记录
    searchRecord() {
      this.searchRecordList = [];
      querySearchRecord(this.querySearch).then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            this.searchRecordList = resp.data.data.list;
          }
        },
        (error) => {
          this.$message.error(error.returnMsg);
        }
      );
    },
    searchRecordBack(temp) {
      this.selectedPolicyArray = [];
      temp.searchParam.eir.items[0].conditions.forEach((el) => {
        if (this.treeSelectField[el.fieldNote]) {
          if (
            Object.prototype.toString.call(el.itemValue) == "[object String]"
          ) {
            if (el.itemValue == "") {
              el.itemValue = [];
            } else {
              el.itemValue = el.itemValue.split();
            }
          }
        }
      });
      this.keyword = JSON.parse(JSON.stringify(temp.searchParam.eir.items));
      this.commonChangeOptions(
        temp.searchParam.indexId,
        "日志类型",
        "indexId",
        "select"
      );
      this.keyword[0].conditions.forEach((item) => {
        this.conditionKeywordSelect(item.itemCondition, item);
      });
      this.queryForm = JSON.parse(JSON.stringify(temp.searchParam));
      this.queryPeriod.periodTime = [
        this.queryForm.beginTime,
        this.queryForm.endTime,
      ];
      this.queryForm.indexId = temp.searchParam.indexId;
      this.search();
    },
    // 配置记录
    configRecord() {
      this.cfgRecordQuery.logRetrievaRuleMap.indexId = this.queryForm.indexId;
      this.isShowForm = false;
      this.tableLoading = true;
      searchRuleConfig(this.cfgRecordQuery).then(
        (resp) => {
          if (resp.data.returnCode == "0") {
            this.cfgRecordData = resp.data.data.list;
            this.pageCfg.size = resp.data.data.page.size;
            this.pageCfg.current = resp.data.data.page.current;
            this.pageCfg.total = resp.data.data.page.total;
            this.configRecordDialog = true;
            this.tableLoading = false;
          }
          this.loading = false;
        },
        (error) => {
          this.tableLoading = false;
          this.$message.error(error.returnMsg);
        }
      );
    },
    handleCurrentCfgRChange(current) {
      this.cfgRecordQuery.page.current = current;
      this.configRecord();
    },
    ruleDel(row) {
      this.deleteData.ids = [];
      this.deleteData.ids.push(row.ruleId);
      this.confirmDel();
    },
    // 删除前确认
    confirmDel() {
      this.$confirm("是否确定删除当前查询策略?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handledel();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handledel() {
      delRuleConfig(this.deleteData).then((rep) => {
        if (rep.data.returnCode == "0") {
          this.deleteData.ids = [];
          this.cfgRecordQuery.page.current = 1;
          this.configRecord();
          this.$message.success("策略规则删除成功！");
        }
      });
    },
  },
  created() {
    this.$nextTick(() => this.setTableEmptyWidth())
    let resizeFn = this.$util.debounce(this.setTableEmptyWidth, 100)
    window.addEventListener('resize', resizeFn)
    this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', resizeFn))
    this.getAllDeviceType();
    this.getEventGroup();
    this.getBusinessTree();
    this.$store.dispatch("alarm/getAllAlarmStaticList");
    // 时间处理
    this.getLogTypeData();
    Date.prototype.Format = function (fmt) {
      // author: meizz
      var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        S: this.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      }
      return fmt;
    };
    this.keyword[0].conditions = [];
    this.selectedPolicyArray = [];
    this.logColumns = [];
    this.queryPeriod.periodType = "";
    this.currentClick = false;
    // this.changeDateTime(5)

    let timestamp = Date.now();
    var startDate = new Date(timestamp - 1000 * 60 * 60 * 24 * 30);
    this.queryPeriod.periodTime = [startDate, new Date()];
    // if (this.$route.query.timestamp) {
    //   // 根据毫秒数构建 Date 对象
    //   var timestamp = this.$route.query.timestamp;
    //   var startDate = new Date(timestamp - 1000 * 60 * 60 * 30);
    //   var endDate = new Date(startDate.getTime() + 1000 * 60 * 60 * 3 * 2);
    //   this.queryPeriod.periodTime = [startDate, endDate];
    // } else {
    //   this.getDefaultTime();
    // }
    this.keyFieldsQuery.keyFieldSelected = [];
    this.pageQuery.total = 0;
    this.pageQuery.current = 1;
    this.queryForm.page.current = 1;
    this.chartResultInfo = "";
    this.chartQuery.chartData = {};
  },
};
</script>

<style lang="scss" scoped>
.logRetrival {
  .rightBtns {
    display: flex;
    justify-content: flex-end;
    .searchBtns ::v-deep i {
      font-size: 14px;
      color: #888888;
    }
  }
  &__title {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    position: relative;
    padding-left: 9px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 3px;
      height: 13px;
      background: #4c8ae8;
    }
  }
  &__download {
    width: 14px;
    height: 18px;
    margin-right: 34px;
    cursor: pointer;
  }
  &__chartInfo {
    display: flex;
    width: 194px;
    height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    position: relative;
    & > img {
      width: 100%;
      height: 100%;
    }
    & > span {
      position: absolute;
      top: 58%;
      left: 58%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }
  }
  .logRetrival__barChart {
    height: 233px;
    border-bottom: 10px solid #e6e9f0;
    & > div {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 8px;
    }
    &__header {
      margin-bottom: 10px;
      .logRetrival__title {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    &__content {
      height: 100%;
    }
  }
  .noData {
    position: relative;
    text-align: center;
    &--text {
      position: absolute;
      color: #838383;
      font-weight: 500;
      font-size: 12px;
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%);
    }
    img {
      height: 159px;
      width: 200px;
    }
  }
}
</style>

<style lang="scss">
.searchRecordPopper {
  padding: 6px 12px;
  .searchRecord__list {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    &__item {
      line-height: 27px;
      color: #606266;
      cursor: pointer;
      &:hover {
        color: #61bbff;
      }
    }
  }
}
</style>