<template>
  <scroll-view
    style="background-color: #f4f7ff"
    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"
  >
    <div>
      <!-- <LoginDom></LoginDom> -->
      <div
        :class="['choice_card', index === 0 && 'mt30']"
        v-for="(item, index) in list"
        :key="index"
        @click="toDetail(item.orderno)"
      >
        <div class="carno-box">
          <div class="carno">{{ item.carno }}</div>
          <div class="servicefee">{{ (item.servicefee / 100) | currency }}</div>
        </div>
        <uni-view class="choice_card_index">{{ item.parkname }} </uni-view>
        <uni-view class="choice_card_index orderno-box">
          <div class="orderno">订单号 : {{ item.orderno }}</div>
          <van-icon name="arrow" />
        </uni-view>
        <uni-view class="choice_card_index">
          <uni-view>入场时间 : {{ item.entertime }}</uni-view>
        </uni-view>
        <uni-view class="choice_card_index mb0 pb0">
          <uni-view>停车时长 : {{ item.serviceMin | parkingTime }}</uni-view>
          <uni-view :class="['status-box', item.payStatus !== 1 && 'other']">
            {{
              item.refundStatus === 1
                ? '已退款'
                : item.payStatus === 1
                ? '支付成功'
                : '支付失败'
            }}
          </uni-view>
        </uni-view>
      </div>
      <uni-view class="notice-info">
        <uni-view
          >{{ list.length === 4 ? '查看更多' : '没有更多数据了' }}
        </uni-view>
      </uni-view>
    </div>
  </scroll-view>
</template>

<script>
// const app = getApp()
import uni from '@/utils/uniHooks';
import LoginDom from '@/components/Login/Login.vue';
import { wxToLoginCallback } from '@/utils/index';

const app = {};
let canloading = true;
let pageNum = 1;
import moment from 'moment';
// import authorize from '@/components/authorize/authorize.vue';
import { mapState } from 'vuex';
// import {data as mockData} from './list'

export default {
  // components: {
  //   // authorize,
  // },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    ...mapState({
      mallId: (state) => state.mallId,
      openId: (state) => state.openid,
      member: (state) => state.member,
    }),
  },
  components: { LoginDom },
  mounted() {
    setTimeout(() => {
      uni.setNavigationBarTitle({
        title: '缴费记录',
      });
    }, 300);
    this.list = [];
    // 重新获取数据
    canloading = true;
    pageNum = 1;
    const member = uni.getStorageSync('member');
    if (member) {
      this.loadData();
    } else {
      wxToLoginCallback('parkingFeeList', () => {
        this.loadData();
      });
      /* // 前往登录
      window.toWXSendMsg({
        type: 'toLogin',
        options: {
          path: 'parkingFeeList',
        },
      });
      window.subscribe('callback', (options) => {
        // resolve(options);
        console.log(110, options);
        if (options.isReload) {
          window.location.reload();
        } else {
          this.loadData();
        }
      });*/
      // 登录的回调
      // this.loadData()
      /*this.$refs.authorize.login("/pages/parkingFee/parkingFee", () => {
				this.loadData()
			});*/
    }
  },
  // mounted() {
  //   console.log(123, this.$route)
  // },
  // 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: this.mallId,
        vipcode: this.member?.vipcode,
        openId: this.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 {
            // 合并数据
            const records = res.data.data || [];
            if (records.length) {
              const list = this.list;
              this.list = [...list, ...records];
            } else {
              this.initPage();
            }
            // this.list = mockData.data
          }
          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) {
      this.$router.push({
        path: '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: 8px;

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

    span {
      font-size: 16px;
    }
  }

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

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

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

.choice_card {
  width: calc(100% - 120px);
  margin-left: 30px;
  // margin-top: 30px;
  margin-bottom: 30px;
  padding: 30px;
  // border-radius: 20px;
  position: relative;
  background-color: #fafbff;
  border-radius: 4px;
  border: 1px solid #d8dae0;
  &.mt30 {
    margin-top: 30px;
  }
  .carno-box {
    display: flex;
    padding-bottom: 18px;
    border-bottom: 1px solid #d8dae0;
    justify-content: space-between;
    margin-bottom: 20px;
    .carno {
      font-size: 36px;
      color: #333333;
      font-weight: 600;
      line-height: 50px;
    }
    .servicefee {
      font-size: 30px;
      font-weight: 600;
      color: #333333;
      line-height: 42px;
    }
  }

  .choice_card_index {
    font-size: 28px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    &.mt0 {
      margin-top: 0;
    }
    &.mb0 {
      margin-bottom: 0;
    }
    &.pb0 {
      padding-bottom: 0;
    }
    .status-box {
      font-size: 30px;
      font-weight: 400;
      color: #064c8a;
      line-height: 42px;
      &.other {
        color: #999999;
      }
    }
  }
  .orderno-box {
    display: flex;
    justify-content: space-between;
  }
}

.notice-info {
  text-align: center;
  color: #b5b3b3;
  padding-bottom: 30px;

  uni-view {
    margin-bottom: -7px;
  }
}
</style>
