<template>
  <div class="main" ref="main">
    <el-container ref="boxContainer">
      <div class="header" ref="header">
        <el-input
          placeholder="请输入内容"
          v-model="value"
          class="input-with-select"
          clearable
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"
            >搜索</el-button
          >
        </el-input>
      </div>
      <div class="content" ref="content">
        <div class="content-search fixed" v-if="isFixed">
          <el-input
            placeholder="请输入内容"
            v-model="value"
            class="input-select"
            clearable
          >
            <el-button slot="append" icon="el-icon-search">搜索</el-button>
          </el-input>
        </div>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          v-loading="loading"
        >
          <el-tab-pane label="全部" name="first">
            <All
              :value="value"
              :data="data"
              @handleCommand="handleCommand"
              @handleTime="handleTime"
              @handleClear="handleClear"
              @handleDetial="handleDetial"
              v-if="data.length !== 0"
            />
            <!-- 分页 -->
            <Pagination
              :pageResult="pageResult"
              @handleCurrentChange="handleCurrentChange"
              @handleSizeChange="handleSizeChange"
              v-if="data.length !== 0"
            />
            <el-empty v-else :image-size="200"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="项目信息" name="second">
            <Data
              :value="value"
              :data="data"
              @handleCommand="handleCommand"
              @handleTime="handleTime"
              @handleClear="handleClear"
              @handleDetial="handleDetial"
              v-if="data.length !== 0"
            />
            <!-- 分页 -->
            <Pagination
              :pageResult="pageResult"
              @handleCurrentChange="handleCurrentChange"
              @handleSizeChange="handleSizeChange"
              v-if="data.length !== 0"
            />
            <el-empty v-else :image-size="200"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="项目文件" name="third">
            <File
              :value="value"
              :data="data"
              @handleCommand="handleCommand"
              @handleTime="handleTime"
              @handleClear="handleClear"
              @handleDetial="handleDetial"
              v-if="data.length !== 0"
            />
            <!-- 分页 -->
            <Pagination
              :pageResult="pageResult"
              @handleCurrentChange="handleCurrentChange"
              @handleSizeChange="handleSizeChange"
              v-if="data.length !== 0"
            />
            <el-empty v-else :image-size="200"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-container>
    <!-- 回到顶部按钮 -->
    <div class="goTop" @click="handleGoTop" v-if="isFixed">
      <i class="el-icon-caret-top"></i>
    </div>
  </div>
