<template>
	<view :style="viewColor">
		<view class='integral-details'>
			<view class='header'>
				<view class='currentScore'>当前积分 <text @click="showProtocol=true" class="iconfont wenhao">?</text></view>
				<view class="scoreNum">{{userInfo.integral ? userInfo.integral : 0}}</view>
				<view class='line'></view>
				<view class='nav acea-row'>
					<view class='item'>
						<view class='num'>{{userInfo.totalGainIntegral || 0}}</view>
						<view>累计积分</view>
					</view>
					<view class='item'>
						<view class='num'>{{userInfo.deductionIntegral || 0}}</view>
						<view>累计消费</view>
					</view>
					<view class='item'>
						<view class='num'>{{userInfo.platform_integral || 0}}</view>
						<view>平台积分</view>
					</view>
				</view>
			</view>
			<view class='wrapper'>
				<view class='nav acea-row'>
					<view class='item acea-row row-center-wrapper' :class='current==index?"on":""' v-for="(item,index) in navList" :key='index' @click='nav(index)'>
            <text class='iconfont' :class="item.icon"></text>{{item.name}}
          </view>
				</view>

				<view class='list' :hidden='current != 0' >
					<!--<view class='tip' v-if="userInfo.clear && userInfo.clear.status && userInfo.clear.nextClearIntegral > 0"><text class='iconfont icon-shuoming'></text>
						<text class="tip-text">提示：您有部分积分将于{{userInfo.clear.nextClearDay}}过期，请尽快使用！</text>
					</view>-->
					<view class='item acea-row row-between-wrapper' v-for="(item,index) in integralList" :key="index">
						<view class="item-title-and-time">
							<view class='state'>{{item.mark}}</view>
							<view>{{item.create_time}}</view>
						</view>
						<view class='num p-color' v-if="item.pm">+{{item.number}}</view>
						<view class='num' v-else>-{{item.number}}</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' v-if="integralList.length>0">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view>
					<view v-if="integralList.length == 0">
						<emptyPage title="暂无积分记录哦～"></emptyPage>
					</view>
				</view>


<!--				<view v-if="integral_status" class='list2' :hidden='current!=1'>
					<navigator class='item acea-row row-between-wrapper' open-type='switchTab' hover-class='none' url='/pages/index/index'>
						<view class='pictrue'>
							<image src='../../../static/images/score.png'></image>
						</view>
						<view class='name'>购买商品可获得积分奖励</view>
						<view class='earn'>赚积分</view>
					</navigator>
					<navigator class='item acea-row row-between-wrapper' hover-class='none' url='/pages/users/user_sgin/index'>
						<view class='pictrue'>
							<image src='../../../static/images/score.png'></image>
						</view>
						<view class='name'>每日签到可获得积分奖励</view>
						<view class='earn'>赚积分</view>
					</navigator>
					&lt;!&ndash;#ifndef APP-PLUS&ndash;&gt;
					<view class='item acea-row row-between-wrapper' @click="shareIntegral">
						<view class='pictrue'>
							<image src='../../../static/images/score.png'></image>
						</view>
						<view class='name'>邀请好友可获得积分奖励</view>
						<view class='earn'>赚积分</view>
					</view>
					&lt;!&ndash;#endif&ndash;&gt;
				</view>-->

        <view class='list2' :hidden='current != 1'>
          <view v-if="Object.keys(mer_integral_list).length > 0" class="mer-integral-list">
            <view class="list-item" v-for="(item,index) in mer_integral_list" :key="index">
              <view class="left-avatar">
                <image v-if="item.mer_avatar.length > 10" :src="item.mer_avatar" mode="widthFix"/>
              </view>
              <view class="center-info">
                <view class="info-top">
                  <view class="nickname">{{ item.mer_name }}</view>
                  <view class="custom-id">{{ item.mer_id}}</view>
                </view>
                <view class="info-bottom">积分：{{ item.number }}</view>
              </view>
              <view class="right-btn">
                <view v-if="item.mer_integral_platform_rate > 0" class="give-btn" @click="showIntegralConvertPopup(item)">转换积分</view>
                <view v-else class="give-btn">转换积分</view>
              </view>
            </view>
          </view>
          <view v-else>
            <emptyPage title="暂无积分记录哦～"></emptyPage>
          </view>
        </view>


			</view>
		</view>
		<view class="instructions" v-if="showProtocol">
			<view class="setAgCount">
				<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
				<div class="title">积分说明</div>
				<view class="content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    <!-- 转换积分弹框 -->
    <uni-popup ref="integralChangePopup">
      <view class="integral-change">
        <view class="integral-change-content">
          <view class="title">转换积分</view>
          <view class="form-content">
            <view class="form-content-box">
              <view class="box-title">商户名称：</view>
              <view class="box-value">{{ current_mer_info.mer_name }}</view>
            </view>
            <view class="form-content-box">
              <view class="box-title">当前持有该积分：</view>
              <view class="box-value">{{ current_mer_info.number }}</view>
            </view>
            <view class="form-content-box">
              <view class="box-title">转换比例：</view>
              <view class="box-value">1 : {{ current_mer_info.mer_integral_platform_rate }}</view>
            </view>
            <view class="form-content-box">
              <view class="box-title">转换数量：</view>
              <view class="box-value">
                <input type='number' placeholder='请输入转换数量' v-model.number="convert_integral" />
              </view>
            </view>
            <view class="form-content-box" v-if="expected_acquisition > 0">
              <view class="box-title">预计获得：</view>
              <view class="box-value">{{ expected_acquisition }} 平台积分</view>
            </view>
          </view>
          <view class="submit-button">
            <view class="submit-btn" @click="submitConvertIntegral">提交</view>
          </view>
        </view>
      </view>
    </uni-popup>


	</view>
