<template>
  <view class="page-wrapper integral-record" :style="viewColor">
    <!--统计信息-->
    <view class="statistics">
      <view class="statistics-content">
        <view class="statistics-block" v-for="(item,index) in statistics_list" :key="index">
          <view class="statistics-num">{{ item.value }}</view>
          <view class="statistics-title">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!--转赠按钮-->
    <view class="transfer-quota" @click="goMenuPage">
      <view class="transfer-text">转赠</view>
    </view>
    <!--列表记录-->
    <view class="integral-list" v-if="Object.keys(list).length > 0">
      <view class="integral-content">
        <view class="block" v-for="(item,index) in list" :key="index">
          <view class="left-content">
            <view class="left-top">
              <view class="left-remark">{{ item.remark }}</view>
              <view class="left-tag left-tag-released" v-if="item.change_type == 1">增加</view>
              <view class="left-tag left-tag-frozen" v-else>减少</view>
            </view>
            <view class="left-bottom">{{ item.create_time }}</view>
          </view>
          <view class="right-content">
            <view v-if="item.change_type == 1" class="released">+{{ item.change_quantity }}</view>
            <view v-else class="frozen">-{{ item.change_quantity }}</view>
          </view>
        </view>
      </view>
    </view>
    <emptyPage v-else title="暂无记录~"></emptyPage>
  </view>
</template>

<script>
import emptyPage from '@/components/emptyPage.vue'
import { mapGetters } from "vuex";
import {recordQuota,recordQuotaList} from "@/api/exchange";
export default{
  components:{
    emptyPage
  },
  computed: mapGetters(['isLogin','uid','viewColor']),
  data(){
    return {
      statistics_list: {},
      list: [],
      searchData: {
        page: 1,
        limit: 20,
        quota_type: 1,
      },
      total_page: 0,
      allow_page: false,
    }
  },
  onLoad(options){
    this.searchData.quota_type = options.quota_type || 1;
    uni.setNavigationBarTitle({
      title: this.searchData.quota_type == 2 ? '菜卡额度变更记录' : '酒卡额度变更记录'
    })
    // this.getStatistics();
    // this.getList();
  },
  onShow() {
    this.getStatistics();
    this.getList();
  },
  methods:{
    // 统计获取
    getStatistics(){
      let _this = this;
      recordQuota({ quota_type: _this.searchData.quota_type }).then(res => {
        this.statistics_list = res.data || {};
      });
    },
    // 列表获取
    getList(){
      let _this = this
      recordQuotaList(_this.searchData).then(res => {
        if(res.status === 200){
          if(_this.searchData.page == 1){
            _this.list = res.data.list;
          }else{
            _this.list = _this.list.concat(res.data.list);
          }
          _this.total_page = Math.ceil(res.data.count / _this.searchData.limit);
        }
        _this.allow_page = true;
      })
    },
    // 页面跳转
    goMenuPage() {
      if (this.isLogin) {
        uni.navigateTo({
          url: '/pages/users/online_payment/record/quota_transfer?quota_type=' + this.searchData.quota_type
        })
      } else {
        this.openAuto()
      }
    },
  },
  // 触底监听
  onReachBottom() {
    if(this.searchData.page < this.total_page && this.allow_page){
      this.searchData.page = this.searchData.page + 1;
      this.getList();
    }
  },
  // 滚动监听
  onPageScroll(e) {},
}
</script>

<style lang="scss" scoped>
.integral-record{
  width: 100vw!important;
  min-height: 100vh!important;
  background: #f6f6f6;

  // 统计信息
  .statistics{
    padding: 20rpx;

    .statistics-content{
      width: 100%;
      background: #ffffff;
      border-radius: 15rpx;
      padding: 20rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      box-shadow: 0px 0px 5px 1px #0015295e;
      .statistics-block{
        width: calc(100% / 3);
        height: 130rpx!important;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        .statistics-num{
          font-size: 34rpx;
          font-weight: bold;
          height: 50rpx;
          line-height: 50rpx;
        }
        .statistics-title{
          font-size: 26rpx;
          color: #909399;
        }
      }
    }
  }
  // 转赠按钮
  .transfer-quota{
    text-align: center;
    width: 100%;
    height: 100rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    .transfer-text{
      font-size: 35rpx !important;
      color: #fff;
      background-color: #e6a23c;
      border-color: #e6a23c;
      height: 60rpx;
      width: 200rpx;
      line-height: 60rpx;
      border-radius: 80rpx;
    }
  }
  // 信息列表
  .integral-list{
    .integral-content{
      width: 100%;
      background: #ffffff;
      padding: 0 20rpx;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      .block {
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        .left-content {
          width: calc(100% - 200rpx);

          .left-top {
            width: 100%;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            .left-remark{
              font-size: 34rpx;
              font-weight: bold;
              color: #222427;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: calc(100% - 90rpx);
            }
            .left-tag {
              font-size: 24rpx;
              font-weight: unset;
              margin-left: 20rpx;
              padding: 5rpx 0;
              border-radius: 5rpx;
              text-align: center;
              width: 80rpx;
            }
            .left-tag-frozen{
              background: #fceaea;
              color: #fe4e4d;
            }
            .left-tag-released{
              background: #eafbeb;
              color: #5fc161;
            }
            .left-tag-invalid{
              background: #e2e2e2;
              color: #6d6d6d;
            }
          }

          .left-bottom {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            font-size: 26rpx;
            color: #b1b1b1;
            .time {
              width: 300rpx;
            }
            .legumes {
              width: 50%;
            }
          }
        }

        .right-content {
          font-size: 36rpx;
          font-weight: bold;
          width: 180rpx;
          text-align: right;
          .released{
            color: #5fc161;
          }
          .invalid{
            color: #6d6d6d;
          }
          .frozen{
            color: #fe4e4d;
          }
        }
      }
      .block:not(:last-child){
        border-bottom: 2rpx solid #f6f6f6;//#f6f6f6
      }
    }
  }

}
</style>
