<template>
  <div class="hello">
    <button @click="edit">开始</button>
    <div class="box" @scroll="scroll">
      <div class="item" v-for="(item , index) in list" v-bind:key="index">{{item.time}}</div>
      <div v-if="loading">加载中</div>
    </div>
    <input type="text" v-model="sfz">
    <button @click="checkSfz">sfz</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: [],
      oData: [],
      currentPage: 0,
      totalPage: 0,
      loading: true,
      sfz: ''
    }
  },
  methods: {

    getInfo () {
      // let that = this
      let time = Date.now()
      let data = []
      let t = {
        time: time
      }
      for (let i = 0; i < 10; i++) {
        data.push(t)
      }
      return new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve({
            data: data,
            totalPage: 33
          })
        }, 1000)
      })
    },
    scroll (e) {
      let that = this
      let clientHeight = e.target.clientHeight
      let scrollTop = e.target.scrollTop
      let scrollHeight = e.target.scrollHeight
      let height = scrollTop + clientHeight + 2
      if (height > scrollHeight) {
        console.log('到底了。。。。。')
        console.log(that.currentPage)
        if (that.totalPage > that.currentPage) {
          if (!that.loading) {
            that.edit()
          }
        }
      }
      console.log(scrollTop, scrollHeight, clientHeight)
    },
    edit () {
      let that = this
      that.loading = true
      let currentPage = this.currentPage + 1
      console.log(currentPage)
      this.getInfo().then(res => {
        console.log(res)
        let temp = that.list.concat(res.data)
        that.list = temp
        that.totalPage = res.totalPage
        that.currentPage += 1
        console.log(that.currentPage)
        console.log(that.list)
        that.loading = false
      })
    },
    checkSfz () {
      let IdcardVal = this.sfz
      let idCardReg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/
      if (!idCardReg.test(IdcardVal)) {
        alert('身份证号码格式错误!')
        return false
      }
      console.log('身份证正确', IdcardVal)
      return
      var phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;
      if(!phoneReg.test(phoneVal)) {
          alert("手机号码格式错误!");
          return false;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow-y: scroll;
  }
</style>