<template>
  <div class="about">
    <HeaderInfo style="height: 5.65vw;float: left;"></HeaderInfo>
    <leftInfo style="width: 5vw;position: absolute;top: 5.4vw;" :leftNum="1" :zhedie="zhedie" v-if="zhedie==0"
              @show="isZhe"></leftInfo>
    <div v-if="zhedie==0" @click="this.zhedie = 1"
         style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius:  0 50% 50% 0;z-index: 1000;bottom:45%;left:5vw;">
      <img src="../assets/img2/close2.png" style="width: 60%;object-fit: contain;">
    </div>
    <div v-if="zhedie==1" @click="menuOpen"
         style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius:  0 50% 50% 0;z-index: 1000;bottom:49%;left:0vw;">
      <img src="../assets/img2/open2.png" style="width: 60%;object-fit: contain;margin-top: 1.8vw;">
    </div>
    <div class="rightInfo">
      <div class="searchInfo">
        <input class="input" @keyup.enter="goSearch" v-model="searchWord" placeholder="请输入要检索的关键字"/>

        <div class="searchQuan" @click="goSearch"  style="cursor: pointer;">
          <img
              src="../assets/img2/search.png"
              style="height: 100%;object-fit: contain;"
              alt=""
          />
        </div>

      </div>
      <div class="historyInfo" style="cursor: pointer;">
        <div class="lsjl">
          <div style="width: 15%;height: 15%;float: left;margin-top:2%;">
            <img src="../assets/img2/his.png" style="height: 100%;width: 100%;object-fit: contain;">
          </div>
          <div style="float: left;margin-left: 8%;margin-top: 0.5%;">
            历史记录
          </div>

        </div>
        <div class="lsjlInfo">
          <div class="oneInfo" v-for="item in lsList" :key="item">
            <div @click="goSearch1(item)">{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="historyInfo" style="margin-top: 2vw;cursor: pointer;">
        <div class="lsjl1">
          <div style="width: 15%;height: 15%;float: left;margin-top:2%;">
            <img src="../assets/img2/fire.png" style="height: 90%;width: 90%;object-fit: contain;">
          </div>
          <div style="float: left;margin-left: 8%;margin-top: 0.5%;color: red !important;">
            热门检索
          </div>

        </div>
        <div class="lsjlInfo">
          <div class="oneInfo" v-for="item in rmList" :key="item">
            <div @click="goSearch1(item)">{{ item }}</div>
          </div>
        </div>
      </div>



    </div>

  </div>
</template>
<script>
import HeaderInfo from '../components/UseAll/headerInfo'
import leftInfo from "../components/UseAll/leftInfo";
import {getAllHistory,getAllHistory1} from "../api/api/doc";
import {Button} from "view-ui-plus";
import {Plus} from '@element-plus/icons-vue'
// import type { UploadFile } from 'element-plus'
export default {
  components: {
    HeaderInfo,
    leftInfo,
    Plus,

  },
  data() {
    return {
      imageUrl:"",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: true,
      type: 'word',
      fileList: [],
      lsList: [],
      rmList:[],
      isLogin: false,
      isShow: false,
      isRes: false,
      searchWord: '',
      userNameInfo: "",
      isLoginShow: false,
      zhedie: 0,
      searchWord1: '',
    };
  },
  methods: {
    openPhoto() {
      if (this.type != "photo") {
        this.type = "photo";
      } else {
        this.type = "word";
      }
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('文件上传成功');
      console.log(response.originalFilename);
      this.imageUrl = response.url;
      this.searchWord1 = response.originalFilename.split(".")[0];
    },
    handleRemove() {
      this.imageUrl = '';
      this.searchWord1 = '';
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    isZhe(zhedie) {
      this.zhedie = zhedie;
    },
    menuOpen() {
      this.zhedie = 0;
    },
    goGraph() {
      this.$router.push('/graphPage');
    },
    goZc() {
      this.$router.push('/battlefield');
    },
    goAnswer() {
      this.$router.push('/Answer');
    },
    golist() {
      this.$router.push('/list');
    },
    goChat() {
      this.$router.push('/intelligentQA');
    },
    loginOut() {
      localStorage.clear();
      location.reload();
    },
    goSearch() {
      this.$router.push({name: 'docList', query: {word: this.searchWord}});
    },
    goSearchPhoto() {
      this.$router.push({name: 'docList', query: {word: this.searchWord1}});
    },
    goSearch1(item) {
      this.$router.push({name: 'docList', query: {word: item}});
    },

    getInfoInit() {
      if (localStorage.getItem("userName") != null && localStorage.getItem("userName") != "") {
        this.isLoginShow = true;
        this.userNameInfo = localStorage.getItem("userName");
        getAllHistory().then((res) => {
          if (res.code == 500) {
            // localStorage.clear();
            // location.reload();
          } else {
            this.lsList = [];
            for (let i = 0; i < res.length; i++) {
              this.lsList.push(res[i].history);
            }
          }
        })

        getAllHistory1().then((res) => {
          if (res.code == 500) {
            // localStorage.clear();
            // location.reload();
          } else {
            this.rmList = [];
            for (let i = 0; i < res.length; i++) {
              this.rmList.push(res[i].history);
            }
          }
        })
      }
    }
  },
  mounted() {
    this.getInfoInit();
  }
};
// import vHeader from "../components/Header";
// export default {
//     components: {
//         vHeader,
//     },
// };
</script>
<style scoped>


.about {
  width: 100%;
  height: 100%;
  /*background: url('../assets/img2/test.jpg') no-repeat;*/
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  /*background-color: #464646;*/
  position: relative;
  background-color: #f3f7ff;
}

.rightInfo {
  width: 95%;
  height: 100%;
  float: left;
  left: 5%;
  top: 5.4vw;
  background-color: #f3f7ff;
  position: absolute;
}

.input {
  width: 55%;
  margin-left: 18%;
  margin-top: 2.5%;
  height: 3.5vw;
  border-radius: 2vw;
  background-color: rgba(255, 255, 255, 0.65);
  border: 2px solid #0776ff;
  text-indent: 1vw;
  font-size: 1.2vw;
}

.searchInfo {
  margin-top: 14%;
  margin-left: 5%;
  position: relative;
}

.input::placeholder {
  height: 3.5vw;
  line-height: 3.5vw;
  font-size: 1vw;
  padding-left: 1vw;
  color: #9e9e9e;
}

.searchQuan {
  width: 3vw;
  height: 3vw;

  position: absolute;
  right: 20%;
  top: 40%;
  left: 74%;
}

.historyInfo {
  width: 70%;
  margin-top: 1%;
  margin-left: 22.5%;
  font-size: 1vw;
}

.lsjl {
  width: 10%;
  background: #006aed;
  -webkit-background-clip: text;
  font-weight: 500;
  -webkit-text-fill-color: transparent;
  float: left;
}
.lsjl1 {
  width: 10%;
  background: #fa441c;
  -webkit-background-clip: text;
  font-weight: 500;
  -webkit-text-fill-color: transparent;
  float: left;
}

.lsjlInfo {
  display: flex;
  flex-direction: row;
  justify-items: left;
  text-align: left;
  color: #414141;
}

.oneInfo {
  margin-left: 1.5%;
}

</style>
<style>
.el-upload__input{
  display: none;
}
.el-upload-list__item-delete svg{
  width: 41%;
  position: absolute;
  left: 52%;
  top: 50%;
  color: #ffffff;
}
.el-upload-list__item-thumbnail{
  width: 7.5vw;
  height: 7.5vw;
}
.el-icon--close{
  display: none;
}
.el-icon--check{
  display: none;
}
.el-icon--close-tip{
  display: none;
}
.el-icon--zoom-in{
  display: none;
}
</style>

