<!--  -->
<template>
  <div class="seek_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="seek_head">
      <div class="returnA_img" @click="Fanhui()">
        <img src="../../assets/image/returnA.png" alt class="seek_head_returnA_img" />
      </div>

      <div class="seek_head_ipt_div">
        <input type="text" v-model="seekData" class="seek_head_ipt" />
      </div>

      <div class="seek_head_sousuo" @click="seekaxios()">
        <img src="../../assets/image/seek.png" alt class="seek_head_sousuo_img" />
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="history_box">
      <div class="history_box_div">
        <div class="history_box_history">历史记录</div>
        <img @click="del()" src="../../assets/image/del.png" alt class="history_del" />
      </div>

      <!-- 渲染text -->
      <div class="history_box_divA_box" v-if="nodataShow">
        <div
          v-for="(item, index) in showList"
          :key="index"
          class="history_box_divA"
          @click="listData($event)"
        >
          <div class="history_text_div">
            <img src="../../assets/image/time_2.png" alt class="history_text_div_img" />
            <div class="history_text">{{ item.name }}</div>
            <!-- <img src="../../assets/image/del_5.png" alt="" class="history_text_div_imgA"> -->
          </div>
        </div>
        <!-- 点击展开收起 -->
        <div @click="showAll = !showAll" class="show-more">{{word}}</div>
      </div>

      <!-- 暂无数据 -->
      <div class="history_box_divA_box_nodata" v-else>
        <p class="history_box_divA_box_nodata_txt">暂无历史记录</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "seek",
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      seekData: "",
      resultData: [], //历史记录后端传来的数据
      nodataShow: true, //历史记录隐藏显示
      showAll: false //标记数据是否需要完全显示的属性
    };
  },
  //监听属性 类似于data概念
  computed: {
    showList: function() {
      if (this.showAll == false) {
        //当数据不需要完全显示的时候
        var showList = []; //定义一个空数组
        if (this.resultData.length > 3) {
          //这里我们先显示前三个
          for (var i = 0; i < 3; i++) {
            showList.push(this.resultData[i]);
          }
        } else {
          showList = this.resultData;
          console.log();
        }
        return showList; //返回当前数组
      } else {
        return this.resultData;
      }
    },

    word: function() {
      if (this.showAll == false) {
        //对文字进行处理
        return "点击展开▼";
      } else {
        return "点击收起▲";
      }
    }
  },
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
    seekData(val) {
     this.seekData = this.seekData.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, "");
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回到home页面
    Fanhui() {
      let _this = this;
      //判断是从首页还是知识库进入的
      if (localStorage.getItem("homeSeek") !== null) {
        //首页进入
        _this.$router.push("/home");
        localStorage.removeItem("homeSeek");
      } else {
        //知识库进入
        _this.$router.push("/repository");
      }
      localStorage.removeItem("seek_name");
    },

    // 点击搜索并请求后端
    seekaxios() {
      let _this = this;
      //搜索前判断input框是否为空
      if (_this.seekData === "") {
        this.$notify({
          title: "警告",
          message: "搜索项不能为空！！",
          type: "warning",
          duration: 1000
        });
      } else if (_this.seekData !== "") {
        _this.$router.push("/seek_data");
        localStorage.setItem("seekName", _this.seekData);
        location.reload();
      }
    },

    // 点击历史记录获取到值
    listData(e) {
      let _this = this;
      if (e.target.className === "history_text") {
        _this.seekData = e.target.innerHTML;
        localStorage.setItem("seek_name", e.target.innerHTML);
      }
    },

    //点击删除历史记录
    del() {
      let _this = this;
      _this
        .$axios({
          method: "get",
          url: "bigservers/del_history"
        })
        .then(res => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000
          });
          const timer = setInterval(() => {
            location.reload();
          }, 1000);
        })
        .catch(error => {
          this.$message({
            message: "删除失败",
            type: "error",
            duration: 1000
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
    let _this = this;
    _this
      .$axios({
        method: "get",
        url: "bigservers/see_record",
        params: {
          page: "1"
        }
      })
      .then(res => {
        if (res.data.length !== 0) {
          _this.resultData = res.data;
          _this.nodataShow = true;
        } else {
          _this.nodataShow = false;
        }
      })
      .catch(error => {
        alert("失败");
      });
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/seek.scss";
@import "../../assets/scss/bus.scss";
</style>