【无标题】

<template>
  <div class="contain" style="height: 1000px;">
    <h1>专家评审系统</h1>
    <div class="search">
      <el-input
        v-model="idvalue"
        class="inline-input"
        placeholder="请输入taskId"
        @focus="showTaskIdList"
        @blur="hideTaskIdList"
        @input="getSuggestion"
        @keyup.down.native="DownClick"
        @keyup.up.native="upClick"
        @keyup.enter.native="submitClick"
      >
        <el-button slot="append" icon="el-icon-search" @click="getTaskBaseInfo"></el-button>
      </el-input>
      <div v-if="showPag" class="box">
        <div
          v-for="(item, index) in taskIdListInit"
          :key="index"
          class="item"
          @mousedown="selectValue(item.taskId)"
          :style="{'background-color': showIndex === index ? 'gray' : 'white'}"
        >
          {{ item.taskId }} ( {{ item.title }} )
        </div>
        <div class="block">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="20"
            layout="total"
            :total="totalTaskId"
          >
          </el-pagination>
          <el-button :disabled="disabled1" size="mini" @mousedown.native="changePage('prev', $event)">上一页</el-button>
          <el-button :disabled="disabled2" size="mini" @mousedown.native="changePage('next', $event)">下一页</el-button>
        </div>
      </div>
    </div >
  </div>
</template>

<script>
export default {
  data () {
    return {
      showIndex: '',
      idvalue: '',
      taskIdListInit: [],
      taskIdList: [],
      currentPage: 1,
      totalTaskId: '',
      disabled1: true,
      disabled2: false,
      showPag: false
    }
  },
  mounted () {
    this.getHistoryTaskId()
    this.taskIdListInit = this.taskIdList.slice(0, 20)
  },
  methods: {
    submitClick () {
      this.idvalue = this.taskIdListInit[this.showIndex].taskId
    },
    upClick () {
      this.showIndex = this.showIndex === '' ? 19 : this.showIndex === 0 ? 19 : this.showIndex - 1
    },
    DownClick () {
      this.showIndex = this.showIndex === '' ? 0 : this.showIndex === 19 ? 0 : this.showIndex + 1
    },
    getSuggestion () {
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        if (this.idvalue === '') {
          this.taskIdListInit = this.taskIdList.splice(0, 20)
          return
        }
        const res = await this.changValue(this.idvalue)
        console.log(res)
        console.log(this.taskIdListInit)
        this.taskIdListInit = res
      }, 300)
    },
    //
    changValue (val) {
      const arr = this.taskIdList.filter(item => {
        return item.taskId.indexOf(val) !== -1 || item.title.toLowerCase().indexOf(val) !== -1
      })
      return arr
    },
    getHistoryTaskId () {
      const res = {
        code: 200,
        msg: 'success',
        data: [
          {
            taskId: '1291040',
            title: '需求'
          }, {
            taskId: '1291041',
            title: '需求'
          }, {
            taskId: '1291042',
            title: '嘿嘿嘿嘿'
          }, {
            taskId: '1291043',
            title: '需求'
          }, {
            taskId: '1291044',
            title: '需求'
          }, {
            taskId: '1291045',
            title: '啊啊啊啊啊'
          }, {
            taskId: '1291046',
            title: '需求'
          }, {
            taskId: '1291047',
            title: '阿斯顿飞过'
          }, {
            taskId: '1291048',
            title: '需求'
          }, {
            taskId: '1291049',
            title: '需求'
          }, {
            taskId: '1291050',
            title: '需求'
          }, {
            taskId: '1291051',
            title: '需求'
          }, {
            taskId: '1291052',
            title: '需求'
          }, {
            taskId: '1291053',
            title: '需求'
          }, {
            taskId: '1291054',
            title: '需求'
          }, {
            taskId: '1291055',
            title: '需求'
          }, {
            taskId: '1291056',
            title: '需求'
          }, {
            taskId: '1291057',
            title: '需求'
          }, {
            taskId: '1291058',
            title: '需求'
          }, {
            taskId: '1291059',
            title: '需求'
          }, {
            taskId: '1291060',
            title: '需求'
          }, {
            taskId: '1291061',
            title: '需求'
          }, {
            taskId: '1291062',
            title: '需求'
          }, {
            taskId: '1291063',
            title: '哈哈哈哈哈'
          }, {
            taskId: '1291064',
            title: '需求'
          }, {
            taskId: '1291065',
            title: '需求'
          }, {
            taskId: '1291066',
            title: '需求'
          }, {
            taskId: '1291067',
            title: '需求'
          }, {
            taskId: '1291068',
            title: '需求'
          }, {
            taskId: '1291069',
            title: '需求'
          }
        ]
      }
      if (res.code === 200) {
        this.taskIdList = res.data
        this.totalTaskId = res.data.length
      }
    },
    // 选择列表框中taskId
    selectValue (value) {
      this.idvalue = value
      this.showPag = false
    },
    // 列表中翻页
    changePage (name, event) {
      event.preventDefault()
      if (name === 'next') {
        this.disabled1 = false
        const page = this.totalTaskId % 20 === 0 ? this.totalTaskId / 20 : Math.floor(this.totalTaskId / 20) + 1
        if (this.currentPage === page) {
          // console.log(page)
          this.disabled2 = true
        } else {
          console.log(this.taskIdList)
          this.disabled2 = false
          this.currentPage++
          this.taskIdListInit = this.taskIdList.slice((this.currentPage - 1) * 20, (this.currentPage - 1) * 20 + 20)
        }
      } else if (name === 'prev') {
        this.disabled2 = false
        if (this.currentPage === 1) {
          this.disabled1 = true
        } else {
          this.currentPage--
          this.taskIdListInit = this.taskIdList.slice((this.currentPage - 1) * 20, (this.currentPage - 1) * 20 + 20)
        }
      }
    },
    // 展示历史记录列表框
    showTaskIdList () {
      this.showPag = true
    },
    // 隐藏历史记录列表框
    hideTaskIdList () {
      this.showPag = false
    },
    getTaskBaseInfo () {
      console.log('搜索')
    }
  }
}
</script>

<style lang="less" scoped>
.search {
    position: relative;
    width:60%;
    margin:40px auto 0;
    .inline-input {
      width: 100%;
    }
    // display: flex;
    // justify-content: space-around;
    label {
      font-weight: 500;
      width:110px;
      height:32px;
      line-height: 32px;
      color:#666;
    }
    /deep/.el-input__inner{
      height:40px;
      line-height: 40px;
    }
    .box {
      position: absolute;
      top: 40px;
      left: 0;
      width: 92%;
      height: 480px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      padding: 20px;
      padding-bottom: 40px;
      font-size: 13px;
      color: #666;
      z-index: 2;
      .item {
        height: 20px;
        cursor: pointer;
      }
      .block {
        position: absolute;
        margin-top: 20px;
        // margin-bottom: 40px;
        bottom: 0;
      }
      /deep/.el-pagination {
        display: inline-block;
      }
      /deep/.el-pagination__total {
        margin-top: -6px;
      }
    }
  }
</style>