<template>
  <div style="height:100%;width:80%;margin:0 auto;">
    <div>
      <div>
        <carousel></carousel>
      </div>
        <div class="imgDiv">
          <img class="logo" src="@/assets/logo-3.png" alt="">
        </div>
      <div class="home_search">
        <el-input :placeholder="getPlaceholder()" v-model="queryParams.content" class="input-with-select">
          <el-select v-model="queryParams.select" slot="prepend" placeholder="请选择" style="width:100px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <div :style="{'margin-top':margin_top}">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="事件" name="event">
          <div style="background:white;padding:10px 0 20px;">
            <QuestionTable @checkVisual="checkVisual" :show="true"></QuestionTable>
          </div>
        </el-tab-pane>
        <el-tab-pane label="专题库" name="workspace">
          <div style="background:white;padding:10px 0 20px;">
            <Project @checkVisual="checkVisual" :show="true"></Project>
          </div>
        </el-tab-pane>
        <el-tab-pane label="报告" name="report">
          <div style="background:white;padding:10px 0 20px;">
            <Report @checkVisual="checkVisual" :show="true"></Report>
          </div>
          
        </el-tab-pane>
      </el-tabs>
    </div>

    <visualDialog ref="visualDialog"></visualDialog>
  </div>
</template>

<script>
// import Project from './components/project.vue'
import Project from '@/views/visual/components/drawer/components/project.vue';
import Report from '@/views/visual/components/drawer/components/report.vue';
// import Report from './components/report.vue'
import QuestionTable from "@/views/questionEvent/components/questionIndex.vue";
import visualDialog from './components/visualDialog.vue'
import { openVisual } from './components/mixins';

import carousel from './components/carousel.vue'
export default {
  components: {
    Project,
    Report,
    visualDialog,
    carousel,
    QuestionTable
  },
  props: {},
  mixins:[openVisual],
  data() {
    return {
      show:false,
      margin_top:'0px',
      activeName:'event',
      options:[
        {
          label:'专题库',
          value:'Workspace',
          placeholder:'请输入专题库名称'
        },
        {
          label:'专利',
          value:'patentNo',
          placeholder:'请输入专利'
        },
        {
          label:'产品',
          value:'Product',
          placeholder:'请输入产品名称'
        },
        {
          label:'事件',
          value:'QuestionEvent',
          placeholder:'请输入事件名称'
        },
        {
          label:'报告',
          value:'AllReport',
          placeholder:'请输入报告名称'
        },
      ],
      
      queryParams:{
        content:'',
        select:''
      },
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    document.getElementsByClassName('el-main')[0].addEventListener("scroll", this.handleScroll)
  },
  methods: {
    //监听滚动条的位置
    handleScroll(){
      let demo = document.querySelector('.home_search')
      const scrollTop = document.getElementsByClassName('el-main')[0].scrollTop
      if(scrollTop >= 250 && !this.show) {
        this.show =  true
          demo.classList.add('fixHeader')
          this.margin_top = '70px'
      } else if(scrollTop < 250 && this.show){
        this.show =  false
          demo.classList.remove('fixHeader')
          this.margin_top = '0px'
      }
      // console.log('滚动条位置:', scrollTop);
    },
    //切换tag
    handleClick(){},
    //获取提示信息
    getPlaceholder(){
      if(this.queryParams.select){
        var a = this.options.find(item=>{
          return item.value == this.queryParams.select
        }).placeholder
      }else{
        var a = '请输入内容'
      }
      return a
    },
    //查询
    search(){
      if(!this.queryParams.select){
        this.$message.error('请选择需要检索的信息')
        return false
      }
      localStorage.searchContent = this.queryParams.content
      this.$router.push({
        name:this.queryParams.select,
      })
      setTimeout(function () {
        localStorage.searchContent = ''
      }, 1000);
    },
  },
};
</script>
<style lang="scss">
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .fixHeader{
    .input-with-select{
      // min-width: 654px;
      width: 50%;
      // margin-left:20px;
    }
  }
</style>
<style lang="scss" scoped>
.small{
  color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}
.fixHeader{
  width:100% !important;
  height: 50px;
  background: white;
  max-height: 50px;
  position: fixed;
  top:40px;
  left:0;
  right:0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  margin:0 auto;
  // .logo1{
  //   // width:100px;
  //   height: 40px;
  //   margin-right:20px;
  // }
}
.home_search{
  
  min-width: 654px;
  width: 50%;
  height: 50px;
  // min-height: 50px;
  // max-height: 510px;
  // position:absolute;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  margin:20px auto;
 
}
.imgDiv{
  display: flex;
  justify-content: center;
  margin-bottom:10px;
 
}
 .logo{
    width:100px;
  }
</style>