<!--分销商积分明细列表-->
<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view>
		<view class="tab color-bg">
      <!--时间选择-->
			<view class="tab-left">
				<picker mode="date" :value="searchType.date" @change="bindDateChange" fields="month">
					<view class="uni-input">
						{{ date }}
						<text class="iconfont iconiconangledown"></text>
					</view>
				</picker>
			</view>
      <!--选择类型-->
			<view class="tab-right">
				<picker @change="bindPickerChange" :value="type_index" :range="type_list" class="picker" range-key="label">
					<text class="desc uni-input">{{ type_list[type_index].label }}</text>
					<text class="iconfont iconiconangledown"></text>
				</picker>
			</view>
		</view>
    <!--明细列表-->
    <mescroll-uni @getData="getAccountInfo" class="member-point" ref="mescroll">
      <view slot="list">
        <block v-if="Object.keys(list).length > 0">
          <view class="detailed-wrap">
            <view class="cont">
              <view class="detailed-item" v-for="(item, index) in list" :key="index">
                <view class="info">
                  <view class="event">{{ item.remarks }}</view>
                  <view class="time-box">
                    <text class="time color-tip">{{ $util.timeStampTurnTime(item.create_time) }}</text>
                  </view>
                </view>
                <view class="num increase-number color-base-text" v-if="parseInt(item.status) === 1">+{{ item.money }}</view>
                <view class="num reduce-number" v-else>{{ item.money }}</view>
              </view>
            </view>
          </view>
        </block>
        <block v-else>
          <view class="cart-empty">
            <ns-empty></ns-empty>
          </view>
        </block>
      </view>
    </mescroll-uni>
    <!--加载动画-->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
      date: currentDate,
      // 搜索时间
      searchType: {
        account_type: 0,
        date: ''
      },
      // 搜索类型
      type_index: 0,
      type_list: [
        {label: '积分', value: '0', type: 'integral'},
        {label: '桑果', value: '1', type: 'integral_money'},
      ],
      // 用户信息
      memberInfo: {},
      // 列表信息
      list: [],

		};
	},
	onShow() {
		if (!uni.getStorageSync('token')) {
			this.$util.redirectTo(
				'/pages_tool/login/login',
				{
					back: '/pages_tool/member/point'
				},
				'redirectTo'
			);
		}
		this.getMemberInfo();
	},
	onLoad(option) {
    let integral_type = option.integral_type;
    if(integral_type === 'integral') this.type_index = 0;
    else if(integral_type === 'integral_money') this.type_index = 1;
	},
	computed: {},
	methods: {
    // 时间初始化
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}年${month}月`;
    },
    // 会员信息
    getMemberInfo() {
      this.$api.sendRequest({
        url: '/api/member/info',
        success: res => {
          if (res.code >= 0) {
            this.token = uni.getStorageSync('token');
            this.memberInfo = res.data;
            this.getAccountInfo();
          } else {
            this.token = null;
          }
        }
      });
    },
		//获取个人账户信息列表
		getAccountInfo(mescroll) {
      let _this = this;
      if(!mescroll) return false;

      _this.$api.sendRequest({
        url: '/fenxiao/api/account/account_list',
        data: {
          page: mescroll.num,
          account_type: _this.type_list[_this.type_index].type,
          date: _this.searchType.date,
        },
        success: res => {
          if(parseInt(res.code) === 0){
            let list = res.data.list;
            mescroll.endSuccess(list.length);
            //设置列表数据
            if (parseInt(mescroll.num) === 1) this.list = []; //如果是第一页需手动制空列表
            this.list = this.list.concat(list); //追加新数据

          }else{
            this.$util.showToast({
              title: res.message
            });
          }
          // 关闭弹框
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: res => {
          mescroll.endErr();
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
		},
    // 变更类型
    bindPickerChange(e) {
      this.type_index = e.detail.value;
      this.searchType.account_type = this.type_list[this.type_index].type;
      this.$refs.mescroll.refresh();
    },


	}
};
</script>

<style lang="scss">
/deep/ .fixed {
	position: relative;
	top: 0;
}

.tab {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	height: 80rpx;
	background-color: $color-bg;

	view {
		flex: 1;
		text-align: center;
		line-height: 80rpx;

		text {
			margin-left: 10rpx;
			font-size: $font-size-base;
		}
	}
	.tab-left{
		display: flex;
		padding-left: 30rpx;
	}
	.tab-right{
		display: flex;
		justify-content: flex-end;
		padding-right: 40rpx;
	}
}

.cart-empty {
	margin-top: 208rpx !important;
}

.account-box {
	width: 100%;
	box-sizing: border-box;
	position: relative;

	> image {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
	}

	.accout-btn {
		display: flex;
		margin-top: 30rpx;

		view {
			width: 170rpx;
			height: 44rpx;
			border-radius: 22rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.4);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 44rpx;
		}
	}

	.account-text {
		position: relative;
		padding: 50rpx 30rpx 34rpx 30rpx;
		display: flex;
		align-items: center;
		z-index: 9;

		.headimg {
			width: 100rpx;
			height: 100rpx;
			background: #fff;
			border: 4rpx solid #fff;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.point {
			margin-left: 30rpx;
			color: #fff;
			font-size: 36rpx;
		}

		.iconjifen1 {
			color: #fff;
			margin-left: 8rpx;
		}
	}
}

.detailed-wrap {
	background: #fff;
	position: relative;
	z-index: 9;
	padding-top: 80rpx;

	.head {
		display: flex;
		height: 90rpx;

		& > view {
			flex: 1;
			text-align: left;
			padding: 0 $padding;
			line-height: 90rpx;
		}
	}

	.cont {
		background: #fff;
		width: 100%;
		margin: 0 auto;

		.detailed-item {
			padding: 30rpx 0 32rpx;
			margin: 0 32rpx;
			border-bottom: 2rpx solid $color-line;
			position: relative;
			box-sizing: border-box;

			&:last-of-type {
				border-bottom: none;
			}

			.info {
				padding-right: 180rpx;

				.event {
					font-size: $font-size-base;
					line-height: 1.3;
					font-weight: 500;
				}

				.time-box {
					line-height: 1;
					margin-top: 24rpx;
				}

				.time {
					font-size: $font-size-activity-tag;
					color: $color-tip;
				}
			}

			.num {
				width: 160rpx;
				position: absolute;
				right: 17rpx;
				top: 50%;
				transform: translateY(-50%);
				text-align: right;
				font-size: $font-size-toolbar;
				font-weight: 500;
			}
		}
	}
}
/deep/ .increase-number{
  color: #07c160!important;
}
/deep/ .reduce-number{
   color: #ee0a24!important;
}
</style>
