<template>
  <scroll-view
    class="scroll-Y"
    id="slideview"
    scroll-y
    lower-threshold="50"
    scroll-top="0"
    scroll-left="0"
    scroll-with-animation="false"
    enable-back-to-top="false"
    @scrolltolower="bindscrolltolower"
  >
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>

<!--    <authorize ref="authorize"></authorize>-->
    <view
      class="choice_card"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item.orderno)"
    >
      <view
        class="choice_card_index choice_card_index1"
        style="font-size: 30rpx; margin: 0 12rpx"
      >
        <view style="margin-left: 6rpx">{{
          item.orderno + '-' + item.carno
        }}</view>
        <view style="color: red; margin-right: 6rpx">{{
          (item.servicefee / 100) | currency
        }}</view>
      </view>

      <view class="choice_card_index choice_card_index2">{{
        item.parkname
      }}</view>
      <view class="choice_card_index choice_card_index3">
        <view>入场时间 : {{ item.entertime }}</view>
        <view style="margin-right: 20rpx">
          <uni-icons
            class="align-top"
            color="#B3B3B3"
            size="14"
            type="arrowright"
          />
        </view>
      </view>
      <view
        class="choice_card_index choice_card_index3"
        style="padding-bottom: 20rpx"
      >
        <view>停车时长 : {{ item.serviceMin | parkingTime }}</view>
        <view style="margin-right: 20rpx">
          {{
            item.refundStatus === 1
              ? '已退款'
              : item.payStatus === 1
              ? '支付成功'
              : '支付失败'
          }}
        </view>
      </view>
    </view>
    <view class="notice-info">
      <view>{{ list.length === 4 ? '查看更多' : '没有更多数据了' }}</view>
      <uni-icons
        v-if="list.length === 4"
        type="arrowdown"
        size="14"
        color="##b5b3b3"
      ></uni-icons>
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
let canloading = true;
let pageNum = 1;
import authorize from '@/components/authorize/authorize.vue';
export default {
  components: {
    authorize,
  },
  data() {
    return {
      list: [],
    };
  },
  // 分享
  onShareAppMessage() {
    return {
      title: '缴费记录', // 标题
      path: '/pages/parkingFee/parkingFeeList?mallid=' + app.globalData.mallid,
      imageUrl: '', // 图标
    };
  },
  // 分享
  onShareTimeline() {
    return {
      title: '缴费记录', // 标题
      path: '/pages/parkingFee/parkingFeeList?mallid=' + app.globalData.mallid,
      imageUrl: '', // 图标
    };
  },
  onLoad: function () {
    // 埋点初始化
    // this.parkingTrack = new this.$trackFactory('parking_query_payment', {})
    // this.parkingTrack.track(1)
  },
  onShow: function () {
    this.list = [];
    // 重新获取数据
    canloading = true;
    pageNum = 1;
    const member = uni.getStorageSync('member');
    if (member) {
      this.loadData();
    } else {
      this.$refs.authorize.login('/pages/parkingFee/parkingFee', () => {
        this.loadData();
      });
    }
  },
  // onReachBottom: function() {
  //   console.log('canloading', canloading)
  //   if (canloading) {
  //     pageNum++
  //     this.loadData()
  //   }
  // },
  filters: {
    parkingTime(val) {
      const days = parseInt(val / 60 / 24);
      const hours = parseInt((val / 60) % 24);
      const minutes = parseInt(val % 60);
      if (days > 0) {
        return `${days}天 ${hours}小时 ${minutes}分钟`;
      }
      if (hours > 0) {
        return `${hours}小时 ${minutes}分钟`;
      }
      return `${minutes}分钟`;
    },
  },
  methods: {
    bindscrolltolower: function () {
      if (canloading) {
        pageNum++;
        this.loadData();
      }
    },
    // 获取停车记录
    loadData: function () {
      canloading = false;
      const params = {
        mallid: app.globalData.mallid,
        vipcode: app.globalData.member?.vipcode,
        openId: app.globalData.openId,
        page: pageNum || 1,
        pageSize: 4,
      };
      uni.showLoading({
        title: '加载中',
      });
      this.$md(params);
      uni.request({
        url: this.$baseURL + 'api/1.0/park/parkOrderList',
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          uni.hideLoading();
          if (res.data.code !== 0) {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
            this.initPage();
          } else {
            // // 点击缴费记录埋点
            // res.data.data.forEach(element => {
            // 	this.parkingTrack.track(101, {
            // 	plate_num: element.carno,
            // 	query_time: element.createDate
            // })
            // });

            // 合并数据
            const records = res.data.data || [];
            if (records.length) {
              const list = this.list;
              this.list = [...list, ...records];
            } else {
              this.initPage();
            }
          }
          canloading = true;
        },
        fail: (err) => {
          uni.hideLoading();
          canloading = true;
          this.initPage();
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none',
          });
        },
      });
    },
    // 页码复原
    initPage: function () {
      pageNum--;
      if (pageNum <= 0) {
        pageNum = 0;
      }
    },
    // 查看详情
    toDetail(orderno) {
      uni.navigateTo({
        url: './parkingFeeDetailSuccess?orderNo=' + orderno,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.parkingFeeList-item {
  background: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 8rpx;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 36rpx;
    box-sizing: border-box;

    text {
      font-size: 16px;
    }
  }

  .item-bottom {
    border-top: 1px solid #f2f2f2;
    display: flex;
    flex-direction: column;
    padding: 0rpx 36rpx;
    box-sizing: border-box;
    padding-top: 8px;

    view {
      display: flex;
      flex-direction: column;
    }

    text {
      color: #999;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}

.choice_card {
  width: 92%;
  margin-left: 4%;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  background-color: #fff;
  position: relative;
  .choice_card_index {
    margin-left: 18rpx;
    padding-top: 6rpx;
    padding-bottom: 6rpx;
    font-size: 28rpx;
  }
  .choice_card_index1 {
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    padding-top: 22rpx;
    padding-bottom: 22rpx;
    justify-content: space-between;
  }
  .choice_card_index2 {
    padding-top: 20rpx;
    color: #808080;
  }
  .choice_card_index3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #808080;
  }
  .choice_card_index4 {
    color: #808080;
    padding-bottom: 20rpx;
  }
}
.notice-info {
  text-align: center;
  color: #b5b3b3;
  padding-bottom: 30px;
  view {
    margin-bottom: -7px;
  }
}
</style>
