<template>
  <view class="common">
    <view class="history" v-if="ranklist.length">
      <delectList :list="ranklist" :type="user.type" :border="false" @changeDelete="changeDelete"></delectList>
      <view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
    </view>
    <view class="nolist" v-if="!lastPage">
      <icon class="iconfont icon-zanwu"></icon>
    </view>
  </view>
</template>

<script>
  import delectList from "@/components/mark-slide-list/mark-slide-list.vue"
  import {
    mapState
  } from "vuex";
  export default {
    components: {
      delectList
    },
    computed: {
      ...mapState(['user', "appTheme"]),
    },
    data() {
      return {
        buttonList: [{
          title: '删除',
          background: '#ff3b32'
        }],
        list: [
          "测量时间",
          "体重",
          "BMI",
          "操作",
        ],
        ranklist: [],
        page: 1,
        lastPage: 1,
        type: null,
        id: null,
        startX: 0,
        endX: 0
      }
    },
    onLoad() {
      let that = this
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: that.appTheme,
      })
      that.getList(1)
    },
    onReachBottom() {
      let that = this
      console.log("this.lastPage", this.lastPage)
      if (!this.lastPage || this.page >= this.lastPage) {
        uni.showToast({
          title: '没有更多数据！',
          icon: 'none'
        })
        return
      }
      this.page++
      this.getList(this.page)
    },
    methods: {
      changeDelete(item) {
        let that = this
        uni.showModal({
          title: '友情提示',
          content: '是否删除当前测量记录？',
          success: function(res) {
            if (res.confirm) {
              that.$model.gethistorydelete({
                id: item.id,
              }).then((res) => {
                if (res.code != 0) {
                  that.$tools.msg(res.message)
                  return
                }
                that.ranklist.splice(that.ranklist.findIndex(ite => ite.id === item
                  .id), 1)
                that.$store.dispatch("getUserInfo", {
                  familyid: that.user.familyid,
                })
                that.$store.dispatch("getResult", {
                  birthday: that.user.birthday,
                  familyid: that.user.familyid,
                  height: that.user.height,
                  sex: that.user.sex,
                })

                that.$tools.msg("删除成功")
              })
            } else if (res.cancel) {
              that.$tools.msg("您已取消操作！");
            }
          },
        })
      },
      getList(page) {
        let that = this
        that.$model.getHistoryList({
          familyId: that.user.familyid,
          pageNo: page,
          pageSize: 10
        }).then((res) => {
          console.log("历史记录", res)
          if (res.code != 0) return
          res.data.rows.forEach(item => {
            item.slide_x = 0
          })
          this.ranklist = this.ranklist.concat(res.data.rows)
          this.lastPage = res.data.totalpage
        })
      },
      // 滑动开始
      touchStart(e) {
        // 记录初始位置
        this.startX = e.touches[0].clientX
      },
      // 滑动结束
      touchEnd(e) {
        console.log("2", e)
        // 当前滑动的父级元素
        let parentElement = e.currentTarget
        // 记录结束位置
        this.endX = e.changedTouches[0].clientX
        // 左滑
        if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
          this.restSlide()
          parentElement.dataset.type = 1
        }
        // 右滑
        if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
          this.restSlide()
          parentElement.dataset.type = 0
        }
        this.startX = 0
        this.endX = 0
      },
      // 判断当前是否有滑块处于滑动状态
      checkSlide() {
        let listItems = document.querySelectorAll('.list')
        for (let i = 0; i < listItems.length; i++) {
          if (listItems[i].dataset.type == 1) {
            return true
          }
        }
        return false
      },
      // 复位滑动状态
      restSlide() {
        let listItems = document.querySelectorAll('list')
        // 复位
        for (let i = 0; i < listItems.length; i++) {
          listItems[i].dataset.type = 0
        }
      },
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .common {
    min-height: calc(100vh - 40px);
    padding-bottom: 15px
  }
  .history {
  	margin-bottom: 40px;
  }
</style>
