<template>
  <div class="eqInspection">
    <!-- navbar -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="PDA设备巡检记录"
        left-arrow
        sticky
        class="eq-header"
        @click-left="onClickLeft"
      />
      <!-- @click-right="onClickRight" -->
    </van-sticky>
    <van-pull-refresh class="eq-main" v-model="isLoading" @refresh="onRefresh" ref="listMain">
      <!-- 信息列表主体 -->
      <!-- 搜索区域 -->
      <div class="eq-search">
        <div class="eq-search-back" />
        <div class="eq-search-main">
          <van-row class="eq-search-item">
            <van-col :span="7" class="eq-search-item-lable">设备名称</van-col>
            <van-col :span="15" :offset="1" class="eq-search-item-input">
              <van-field
                v-model="eqName"
                right-icon="arrow-down"
                disabled
                placeholder="请选择设备"
                @click="handleEqSelect"
              />
            </van-col>
          </van-row>
          <van-row class="eq-search-item">
            <van-col :span="7" class="eq-search-item-lable">时间段</van-col>
            <van-col :span="15" :offset="1" class="eq-search-item-input">
              <van-field
                v-model="timeStr"
                right-icon="rili"
                icon-prefix="iconfont"
                disabled
                placeholder="请选择时间段"
                @click="handleTimeSelect"
              />
            </van-col>
          </van-row>
          <van-row class="eq-search-btn">
            <van-col :span="9" :offset="1">
              <van-button class="eq-search-btn-item eq-search-btn-left" round @click="toAdd">扫描新增</van-button>
            </van-col>
            <van-col :span="12" :offset="1">
              <van-button class="eq-search-btn-item eq-search-btn-right" round @click="handleSearch">查 询</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="eq-list">
        <eq-item v-for="item in dataList" :inject-data="item" :key="item.id" />
      </div>
      <water-fall @click.native="getMore" :isOver="isOver"></water-fall>
    </van-pull-refresh>
    <time-popup ref="timePopup" :default-date="timeSlot" @changeDate="changeDate" />
    <eq-popup ref="eqPopup" :eq-list="eqList" @changeEq="changeEq" />
  </div>
</template>

<script>
import { list, eqList } from '@/api/eqInspection'
import timePopup from './components/timePopup.vue'
import eqPopup from './components/eqPopup.vue'
import eqItem from './components/eqItem.vue'
import moment from 'moment'

