<template>
  <view class="tixian">
    <view class="top-bg">
      <view class="class1">可提现总额</view>
      <view class="class2">¥ {{ mayMoney }}</view>

      <view class="class3">
        <view class="class4" style="">
          <view class="color-333 u-font-32">提现金额
            <!-- <text style="font-size: 28upx;color: #ff7581;"
              v-if="shouxufei">（注：提现手续费为{{shouxufei * 100}}%）</text> -->
          </view>
        </view>
        <view class="u-flex flex-row justify-between align-center" style="padding: 20upx">
          <view class="flex align-center">
            <view class="color-333" style="font-size: 40upx;">¥</view>
            <input type="number" v-model="money" placeholder="请输入金额" @input="ymfmoneyInput" @blur="ymfymfmoneyBlur"
              class="color-333 u-text-left u-m-l-10 u-font-40" style="width: 80%;" />
          </view>
          <view @click="ymfsetAllMoney" class="u-font-28 color-333 u-p-l-15 u-p-r-15 u-p-t-16 u-p-b-16 flex-0 "
            style="background: #ff7581;color: white;border-radius: 10rpx;">
            全部
          </view>

        </view>
        <!-- <view style="background: #E6E6E6;width: 100%;height: 1upx;"></view> -->

        <!-- <view style="display: flex;flex-direction: row;flex-wrap: wrap;">
          <view style="display: flex;flex-direction: row;" v-for="(item, index) in tixianList" :key="index">
            <view>
              <view style="padding: 20upx;" @click="ymfymfgetOut1(item.money)">
                <view
                  style="padding-top: 40upx;width: 180upx; height: 120upx;background-color: #FFFFFF;border:1px solid #ff7581;border-radius: 10upx;">
                  {{ item.money }}
                </view>
              </view>
            </view>
          </view>
        </view> -->
      </view>
      <view @click="ymfgetOut" class="u-m-40 u-font-36 color-fff u-border-10"
        style="background: #ff7581;border-radius: 10px;height: 80rpx;line-height: 80rpx;">
        <!-- 提现 -->
        立即提现
        <!-- {{ !isWithdraw ? '观看广告提现' : '立即提现' }} -->
      </view>

      <view class="flex w-full justify-center ">
     <!--   <view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="ymfgoaliZhiFuBao">
          提现账号
        </view> -->
       <view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="shimingrenzhi">
         实名认证
       </view>
	   <view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="ymfgoqianbao">
	     红包明细
	   </view>
        <!-- <view style="color: grey;padding-bottom: 30px;padding-top: 20upx;width: 33%;" @click="ymfgojilu">提现记录
        </view> -->
      </view>

      <view style="text-align: left" class="tixianList u-p-b-30">
        <view v-if="list.length" v-for="(item, index) in list" :key="index" class="item">
          <view>
            <view style="margin-bottom: 8rpx;text-align: right;">
              <text style="margin-bottom: 8rpx;color: green" v-if="item.state === 1"> 提现成功</text>
              <text style="margin-bottom: 8rpx;color: green" v-if="item.state === 0"> 提现中</text>
              <text style="margin-bottom: 8rpx;color: #FD6416" v-if="item.state === -1 || item.state === 2">
                提现失败
              </text>
            </view>

            <view style="color: #999999;font-size: 28upx;">
              <view class="u-m-t-8"> 收款人账号：{{ item.zhifubao }}</view>
              <view class="u-m-t-8"> 收款人姓名：{{ item.zhifubaoName }}</view>
              <view class="u-m-t-8"> 发起时间：{{ item.createAt }}</view>
              <view class="u-m-t-8" v-if="item.state === 1">成功时间 {{ item.outAt }}</view>
              <view style="margin-bottom: 8rpx;color: #FD6416" v-if="item.state === -1 || item.state === 2">
                失败原因：{{ item.refund }}
              </view>

              <view style="margin-bottom: 8rpx;text-align: right;">
                <!-- 提现金额： -->
                <text style="color: #FD6416;font-size: 32upx;font-weight: 600"> ￥{{ item.money }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="page-box" v-if="!list.length">
          <view class="centre">
            <image src="../../static/images/learn/none.png" mode=""></image>
            <view class="tips">
              暂无记录
            </view>
          </view>
        </view>

      </view>

    </view>
    <u-modal v-model="ruleShow" confirm-text="知道了" title="规则说明" :title-style="{ fontWeight: '700' }"
      confirm-color="rgb(255, 117, 129)">
      <view class="u-p-30 u-text-left">
        <scroll-view scroll-y="true" style="max-height: 50vh;">
          <rich-text class="color-666" :nodes="ruleInfo"></rich-text>
        </scroll-view>
      </view>

    </u-modal>
    <!-- 激励视频广告 -->
    <ad-rewarded-video v-if="adRewardedVideo" ref="adRewardedVideo" adpid="1531580352" :loadnext="true"
      v-slot:default="{ loading, error }" :url-callback="urlCallback" @load="onadload" @close="onadclose"
      @error="onaderror">
      <view class="ad-error" v-if="error">{{ error }}</view>
    </ad-rewarded-video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      money: '',
      mayMoney: '0',
      shouxufei: '',
      tixianList: [{
        money: '10'
      },
      {
        money: '20'
      },
      {
        money: '50'
      },
      {
        money: '100'
      },
      {
        money: '200'
      },
      {
        money: '500'
      }
      ],
      value: 0,
      min: '',
      token: '',
      userId: '',
      aliZhiFuBao: '',
      aliZhiFuBaoName: '',
      list: [],
      page: 1,
      limit: 10,
      totalCount: 0,
      isWithdraw: false,
      urlCallback: null,
      adRewardedVideo: true,
      ruleShow: true,
      ruleInfo: `
				用户在平台中对奖励提现的，适用以下规则：
				<br/>
				<br/>
				1，用户的收益达到最低提现金额要求后，可以申请提现。每日发起前10笔提现为自动到账，超出则需第二个工作日后到账。
				<br/>
				2，用户需要通过支付宝提现，需按照要求绑定支付宝账号并填写提现金额或其他提现所需信息，请确保提供的信息准确无误，以免提现失败。
				<br/>
				3，如果用户发现显示「提现失败」，需确认当前填写或绑定的支付宝账号或银行卡账号是否正确，以及支付宝账号是否可用。如果用户发现显示「提现成功」但没到账
				<br/>
				(1)如果用户有多个支付宝账号，请检查用户是否提现到了其他支付宝账号。
				<br/>
				(2)高峰期提现人数多会导致网络拥堵，显示提现成功之后72小时内属于正常现象，请耐心等候。
				<br/>
				4，每日23:00至次日11:00为系统维护时间，活动的对应奖励可能延迟到账。提现通常会在72小时内到账，如遇双休日、节假日，提现到账时间可能会延长。活动高峰期间，由于网络拥堵，用户可能存在短时间内无法提现的情况。平台将尽最大努力及时恢复提现功能，但无需因此承担任何责任。
				<br/>
		`,
    };
  },
  onLoad() {
    this.ymfgetExtractFei();
    this.ymfymfgetMoneyDetail();
  },
  onShow() {
    this.token = uni.getStorageSync('token')
    this.userId = uni.getStorageSync('userId')
    this.aliZhiFuBao = uni.getStorageSync('zhiFuBao')
    this.aliZhiFuBaoName = uni.getStorageSync('zhiFuBaoName')
    this.ymfgetcashMoney()
    this.getCanCash()

  },
  onReachBottom: function () {
    if (this.page * this.limit < this.totalCount) {
      this.page = this.page + 1;
      this.ymfymfgetMoneyDetail();
    }
  },
  onPullDownRefresh: function () {
    this.page = 1;
    // that.list = []
    this.ymfymfgetMoneyDetail();
  },
  onNavigationBarButtonTap() {
    // this.list();
  },
  methods: {
	  shimingrenzhi(){
		  uni.navigateTo({
		  	url:'/me/yaoqing/realName'
		  })
	  },
    onNavigationBarButtonTap() {
      this.showRule()
    },
    showRule() {
      this.ruleShow = true
    },
    /**
       * 广告播放成功回调
       * @param {Object} e
       */
    async onadclose(e) {
      const detail = e.detail
      if (detail && detail.isEnded) {
        // 正常播放结束
        let res = await this.$Request.getT('app/ad/state', {
          extraKey: this.urlCallback.extra
        })
        this.getCanCash()
      } else {
        // 播放中途退出
      }
    },
    /**
   * 广告加载失败回调
   * @param {Object} e
   */
    onaderror(e) {
      if (this.adRewardedVideoloadNum >= 3) {
        this.adRewardedVideo = false;
        return
      }
      this.adRewardedVideoloadNum++
      setTimeout(() => {
        this.$refs.adRewardedVideo.load();
      }, 1000); // 10
      console.log("广告加载失败")
    },
    /**
     * 广告数据加载成功回调
     * @param {Object} e
     */
    onadload(e) {
      this.adRewardedVideo = true;
      console.log('广告数据加载成功');
    },

    getCanCash() {
      this.$Request.getT('/app/cash/canCash').then(res => {
        if (res.code == 0) {
          this.isWithdraw = res.data;
        } else {
          this.isWithdraw = false;
        }
      })
    },
    ymfmoneyInput(e) {
      let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      this.$nextTick(() => {
        this.money = num;
      });

    },
    ymfymfmoneyBlur(e) {
      let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      this.$nextTick(() => {
        this.money = num;
      });
    },
    ymfsetAllMoney() {
      this.money = Math.floor(this.mayMoney * 100) / 100
    },
    ymfymfgetMoneyDetail() {
      let that = this;
      let token = uni.getStorageSync('token')
      console.log(1);
      if (token) {
        //可以提现金额查询预估收入查询
        let data = {
          page: this.page,
          limit: this.limit
        }
        this.$Request.getT('/app/cash/selectPayDetails', data).then(res => {
          this.totalCount = res.data.totalCount;
          if (res.data.list.length > 0) {
            this.list = [...this.list, ...res.data.list];
          }
        })
      }

    },

    //获取收取费
    ymfgetExtractFei() {
      this.$u.get('app/common/type/152').then(res => {
        if (res.code === 0) {
          if (res.data && res.data.value) {
            this.shouxufei = res.data.value;
          }
        }
      });
      this.$u.get('app/common/type/112').then(res => {
        if (res.code === 0) {
          if (res.data && res.data.value) {
            this.cashMoney = res.data.value;
          }
        }
      });

    },
    // 可提现金额
    ymfgetcashMoney() {
      let data = {
        page: this.page,
        limit: this.limit
      }
      // this.$u.api.myPurseDet(data).then(res => {
      // 	if (res.code == 0) {
      // 		this.mayMoney = res.data.inviteMoney.money
      // 	} else {
      // 		uni.showToast({
      // 			title: res.msg,
      // 			duration: 1000,
      // 			icon: 'none'
      // 		});
      // 	}
      // })
      this.$Request.getT('/app/moneyDetails/selectUserMoney').then(res => {
        if (res.code == 0) {
          this.mayMoney = res.data.amount || 0
        }
      })
    },
    // 提现记录
    ymfgojilu() {
      uni.navigateTo({
        url: '/me/yaoqing/ymf-yaoqing-tixian-jilu'
      });
    },
    //钱包明细
    ymfgoqianbao() {
      uni.navigateTo({
        url: '/me/yaoqing/redPack-mingxi?moneyType=1&viewType=2'
      });
    },
    ymfgoaliZhiFuBao() {
      uni.navigateTo({
        url: '/me/yaoqing/zhifubao-tixain'
      });
    },
    ymfgetMoney() {
      let that = this;
      let token = that.token
      let userId = that.userId
      if (token) {
        //this.$queue.showLoading("加载中...");
        //可以提现金额查询预估收入查询
        let data = {
          amount: that.money
        }
        uni.showLoading({
          title: '提现中'
        });
        this.$u.api.withdraw(data).then(res => {
          if (res.code == 0) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            that.money = ''
            setTimeout(function () {
              that.ymfgetcashMoney()
            }, 1500)
          } else if (res.code == 9991) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            setTimeout(function () {
              uni.navigateTo({
                url: '/me/yaoqing/zhifubao-tixain'
              });
            }, 1500)

          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
      }
    },
    //校验用户输入金额
    ymfcheckMobile(money) {
      return RegExp(/^1[34578]\d{9}$/).test(money);
    },
    withdraw() {
      if (!this.isWithdraw) {
        this.urlCallback = {
          userId: this.userId,
          extra: 'cash:' + this.userId + "" + new Date().getTime(),
        }

        this.$refs.adRewardedVideo.show();
      } else {
        this.ymfgetOut()
      }

    },
    ymfgetOut() {


      let that = this;
      let token = that.token
      let userId = that.userId
      let cashMoney = that.cashMoney;
      if (token) {
        if (that.aliZhiFuBao && that.aliZhiFuBaoName) {
          if (!/^\d+(\.\d{1,2})?$/.test(that.money)) {
            uni.showToast({
              icon: 'none',
              title: '请输入正确金额，不能包含中文，英文，特殊字符和小数'
            });
            return;
          }
          let shouxufei = parseFloat(that.money * that.shouxufei).toFixed(2);
          console.log(parseFloat(that.mayMoney))
          console.log(parseFloat(that.money))
          if (parseFloat(that.mayMoney).toFixed(2) >= parseFloat(that.money)) {
            // if (parseFloat(that.mayMoney).toFixed(1) >= parseFloat(that.money) + shouxufei * 1) {
            if (parseFloat(that.money).toFixed(2) >= parseFloat(cashMoney)) {
              if (that.shouxufei > 0) {

                uni.showModal({
                  title: "提现申请提示",
                  content: '请仔细确认收款人信息\n\n收款人姓名:' + that.aliZhiFuBaoName + '\n\n提现金额:' + that
                    .money + '元\n\n收款人账号：' + that.aliZhiFuBao + '',
                  // content: '请仔细确认收款人信息\n\n收款人姓名:' + that.aliZhiFuBaoName + '\n\n提现金额:' + that
                  // 	.money + '元\n\n提现手续费：' + shouxufei +
                  // 	'\n\n收款人账号：' + that.aliZhiFuBao + '',
                  success: (e) => {
                    if (e.confirm) {
                      // that.money = money
                      that.ymfgetMoney();
                      that.ymfymfgetMoneyDetail();
                    }
                  }
                });
              } else {
                uni.showModal({
                  title: "提现申请提示",
                  content: '请仔细确认收款人信息\n\n收款人姓名:' + that.aliZhiFuBaoName + '\n\n提现金额:' + that
                    .money + '元\n\n收款人账号：' + that.aliZhiFuBao +
                    '',
                  success: (e) => {
                    if (e.confirm) {
                      // that.money = money
                      that.ymfgetMoney();
                      that.ymfymfgetMoneyDetail();
                    }
                  }
                });
              }

            } else {
              uni.showToast({
                icon: 'none',
                title: "提现金额必须大于或等于" + cashMoney + "元才可提现"
              });
            }
          } else {
            uni.showToast({
              icon: 'none',
              title: "您的余额不足"
            });
          }
        } else {
          console.log(that.aliZhiFuBao, that.aliZhiFuBaoName, 'tixian');
          this.ymfgoaliZhiFuBao()
        }
      } else {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }
    },
    ymfymfgetOut1(money) {
      let that = this;
      let token = that.token
      let userId = that.userId
      if (token) {
        if (that.aliZhiFuBao && that.aliZhiFuBaoName) {
          if (parseFloat(this.mayMoney).toFixed(1) >= parseFloat(money)) {
            if (parseFloat(money).toFixed(1) >= 10) {
              if (this.shouxufei > 0) {
                let shouxufei = parseFloat(money * this.shouxufei).toFixed(2);
                uni.showModal({
                  title: '提现申请提示',
                  content: '请仔细确认收款人信息\n\n收款人姓名:' + that.aliZhiFuBaoName + '\n\n提现金额:' + money +
                    '元\n\n收款人账号：' + that.aliZhiFuBao + '',
                  // content: '请仔细确认收款人信息\n\n收款人姓名:' + that.aliZhiFuBaoName + '\n\n提现金额:' + money +
                  // 	'元\n\n提现手续费：' + shouxufei +
                  // 	'\n\n收款人账号：' + that.aliZhiFuBao + '',
                  confirmColor: '#ff7581',
                  success: e => {
                    if (e.confirm) {
                      this.money = money
                      that.ymfgetMoney();
                      // uni.showToast({
                      // 	icon: 'none',
                      // 	title: '提现成功'
                      // })
                    }
                  }
                });
              } else {
                uni.showModal({
                  title: '提现申请提示',
                  content: '请仔细确认收款人信息\n\n收款人姓名:' + that.aliZhiFuBaoName + '\n\n提现金额:' + money +
                    '元\n\n收款人账号：' + that.aliZhiFuBao +
                    '',
                  success: e => {
                    if (e.confirm) {
                      this.money = money
                      that.ymfgetMoney();
                      // uni.showToast({
                      // 	icon: 'none',
                      // 	title: '提现成功'
                      // })
                    }
                  }
                });
              }
            } else {
              uni.showToast({
                icon: 'none',
                title: '提现金额必须大于或等于10元才可提现'
              });
            }
          } else {
            uni.showToast({
              icon: 'none',
              title: '您的余额不足'
            });
          }
        } else {
          uni.navigateTo({
            url: '/me/yaoqing/aliZhiFuBao'
          });
        }
      } else {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }
    }
  }
};
</script>

