<template>
  <div>
    <div class="search-box">
      <div class="search-input">
        <el-row>
          <el-col>
            <el-form>
              <el-form-item :label="attribute.title">
                <el-input
                  v-model="search.operatorChn"
                  style="width: 70%"
                  clearable
                  size="small"
                  :placeholder="attribute.placeholder"
                  @focus="initPage"
                  @blur="handleBlur"
                />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div v-if="searches_list.length">
              <div :class="isFocus ? 'historynone' : 'history-panel'">
                <div>
                  <ul class="his_ulcon">
                    <li
                      v-for="(item, index) in searches_list"
                      :key="index"
                      class="font-12"
                      @click="historysearch(item)"
                    >
                      {{ item }}
                    </li>
                  </ul>
                </div>
                <p class="font-12 cursor-pointer" @click.stop="clearhis">
                  清空历史记录
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="search">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="searchClick(1)"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="info"
          icon="el-icon-refresh"
          @click="searchClick(2)"
          >重置</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { saveSearch } from "@/utils/cache"; // 引用本地存储js
import storage from "good-storage"; // 引入good-storage包
export default {
  data() {
    return {
      isFocus: true,
      searches_list: [],
      blurType: false,
    };
  },
  props: {
    attribute: {
      type: Object,
      default: () => {},
    },
    search: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    document.onclick = () => {
      if (this.blurType) {
        this.isFocus = true;
      }
    };
  },
  methods: {
    searchClick(val) {
      const searchVal = this.search.operatorChn;
      if (val === 1 && searchVal !== "") {
        saveSearch(searchVal, this.attribute.onlyVal);
      }
      this.isFocus = true;
      this.$emit("search", val,searchVal);
    },
    //  鼠标获取焦点时
    initPage() {
      this.isFocus = false;
      this.blurType = false;
      this.searches_list = [];
      const searches = storage.get(this.attribute.onlyVal);
      this.searches_list = searches || [];
    },
    // 记录失去焦点
    handleBlur() {
      this.blurType = true;
    },
    // 清空历史记录
    clearhis() {
      storage.remove(this.attribute.onlyVal);
      this.searchClick(2);
      this.searches_list = [];
    },
    historysearch(item) {
      // 给获取到的历史记录展示
      this.$emit("searchHistroy", item);
      saveSearch(item, this.attribute.onlyVal);
      this.isFocus = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.historynone {
  border: none;
  display: none;
}
.history-panel {
  width: 70%;
  margin-left: 53px;
  border: 1px solid #5178dc;
  border-top: 1px solid #dcdfe6;
  border-radius: 4px;
  ul {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 5px;
    margin-top: 0;
    li {
      display: inline-block;
      list-style: none;
      cursor: pointer;
      height: 24px;
      line-height: 24px;
      padding-left: 14px;
    }
    li:hover {
      background-color: #f5f5f6;
      color: #4e6ef2;
    }
  }
}
.font-12 {
  font-size: 12px;
}
.cursor-pointer {
  cursor: pointer;
  text-align: center;
}
::v-deep .el-form-item {
  margin: 0;
}
// ::v-deep.el-input__inner:hover {
//   border-bottom: 1px solid #c0c4cc !important;
// }
// ::v-deep.el-input__inner:focus {
//   border-bottom: 1px solid transparent !important;
// }
.search-box {
  display: flex;
}
.search-input {
  width: 25%;
}
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-input--small .el-input__inner {
  height: 36px;
  line-height: 36px;
}
</style>
