<!--共创股东 - 用户餐费记录信息-->
<template>
  <view>
    <view class="main-content">
      <!--顶部统计信息-->
      <view class="top">
        <view class="top-content">
          <view class="top-half" :style="{ 'background-image': `url(${top_half_icon})`}">
            <view class="left">
              <view class="title">全部积分</view>
              <view class="num">{{ statistics.sum_integral_total || '0.00' }}</view>
            </view>
            <view class="right">
              <view class="use-btn" @click="goToPage">去使用</view>
            </view>
          </view>
          <view class="bottom-half">
            <view class="bottom-box">
              <view class="label">剩余可用积分</view>
              <view class="num">{{ statistics.sum_used_surplus || '0.00' }}</view>
            </view>
            <view class="bottom-box">
              <view class="label">已使用积分</view>
              <view class="num">{{ statistics.sum_integral_use || '0.00' }}</view>
            </view>
            <view class="bottom-box">
              <view class="label">已过期积分</view>
              <view class="num">{{ statistics.sum_used_overdue || '0.00' }}</view>
            </view>
          </view>
        </view>
      </view>
      <!--信息列表-->
      <view class="list-content" v-if="Object.values(list).length > 0">
        <view class="list-box" v-for="(item,index) in list" :key="index">
          <view class="up">
            <view class="left">
              <text v-if="item.status == 0">预计解冻时间：{{ item.expect_thaw_time }}</text>
              <text v-else-if="item.status == 1">预计过期时间：{{ item.expect_overdue_time }}</text>
              <text v-else-if="item.status == 2">过期时间：{{ item.real_overdue_time }}</text>
            </view>
            <view class="right">
              <view class="right-item frozen" v-if="item.status == 0">冻结中</view>
              <view class="right-item used" v-else-if="item.status == 1">可使用</view>
              <view class="right-item overdue" v-else-if="item.status == 2">已过期</view>
            </view>
          </view>
          <view class="info">
            <view class="info-block">
              <view class="label">总积分</view>
              <view class="num">{{ Number(item.integral_total).toFixed(2) || '0.00' }}</view>
            </view>
            <view class="info-block">
              <view class="label">已使用积分</view>
              <view class="num">{{ Number(item.integral_use).toFixed(2) || '0.00' }}</view>
            </view>
            <view class="info-block">
              <view class="label">可用积分</view>
              <view class="num">{{ item.status == 1 ? (Number(item.integral_total - item.integral_use).toFixed(2)) : '0.00' }}</view>
            </view>
          </view>
        </view>
      </view>
      <emptyPage v-else title="暂无信息～"></emptyPage>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import emptyPage from '@/components/emptyPage.vue';
import authorize from '@/components/Authorize';
import { HTTP_REQUEST_URL } from '@/config/app.js';
import {merShareholdersIntegralMerList, merShareholdersIntegralStatistics} from "@/api/user";

export default {
  components: {
    authorize,
    emptyPage
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      top_half_icon: '',
      // 列表
      list: [],
      total: 0,
      page: 1,
      mer_id: 0,
      statistics: {},
    }
  },
  watch: {},
  onReady() {
    this.top_half_icon = `${HTTP_REQUEST_URL}/static/images/icon/top_half_icon.jpg`;
  },
  onLoad(options) {
    let _this = this;
    _this.mer_id = options.mer_id || 0;
    // 判断：指定参数不存在 抛出错误，返回代理中心
    if(Number(_this.mer_id) <= 0){
      _this.$util.tips({ content: '非法访问，参数错误！'}, function () {
        uni.navigateTo({
          url: '/pages/users/shareholders/mer_center'
        })
      });
      return false;
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  // 滚动到底部
  onReachBottom() {
    this.getList();
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getList();
      this.getStatistics();
    },
    // 信息获取
    getList() {
      let _this = this;
      let params = {
        page: _this.page,
        mer_id: _this.mer_id
      };
      merShareholdersIntegralMerList(params).then(res => {
        let list = res.data.list || {};
        _this.total = res.data.count || 0;
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.page++;
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 统计信息获取
    getStatistics() {
      let _this = this;
      merShareholdersIntegralStatistics({mer_id: _this.mer_id}).then(res => {
        _this.statistics = res.data || {};
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 点击跳转页面
    goToPage(){
      uni.navigateTo({
        url: '/pages/users/online_payment/payment/index?mer_id=' + this.mer_id
      })
    }

  }
}
</script>

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

  .top{
    width: 100%;
    padding: 20rpx 30rpx;
    .top-content{
      width: 100%;
      border-radius: 20rpx;
      overflow: hidden;
      .top-half{
        width: 100%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding: 30rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        .left{
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: flex-start;
          .title{
            font-size: 28rpx;
            color: #fefefe;
          }
          .num{
            font-size: 50rpx;
            font-weight: bold;
            color: #ffffff;
            height: 80rpx;
            line-height: 100rpx;
          }
        }
        .right{
          .use-btn{
            background-color: #ffffff;
            color: #d40100;
            border-radius: 100rpx;
            padding: 0 20rpx;
            height: 45rpx;
            line-height: 45rpx;
          }
        }
      }
      .bottom-half{
        width: 100%;
        padding: 20rpx 30rpx;
        background-color: #c80000;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .bottom-box{
          width: calc(100% / 3);
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          .label{
            color: #fefefe;
            height: 40rpx;
            line-height: 40rpx;
          }
          .num{
            color: #ffffff;
            height: 40rpx;
            line-height: 50rpx;
          }
        }
      }
    }
  }

  .list-content{
    width: 100%;

    .list-box{
      width: 100%;
      padding: 0 30rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
      .up{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #f4f4f4;//#f4f4f4
        padding: 20rpx 0;
        .left{
          color: #202020;
        }
        .right{
          .right-item{
            color: #fefefe;
            border-radius: 100rpx;
            padding: 0 20rpx;
            font-size: 26rpx;
            height: 40rpx;
            line-height: 40rpx;
          }
          .frozen{
            background-color: #d39a01;
          }
          .used{
            background-color: #d40001;
          }
          .overdue{
            background-color: #a0a0a0;
          }
        }
      }
      .info{
        width: 100%;
        padding: 30rpx 0;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .info-block{
          width: calc(100% / 3);
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          .label{
            color: #848484;
            height: 40rpx;
            line-height: 40rpx;
          }
          .num{
            font-size: 32rpx;
            color: #131313;
            height: 40rpx;
            line-height: 50rpx;
          }
        }
      }
    }
  }


}
</style>