</template>
<script>
import All from '@/views/searchPage/All.vue'
import Data from '@/views/searchPage/Data.vue'
import File from '@/views/searchPage/File.vue'
import Pagination from '@/views/searchPage/pagination.vue'
export default {
  name: 'search',
  components: {
    All,
    Data,
    File,
    Pagination,
  },
  data() {
    return {
      value: '',
      activeName: 'first',
      isFixed: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 10,
        showTotal: true,
      },
      params: {
        //查询请求参数
        pageBean: null,
        // params: {},
        sorter: [],
        querys: [
          {
            group: 'main',
            operation: 'LIKE',
            relation: 'AND',
            property: 'searchTitle',
            value: '',
          },
        ],
      },
      loading: false,
    }
  },
  watch: {
    value() {
      return this.value
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  created() {
    this.value = this.$route.query.value
    this.loadData() //获取查询数据
  },
  methods: {
    loadData(doNotResetPage) {
      this.params.pageBean = this.pageResult
      this.loading = true
      // 默认重置页码为第一页
      if (!doNotResetPage) {
        this.pageResult.page = 1
      }
      this.params.querys[0].value = this.value
      this.$http
        .post('${cqxy}/biz/globalRetrieval/v1/page', this.params)
        .then((res) => {
          if (res.data.state) {
            let response = res.data.value
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          } else {
            this.$message.error('请求出错,请重试')
          }
          this.loading = false
        })
    },
    handleClick(tab) {
      let name = tab.name
      this.params.querys.push({
        group: 'main',
        operation: 'LIKE',
        property: 'archivesType',
        relation: 'AND',
        value: '',
      })
      if (name == 'first') {
        this.params.querys[1].value = ''
      } else if (name == 'second') {
        this.params.querys[1].value = 1
      } else {
        this.params.querys[1].value = 2
      }
      this.loadData()
    },
    handleSearch() {
      this.loadData()
    },
    handleScroll() {
      // console.log(this.$refs, '滚动的高度')
      let headerHeight = this.$refs.header.clientHeight
      let scrollHeight = this.$refs.boxContainer.$el.scrollTop
      let domTab = this.$refs.content.childNodes[1].firstChild
      if (scrollHeight > headerHeight) {
        this.isFixed = true
        domTab.style.position = 'fixed'
        domTab.style['z-index'] = 9999
        domTab.style.top = 60 + 'px'
        domTab.style['margin-left'] = 20 + 'px'
      } else {
        this.isFixed = false
        domTab.style.position = ''
        domTab.style.top = ''
        domTab.style['margin-left'] = ''
      }
    },
    handleGoTop() {
      const time = setInterval(() => {
        let top = this.$refs.boxContainer.$el.scrollTop
        let speed = top / 5
        this.$refs.boxContainer.$el.scrollTop = top -= speed
        if (top <= 0) {
          clearInterval(time)
        }
      }, 10)
    },
    handleCurrentChange(pageResult) {
      this.pageResult = pageResult
      this.loadData(true)
    },
    handleSizeChange(pageResult) {
      console.log(pageResult, '带下')
      this.pageResult = pageResult
      this.loadData()
    },
    handleCommand(val) {
      if (val == 1) {
        this.params.sorter[0] = {
          direction: 'ASC',
          property: 'projectName',
        }
      } else if (val == 2) {
        //时间升序
        this.params.sorter[0] = {
          direction: 'ASC',
          property: 'CREATE_TIME_',
        }
      } else {
        //时间降序
        this.params.sorter[0] = {
          direction: 'DESC',
          property: 'CREATE_TIME_',
        }
      }
      this.loadData()
    },
    handleTime(val) {
      this.params.querys.push({
        group: 'main',
        operation: 'BETWEEN',
        relation: 'AND',
        property: 'CREATE_TIME_',
        value: val,
      })
      this.loadData()
    },
    handleClear() {
      this.params.sorter = []
      this.params.querys = [
        {
          group: 'main',
          operation: 'LIKE',
          relation: 'AND',
          property: 'searchTitle',
          value: '',
        },
      ]
      this.loadData()
    },
    handleDetial(data) {
      const pathInfo = this.$router.resolve({
        path: `/searchLayout/searchListDetial`,
      })
      window['filter'] = data
      window.open(pathInfo.href, '_blank')
    },
  },
  destroyed() {
    //离开页面时移除这个监听事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  line-height: 180px;
  height: 180px !important;
  background-image: url('../assets/img/search-banner-bg.png');
}

.content {
  width: 1200px;
  // height: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
}

.el-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.input-with-select {
  width: 800px;
}

.content-search {
  background-color: #f6faff;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  width: 1180px;
  /deep/ .el-input-group--append .el-input__inner {
    border: 1px solid #4596fa;
  }
  .input-select {
    width: 400px;
  }
}

.fixed {
  position: fixed;
  z-index: 999;
  top: 60px;
}

.goTop {
  position: fixed;
  right: 100px;
  bottom: 150px;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 5;
  &:hover {
    background-color: #f2f6fc;
  }
  i {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    font-size: 20px;
  }
}

/deep/.el-icon-search,
/deep/ .el-button [class*='el-icon-'] + span {
  font-size: 20px;
}
/deep/ .el-input-group--append .el-input__inner {
  height: 50px;
  font-size: 18px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border: none;
  background-color: #fff;
}
/deep/ .el-input-group__append {
  background-color: #2789ee;
  color: #fff;
  border: none;
}
/deep/ .el-tabs__nav-wrap .el-tabs__item {
  font-size: 18px;
  padding-left: 20px !important;
  height: 50px;
  line-height: 50px;
}
/deep/ .el-tabs__nav-wrap {
  background-color: #f6faff;
}
/deep/ .el-tabs__active-bar {
  padding: 0 20px;
  left: -20px !important;
}
/deep/ .el-tabs__content {
  overflow: auto;
}
/deep/ .el-input .el-input__clear {
  font-size: 18px;
}
/deep/ .el-input__suffix-inner {
  line-height: 55px;
}
/deep/ .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
