<div id="app">
  <!-- 通用tab -->
  <div class="tabbar">
    <ul>
      <li :class="{'current': queryType === '1'}" @click="changeQueryType('1')">待检查</li>
      <li :class="{'current': queryType === '2'}" @click="changeQueryType('2')">已检查</li>
      <li :class="{'current': queryType === '3'}" @click="changeQueryType('3')">已过期</li>
      <li :class="{'current': queryType === '4'}" @click="changeQueryType('4')">问题单</li>
    </ul>
  </div>
  <div style=" height:0.7rem;"></div>

  <!--待检查-->

    <mt-loadmore  :auto-fill="false" :top-method="refreshData" :bottom-method="loadData" :bottom-all-loaded="allLoaded"
                 ref="loadmore">
      <div :style="{'-webkit-overflow-scrolling': scorllModel}">
      <div class="nocomplete_body"  v-for="qsIn in quality">
        <ul>
          <li>
            <h1>{{qsIn.fname}}</h1>
          </li>
          <li>
            <h3>巡检时间：{{qsIn.fbeginDate.substr(0, 10)}}~{{qsIn.fendDate.substr(0, 10)}} </h3>
          </li>
        </ul>
        <div class="xunjian_list" v-for="(xtQsInsListSite,index) in qsIn.xtQsInsListSiteBean" v-if="index < 2">
          <ol @click="getXtQsInsList(qsIn.fid,qsIn.fprojectName)">
            <li><img src="../../../static/images/mingcheng_icon.png"/>
              <p>{{xtQsInsListSite.fsiteName}}</p>
            </li>
            <li><img src="../../../static/images/dizhi_icon.png"/>
              <p>{{xtQsInsListSite.flocation}}</p>
            </li>
          </ol>
          <img class="xunjian_img" v-if="xtQsInsListSite.fstatus == 0" src="../../../static/images/wei_icon.png"/>
          <img class="xunjian_img" v-if="xtQsInsListSite.fstatus == 1" src="../../../static/images/jian1_icon.png"/>
        </div>
        <a class="zhuangtai gr">巡检中</a>
      </div>
      </div>
    </mt-loadmore>

</div>

<script>
import quality from '../../api/quality'

export default {

data () {
  return {
    quality: [],
    queryType: '1',
    xtQsInsListSite: {},
    delayDay: 0,
    delayDate: '',
    xtQsInsListArr: [],
    pageNo: 0,
    dataIsNull: false,
    allLoaded: false,
    scrollTop: '0',
    scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动

  }
},
components: {},
mounted () {
  this.getQuality()
  document.addEventListener('scroll', this.handelscroll)
  this.activated()
},
methods: {
  getQuality () {
    document.setTitle('品质督导')
    quality.getQuality({
      fstatus: '0',
      pageNo: this.pageNo + 1,
      pageSize: this.$pageSize
    }, (data) => {
      data = data.rows
      // 第一页是否无数据
      this.scrollMode = 'touch'
      if (this.pageNo === 0) {
        this.$refs.loadmore.onTopLoaded()
      } else {
        this.$refs.loadmore.onBottomLoaded()
      }
      if (this.pageNo === 0 && data.length < 1) this.dataIsNull = true
      // 是否全部加载
      this.allLoaded = !data || data.length < this.$pageSize
      this.pageNo = this.pageNo + ((data && data.length > 0) ? 1 : 0)
      for (let i = 0; i < data.length; i++) {
        this.quality.push(data[i])
      }
    })
  },
  getXtQsInsList (id, fprojectName) {
    this.$router.push({path: '/quality/ToBeCheckedInsListSite', query: {fid: id, fprojectName: fprojectName}})
    this.deactivated()
  },
  changeQueryType (queryType) {
    this.queryType = queryType
    if (queryType === '2') {
      sessionStorage.setItem('tmQueryType', '2')
      this.$router.push({path: '/quality/AlreadyChecked'})
    } else if (queryType === '3') {
      sessionStorage.setItem('tmQueryType', '3')
      this.$router.push({path: '/quality/Expired'})
    } else if (queryType === '1') {
      // 代表默认进入待检查列表
      this.getQuality()
    } else if (queryType === '4') {
      this.$router.push({path: '/quality/QuestionList'})
    }
    this.refreshData()
  },
  getQuestion () {
    this.$router.push({path: '/quality/QuestionList'})
  },
  back () {
    this.$router.back(-1)
  },
  refreshData () {
    this.pageNo = 0
    this.allLoaded = false
    this.quality = []
    this.getQuality()
  },
  loadData () {
    this.getQuality()
    this.$refs.loadmore.onBottomLoaded()
  },
  handelscroll () {
    this.scrollTop = document.documentElement.scrollTop
  },
  deactivated () {
    sessionStorage.setItem('scrollTop', this.scrollTop)
  },
  activated () {
    console.log(sessionStorage.getItem('scrollTop'))
    document.body.scrollTop = document.documentElement.scrollTop = window.pageYOffset = sessionStorage.getItem('scrollTop')
  }
}

}
</script>
<style>
@import "../../assets/css/quality/public.css";
@import "../../assets/css/quality/style.css";
.mint-loadmore-text{

font-size: .2rem;

}
</style>