<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="container">
		<view class="empty-box"></view>
		<view class="withdraw-wrap" :class="{'ios': !$util.isAndroid()}">
			<view class="title">桑果将{{ fenxiaoWords.withdraw }}到余额</view>
			<view class="money-wrap">
				<text class="unit">¥</text>
				<input type="digit" class="withdraw-money" v-model="withdrawMoney"/>
			</view>
			<view class="bootom">
				<view>
					<text class="color-tip">
						可{{ fenxiaoWords.withdraw }}桑果：¥{{ fenxiaoInfo.integral_money | moneyFormat }}
					</text>
				</view>
			</view>
		</view>
		<view class="desc">
			<text>最小{{ fenxiaoWords.withdraw }}桑果为¥{{ withdrawConfig.co_money | moneyFormat }}</text>
		</view>
		<view class="btn color-base-bg color-base-border" :class="{ disabled: withdrawMoney == '' || withdrawMoney == 0 }" @click="withdraw">
			{{ fenxiaoWords.withdraw }}到余额
		</view>
    <view class="withdraw-list btn" @click="$util.redirectTo('/pages_tool/member/integral/apply_record',{key:'integral_money'})">
      <view class="color-tip">桑果明细</view>
    </view>
    <!--加载动画-->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>

</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
	data() {
		return {
			fenxiaoInfo: {
				account: 0
			},
			withdrawConfig: {
				withdraw: 0
			},
			withdrawMoney: '',
			isSub: false,
      list: [],
		};
	},
	components: {},
	mixins: [fenxiaoWords],
	onShow() {
    // 设置页面标题
    if (this.fenxiaoWords && this.fenxiaoWords.withdraw) this.$langConfig.title('桑果' + this.fenxiaoWords.withdraw);
    // 获取基础信息
		if (uni.getStorageSync('token')) {
			this.getFenxiaoInfo();
			this.getWithdrawConfig();
		} else {
			this.$util.redirectTo('/pages_tool/login/login', {
				back: '/pages_tool/member/integral/apply'
			});
		}
	},
	methods: {
    // 申请提现
		withdraw() {
			if (this.verify()) {
				if (this.isSub) return;
				this.isSub = true;
				this.$api.sendRequest({
					url: '/fenxiao/api/withdraw/integral_money_apply',
					data: {
						money: this.withdrawMoney
					},
					success: res => {
						if (res.code >= 0) {
							this.$util.showToast({
								title: '提现申请成功'
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages_tool/member/point',{key:'integral_money'});
							}, 1500);
						} else {
							this.isSub = false;
							this.$util.showToast({ title: res.message });
						}
					},
					fail: res => {
						this.isSub = false;
					}
				});
			}
		},
		verify() {
			console.log(this.fenxiaoInfo,this.withdrawConfig)
			if (this.withdrawMoney == '' || this.withdrawMoney == 0 || isNaN(parseFloat(this.withdrawMoney))) {
				this.$util.showToast({ title: '请输入提现金额' });
				return false;
			}
			if (parseFloat(this.withdrawMoney) > parseFloat(this.fenxiaoInfo.co_money)) {
				this.$util.showToast({ title: '提现桑果超出可提现数量' });
				return false;
			}
			if (parseFloat(this.withdrawMoney) < parseFloat(this.withdrawConfig.co_money)) {
				this.$util.showToast({ title: '提现金额小于最低提现金额' });
				return false;
			}
			if(this.withdrawConfig.withdraw_multiple==2&&(parseFloat(this.withdrawMoney)%this.withdrawConfig.co_money)!=0){
				this.$util.showToast({ title: '提现金额为最低提现金额倍数' });
				return false;
			}	
			return true;
		},
		// 获取佣金提现配置
		getWithdrawConfig() {
			this.$api.sendRequest({
				url: '/fenxiao/api/config/withdraw',
				success: res => {
					if (res.code >= 0) {
						this.withdrawConfig = res.data;
					}
				}
			});
		},
		// 获取分销商信息
		getFenxiaoInfo() {
			this.$api.sendRequest({
				url: '/fenxiao/api/fenxiao/detail',
				success: res => {
					if (res.code >= 0 && res.data) {
						this.fenxiaoInfo = res.data;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},

	},
	onReady() {
		this.$refs.loadingCover.hide();
	}
};
</script>

<style lang="scss">
.container {
	width: 100vw;
	height: 100vh;
	background: $color-bg;
}

.align-right {
	text-align: right;
}

.withdraw-wrap {
	margin: 20rpx 30rpx 0;
	padding: 30rpx;
	border-radius: 10rpx;
	background-color: #fff;
	
	.title {
		font-size: $font-size-base;
		color: $color-tip;
	}

	.money-wrap {
		padding: 20rpx 0;
		border-bottom: 1rpx solid $color-line;
		display: flex;
		align-items: center;
		.unit {
			font-size: 60rpx;
			line-height: 1;
		}
		.withdraw-money {
			height: 70rpx;
			line-height: 70rpx;
			min-height: 70rpx;
			padding-left: 20rpx;
			font-size: 60rpx;
			flex: 1;
			font-weight: 500;
			vertical-align: top;
			display: block;
		}
	}
	&.ios{
		.money-wrap {
			.unit {
				margin-top: 10rpx;
			}
		}
	}

	.bootom {
		display: flex;
		padding-top: 30rpx;

		& > view {
			font-size: $font-size-base;
			line-height: 1;
			flex: 1;
		}
	}
}

.btn {
	margin: 0 30rpx;
	margin-top: 60rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: $border-radius;
	color: var(--btn-text-color);
	text-align: center;

	&.disabled {
		background: #ccc;
		border-color: #ccc;
		color: var(--btn-text-color);
	}
}

.desc {
	margin: 20rpx 40rpx;
	font-size: $font-size-tag;
	color: $color-tip;
}

.withdraw-list {
	border: 2rpx solid $color-disabled;
	text-align: center;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/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>