<style lang="less">
// @import '../../static/css/index.css';
.top-bg {
  background-color: #ff7581;
  height: 400upx;
  border-bottom-right-radius: 40upx;
  border-bottom-left-radius: 40upx;
}

.class1 {
  font-size: 32upx;
  color: #FFFFFF;
  padding-top: 100upx;
}

.class2 {
  font-size: 40upx;
  color: #FFFFFF;
  padding-top: 20upx;
}

.class3 {
  width: 90%;
  height: max-content;
  margin-left: 40upx;
  background-color: #FFFFFF;
  box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;
  margin-top: 50upx;
  border-radius: 20upx;
}

.class4 {
  display: flex;
  flex-direction: row;
  padding: 20upx;
}

.view2-view-text {
  font-size: 14px;
  color: #000000;
  margin-left: 20upx;
  width: 80%;
}

.view2-view-image-right {
  width: 18upx;
  height: 30upx;
  margin-left: 50upx;
}

.tixian {
  text-align: center;
  background: white;
  height: 100%;
  position: absolute;
  width: 100%;

  .cash-top {
    padding: 32upx 32upx 50upx 32upx;
    /* border-bottom: 1px solid gainsboro; */
    background: #5074FF;
  }

  .leiji {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
  }
}

.tixianList {
  .item {
    background: white;
    padding: 32rpx;
    margin: 32rpx;
    font-size: 28rpx;
    box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
    border-radius: 16upx;
  }

  .item:first-child {
    margin-top: 0;
  }
}


.centre {
  text-align: center;
  padding: 200rpx 0;
  font-size: 32rpx;
  box-sizing: border-box;

  image {
    width: 360rpx;
    height: 360rpx;
    // margin-bottom: 20rpx;
    margin: 0 auto 20rpx;
    // border: 1px dotted #000000;
  }

  .tips {
    font-size: 34rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .btn {
    margin: 80rpx auto;
    width: 600rpx;
    border-radius: 32rpx;
    line-height: 90rpx;
    color: #ffffff;
    font-size: 34rpx;
    background: #ff7581;
  }
}
</style>