</template>

<script>

import {getIntegralInfo, getIntegralList, getAgreementApi, getMerchantIntegral, convertMerchantIntegral} from '@/api/user.js';
import {
  mapGetters
} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';
import parser from "@/components/jyf-parser/jyf-parser";
import spread from "../../../libs/spread";

const app = getApp();
export default {
  components: {
    authorize,
    emptyPage,
    "jyf-parser": parser,
  },
  data() {
    return {
      navList: [{
        'name': '分值明细',
        // 'icon': 'icon-mingxi'
      },
        {
          'name': '商户积分',
          // 'icon': 'icon-tishengfenzhi'
        }
      ],
      current: 0,
      page: 1,
      limit: 10,
      integralList: [],
      userInfo: {},
      loadend: false,
      loading: false,
      loadTitle: '加载更多',
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      showProtocol: false,
      protocol: '',
      tagStyle: {
        img: 'width:100%;display:block;',
        video: 'width:100%;'
      },
      integral_status: true,
      // 商户积分相关
      mer_integral_list: [],
      mer_page: 1,
      convert_integral: 0,// 要转换的积分数量
      current_mer_info: {},// 当前商户信息
    };
  },
  // computed: mapGetters(['isLogin', 'viewColor']),
  computed: {
    expected_acquisition: function() {
      // 判断：是否超出持有积分
      if(this.current_mer_info.number < this.convert_integral) this.convert_integral = this.current_mer_info.number;
      // 计算应得平台积分
      let expectedAcquisition = Math.ceil(this.current_mer_info.mer_integral_platform_rate * this.convert_integral);

      return isNaN(expectedAcquisition) ? 0 : expectedAcquisition;
    },
    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    if (this.isLogin) {
      this.getUserInfo();
    } else {
      this.isAuto = true;
      this.isShowAuth = true
    }
    this.getAgreement();

    // 关系处理
    if(options.spread) spread(options.spread, this.isLogin)
  },
  onReachBottom: function () {
    this.getIntegralList();
    this.getMerchantIntegral();
  },
  methods: {
    /**
     * 授权回调
     */
    onLoadFun: function () {
      this.isShowAuth = false;
      this.getUserInfo();
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },
    getUserInfo: function () {
      let that = this;
      getIntegralInfo().then(function (res) {
        that.$set(that, 'userInfo', res.data);
        that.getIntegralList();
        that.getMerchantIntegral();
      }).catch(res => {
        this.integral_status = false
        return that.$util.Tips({
          title: res
        });
      });
    },
    /*获取积分说明*/
    getAgreement() {
      let that = this
      getAgreementApi('sys_integral_rule').then(res => {
        that.protocol = res.data.sys_integral_rule
      })
    },
    /**
     * 获取积分明细
     */
    getIntegralList: function () {
      let that = this;
      if (that.loading) return;
      if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      getIntegralList({
        page: that.page,
        limit: that.limit
      }).then(function (res) {
        let list = res.data.list,
            loadend = list.length < that.limit;
        that.integralList = that.$util.SplitArray(list, that.integralList);
        that.$set(that, 'integralList', that.integralList);
        that.page = that.page + 1;
        that.loading = false;
        that.loadend = loadend;
        that.loadTitle = loadend ? '哼~😕我也是有底线的~' : "加载更多";
      }, function (res) {
        this.loading = false;
        that.loadTitle = '加载更多';
      });
    },
    shareIntegral() {
      uni.setStorageSync('isIntegral', true)
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    nav: function (current) {
      this.current = current;
    },
    // 获取商户积分列表
    getMerchantIntegral() {
      let _this = this;
      // 发起请求
      getMerchantIntegral({ page: _this.mer_page }).then(res => {
        let list = res.data.list || {};
        if(Object.values(list).length > 0){
          _this.mer_integral_list = _this.$util.SplitArray(list, _this.mer_integral_list);
          _this.$set(_this, 'mer_integral_list', _this.mer_integral_list);
          _this.mer_page++;
        }
      }).catch(err => {
        console.log("错误 catch：",err);
      })
    },
    // 转换积分 - 初始化并且显示弹框
    showIntegralConvertPopup(item){
      let _this = this;
      _this.convert_integral = 0;
      _this.current_mer_info = item;
      _this.$refs.integralChangePopup.open('center');
    },
    // 转换积分 - 确认提交
    submitConvertIntegral(){
      let _this = this;
      // 发起请求
      convertMerchantIntegral(_this.current_mer_info.mer_id, { convert_integral: _this.convert_integral }).then(res => {
        // 关闭弹框
        _this.$refs.integralChangePopup.close();
        // 刷新
        _this.mer_integral_list = [];
        _this.mer_page = 1;
        _this.getMerchantIntegral();
        // 提示
        uni.showModal({
          title: '提示',
          content: res.message,
        });
      }).catch(err => {
        uni.showModal({
          title: '提示',
          content: err,
        });
        console.log("错误 catch：",err);
      })
    }
  },
  // #ifdef MP
  // 分享给好友
  onShareAppMessage () {
    let pages = getCurrentPages();
    let page = pages[pages.length - 1]
    let shareData = {
      title: '积分详情',
      path: page.$page.fullPath || '/' + page.route,
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // 分享到朋友圈
  onShareTimeline() {
    let shareData = {
      title: '积分详情',
      query: {},
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.query.spread = this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // #endif
}
</script>

<style scoped lang="scss">
page {
  background-color: #fff;
}
.integral-details .header {
  background-image: url('data:image/png;base64, ');
  background-color: var(--view-theme);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 460rpx;
  font-size: 72rpx;
  color: #fff;
  padding: 31rpx 0 45rpx 0;
  box-sizing: border-box;
  text-align: center;
}
.integral-details .header .currentScore {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 11rpx;
}
.currentScore .wenhao {
  display: inline-block;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  // font-size: 20rpx;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, .8);
  color: var(--view-theme);
  margin-left: 4rpx;
}
.wenhao {
  margin-top: -10rpx;
}
.integral-details .header .line {
  width: 60rpx;
  height: 3rpx;
  background-color: #fff;
  margin: 20rpx auto 0 auto;
}
.integral-details .header .nav {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  margin-top: 35rpx;
}
.integral-details .header .nav .item {
  width: 33.33%;
  text-align: center;
}
.integral-details .header .nav .item .num {
  color: #fff;
  font-size: 40rpx;
  margin-bottom: 5rpx;
}
.integral-details .wrapper .nav {
  flex: 1;
  width: 690rpx;
  border-radius: 20rpx 20rpx 0 0;
  margin: -96rpx auto 0 auto;
  background-color: #f7f7f7;
  height: 96rpx;
  font-size: 30rpx;
  color: #bbb;
}
.integral-details .wrapper .nav .item {
  text-align: center;
  width: 50%;
}
.integral-details .wrapper .nav .item.on {
  background-color: #fff;
  color: var(--view-theme);
  font-weight: bold;
  border-radius: 20rpx 0 0 0;
}
.p-color {
  color: var(--view-priceColor);
}
.integral-details .wrapper .nav .item:nth-of-type(2).on {
  border-radius: 0 20rpx 0 0;
}
.integral-details .wrapper .nav .item .iconfont {
  font-size: 38rpx;
  margin-right: 10rpx;
}
.integral-details .wrapper .list {
  background-color: #fff;
  padding: 24rpx 30rpx;
}
.integral-details .wrapper .list .tip {
  font-size: 25rpx;
  width: 690rpx;
  border-radius: 50rpx;
  background-color: #fff5e2;
  border: 1px solid #ffeac1;
  color: #c8a86b;
  padding: 10rpx 20rpx 10rpx 55rpx;
  box-sizing: border-box;
  margin-bottom: 24rpx;
  position: relative;
}
.integral-details .wrapper .list .tip .iconfont {
  font-size: 35rpx;
  margin-right: 15rpx;
  position: absolute;
  top: 10rpx;
  left: 16rpx;
}
.integral-details .wrapper .list .item {
  height: 124rpx;
  border-bottom: 1px solid #eee;
  font-size: 24rpx;
  color: #999;
}
.integral-details .wrapper .list .item .state {
  font-size: 28rpx;
  color: #282828;
  margin-bottom: 8rpx;
}
.integral-details .wrapper .list .item .num {
  font-size: 36rpx;
}
.integral-details .wrapper .list2 {
  background-color: #fff;
  padding: 24rpx 0;
}
.integral-details .wrapper .list2 .item {
  background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
  width: 690rpx;
  height: 180rpx;
  position: relative;
  border-radius: 10rpx;
  margin: 0 auto 20rpx auto;
  padding: 0 25rpx 0 180rpx;
  box-sizing: border-box;
}
.integral-details .wrapper .list2 .item .pictrue {
  width: 90rpx;
  height: 150rpx;
  position: absolute;
  bottom: 0;
  left: 45rpx;
}
.integral-details .wrapper .list2 .item .pictrue image {
  width: 100%;
  height: 100%;
}
.integral-details .wrapper .list2 .item .name {
  width: 285rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #c8a86b;
}
.integral-details .wrapper .list2 .item .earn {
  font-size: 26rpx;
  color: #c8a86b;
  border: 2rpx solid #c8a86b;
  text-align: center;
  line-height: 52rpx;
  height: 52rpx;
  width: 160rpx;
  border-radius: 50rpx;
}
.instructions {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 10;
}
.instructions .setAgCount {
  background: #fff;
  width: 656rpx;
  height: 458px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 12rpx;
  -webkit-border-radius: 12rpx;
  padding: 52rpx;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;

  .content {
    height: 900rpx;
    overflow-y: scroll;

    /deep/ p {
      font-size: 13px;
      line-height: 22px;
    }

    /deep/ img {
      max-width: 100%;
    }
  }
}
.instructions .setAgCount .icon {
  font-size: 42rpx;
  color: #b4b1b4;
  position: absolute;
  top: 15rpx;
  right: 15rpx;
}
.instructions .setAgCount .title {
  color: #333;
  font-size: 32rpx;
  text-align: center;
  font-weight: bold;
}
.instructions .setAgCount .content {
  margin-top: 32rpx;
  color: #333;
  font-size: 26rpx;
  line-height: 22px;
  text-align: justify;
  text-justify: distribute-all-lines;
  height: 756rpx;
  overflow-y: scroll;
}
.item-title-and-time{
  width: calc(100% - 200rpx) !important;
}

.mer-integral-list{
  width: 100vw;
  background: #FFFFFF;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  .list-item:not(:last-child){
    border-bottom: 2rpx solid #f6f6f6;// #f6f6f6
  }
  .list-item{
    --item-height-value-: 100rpx;

    width: 100vw;
    padding: 20rpx 30rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .left-avatar{
      width: 100rpx;
      height: var(--item-height-value-);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      image{
        width: 80rpx !important;
        height: 80rpx !important;
        border-radius: 50% !important;
      }
    }
    .center-info{
      width: calc(100% - 100rpx - 150rpx);
      height: var(--item-height-value-);
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      padding-left: 10rpx;
      .info-top{
        width: 100%;
        height: calc(100rpx - 40rpx);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        .nickname{
          font-size: 28rpx;
        }
        .custom-id{
          background: #ffeed5;
          padding: 0rpx 8rpx;
          border-radius: 50rpx;
          font-size: 23rpx;
          color: #f8cc88;
          width: max-content;
          height: 30rpx;
          line-height: 30rpx;
          margin-left: 10rpx;
        }
      }
      .info-bottom{
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 26rpx;
        color: #9e9e9e;
      }
    }
    .right-btn{
      width: 150rpx;
      height: var(--item-height-value-);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      .give-btn{
        background: #ea9a1f;
        padding: 6rpx 15rpx;
        border-radius: 50rpx;
        font-size: 26rpx;
        color: #FFFFFF;
        width: max-content;
      }
    }
  }
}
.integral-change{
  width: 100vw;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;

  .integral-change-content{
    width: calc(100vw - (20rpx * 2) - (30rpx * 2));
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;

    .title{
      width: 100%;
      text-align: center;
      font-size: 30rpx;
      font-weight: 600;
      height: 60rpx;
      line-height: 45rpx;
      margin-bottom: 35rpx;
    }
    .form-content{
      width: 100%;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: flex-start;
      .form-content-box:not(:last-child){
        margin-bottom: 20rpx;
      }
      .form-content-box{
        --box-width-: 240rpx;

        width: 100%;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        line-height: 60rpx;
        .box-title{
          width: var(--box-width-);
          text-align: right;
          font-size: 28rpx;
        }
        .box-value{
          width: calc(100% - var(--box-width-));

          .image-size-set{
            width: 210rpx;
            height: 210rpx;
            border: 2rpx solid #dddddd;
            border-radius: 8rpx;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: nowrap;
            align-items: center;

            image{
              max-width: 100% !important;
              max-height: 100% !important;
            }
          }

          .upload-btn-box{
            font-size: 24rpx;
            color: #999999;
            display: inline-flex;
            flex-direction: column!important;
            justify-content: center;
            flex-wrap: nowrap;
            align-items: center;
            .upload-btn-icon{
              width: 45rpx !important;
            }
          }



        }
      }
      .image-img{
        position: relative;
        border: unset!important;
        .change-image-btn{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          text-align: center;
          font-size: 24rpx!important;
          height: 40rpx;
          line-height: 40rpx;
          background: rgba(0,0,0,.5);
          color: #FFFFFF;
        }
      }
    }
    .submit-button{
      width: 100%;
      margin-top: 60rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .submit-btn{
        color: #fff;
        background-color: #437ffd;
        border-color: #437ffd;
        padding: 10rpx 25rpx;
        font-size: 24rpx;
        border-radius: 6rpx;
      }
    }
  }
}

</style>