export default {
  name: 'eqInspection',
  components: { timePopup, eqPopup, eqItem },
  data () {
    return {
      queryList: {
        current: 1,
        endTime: '',
        equipmentId: '',
        size: 10,
        startTime: ''
      },
      isLoading: false,
      isOver: true,
      dataList: [],
      eqList: [],
      dataOption: {},
      eqName: null,
      timeSlot: [],
      timeStr: null,
      isFirstScroll: true
    }
  },
  mounted () {
    this.getDataList()
    this.getEqList()
    document.querySelector('.eq-main').addEventListener('scroll', this.handleScroll, true)
    // 给浏览器加入一个空的历史纪录
    window.history.pushState(null, null, document.URL)
    // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
    window.addEventListener('popstate', this.onBrowserBack, false)
  },
  destroyed () {
    window.removeEventListener('popstate', this.onBrowserBack, false)
    document.querySelector('.eq-main').removeEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    // 浏览器返回按钮监听
    onBrowserBack () {
      if (this.eqVisable || this.timeVisable) {
        this.eqVisable = false
        this.timeVisable = false
        window.history.pushState(null, null, document.URL)
      } else {
        this.$router.push({
          name: 'index'
        })
      }
    },
    // 滚动事件监听
    handleScroll () {
      let clientHeight = document.documentElement.clientHeight // 客户区大小
      let scrollHeight = document.querySelector('.eq-main').scrollHeight // 没用滚动条的情况下，元素内容的总高度
      let scrollTop = document.querySelector('.eq-main').scrollTop // 被隐藏在内容区域上方的像素数
      let headerHeight = document.querySelector('.eq-header').offsetHeight// header高度
      let listHeight = clientHeight - headerHeight // list高度
      if (scrollTop - (scrollHeight - listHeight) >= -80 && this.isFirstScroll) {
        this.isFirstScroll = false
        this.queryList.current += 1
        if (this.isOver) {
          this.isOver = !this.isOver
          this.$nextTick(() => {
            this.getDataList()
            setTimeout(() => {
              this.isFirstScroll = true
            }, 2000)
          })
        }
      }
    },
    // 瀑布流点击
    getMore () {
      if (this.isOver) {
        this.queryList.current += 1
        this.getDataList()
      }
    },
    // 获取信息列表
    async getDataList () {
      const result = await list(this.queryList)
      if (result.success) {
        this.dataList = this.dataList.concat(result.data.records)
        this.dataOption = result.data
        if (this.dataOption.total / 10 <= this.queryList.current) {
          this.isOver = false
        } else {
          this.isOver = true
        }
        this.show = false
      } else {
        this.isOver = true
      }
    },
    // 获取设备列表
    async getEqList () {
      const result = await eqList({
        current: 1,
        size: 999
      })
      if (result.success) {
        this.eqList = result.data
      }
    },
    // 点击查询
    handleSearch () {
      this.dataList = []
      this.$nextTick(() => {
        this.getDataList()
      })
    },
    // 返回上一页
    onClickLeft () {
      this.$router.push({
        name: 'index'
      })
    },
    // 扫描新增
    toAdd () {
      this.$router.push({
        name: 'eqInspectionAdd'
      })
    },
    // 重置筛选项
    resetQuery () {
      this.queryList = {
        current: 1,
        endTime: '',
        equipmentId: '',
        size: 10,
        startTime: ''
      }
      this.eqName = null
      this.timeStr = null
      this.timeSlot = []
      this.dataList = []
    },
    // 下拉刷新
    async onRefresh () {
      this.resetQuery()
      await this.getDataList()
      this.$toast.success('刷新成功')
      this.isLoading = false
    },
    // 弹出设备选择器
    handleEqSelect () {
      this.$nextTick(() => {
        this.$refs.eqPopup.init()
      })
    },
    // 弹出日历
    handleTimeSelect () {
      this.$nextTick(() => {
        this.$refs.timePopup.init()
      })
    },
    // 日期修改
    changeDate (date) {
      if (date && date.length) {
        this.timeStr = `${moment(date[0]).format('YYYY/MM/DD')}-${moment(date[1]).format('YYYY/MM/DD')}`
        this.queryList.startTime = date[0]
        this.queryList.endTime = date[1]
        this.timeSlot = [new Date(date[0]), new Date(date[1])]
      }
    },
    // 设备修改
    changeEq (index) {
      this.eqName = this.eqList[index].name
      this.queryList.equipmentId = this.eqList[index].id
    }
  }
}
</script>

<style lang="scss">
  .eqInspection {
    width: 100%;
    background: #F6F6F6;
    .eq-main {
      width: 100%;
      position: absolute;
      top: 1.5rem;
      bottom: 0;
      overflow: scroll;
    }

    .eq-header {
      background: #4271FF;
      .van-icon {
        color: #fff;
        font-size: .4375rem;
      }
      .van-nav-bar__content {
        height: 1.5rem;
        line-height: 1.5rem;
        .van-nav-bar__title {
          color: #fff;
          font-size: .4375rem;
        }
      }
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0;
    }
    .eq-search {
      width: 100%;
      height: 3.625rem;
      position: relative;
      .iconfont {
        font-size: .5rem;
        position: relative;
        top: .05rem;
        left: .09rem;
        color: #0B58FF;
      }
      .eq-search-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 1rem;
        background: #4271FF;
      }
      .eq-search-main {
        position: relative;
        padding-top: .125rem;
        width: 94%;
        margin-left: 3%;
        height: 3.5rem;
        border-radius: .25rem;
        background: #fff;
        box-shadow: .02rem .02rem .1rem rgba($color: #000000, $alpha: .2);
        input::-webkit-input-placeholder {
          font-size: .375rem;
        }
        input:-moz-placeholder {
          font-size: .375rem;
        }
        input::-moz-placeholder {
          font-size: .375rem;
        }
        input:-ms-input-placeholder {
          font-size: .375rem;
        }
      }
      .eq-search-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-search-item-lable {
          text-align: right;
          font-size: .375rem;
        }
        .van-cell {
          padding: 0 .25rem;
          height: .875rem;
          background: #F6F6F6;
          border-radius: .1875rem;
          .van-field__body {
            height: .875rem;
            .van-field__control {
              height: .875rem;
            }
          }
        }
      }
      .eq-search-btn {
        margin-top: .25rem;
        .eq-search-btn-item {
          width: 100%;
          font-size: .375rem;
        }
        .eq-search-btn-left {
          color: #42D1A5;
          border: 0.02rem solid #42D1A5;
        }
        .eq-search-btn-right {
          color: #fff;
          background: #4271FF;
          border: 0.02rem solid #4271FF;
        }
      }
    }
    .eq-list {
      width: 94%;
      padding: 0 3%;
    }
  }
</style>
