<template>
  <view class="cash-ward">
    <view class="cash-ward-top">
      <view class="title">提现</view>
      <view class="money" v-if="userInfo">{{ userInfo.cash | toFixed }}</view>
      <view>可提现金额</view>
      <view class="btn btn_c" @click="open">申请提现</view>
    </view>
    <view class="cash-ward-tips">
      <view>提现注意事项:</view>
      <view>1.当佣金被结算时有一定的冻结期，被解冻的佣金方可提现 </view>
      <view
        >2.微信打款当日单笔金额最多500元，当日最多20000元2.通常在1-3个工作日内可到账</view
      >
    </view>
    <view class="bg_f3"></view>
    <view class="cash-ward-bom fl_b u-border-bottom" @click="toRecord">
      <view>提现记录</view>
      <image src="../../static/image/icon_more.png" mode="" />
    </view>
    <u-popup
      :show="show"
      :round="30"
      mode="center"
      @close="close"
      :closeable="true"
    >
      <view class="popup-main">
        <view class="popup-main-title u-border-bottom">确认提现</view>
        <view class="popup-main-money u-border-bottom">
          <text>提现金额</text>
          <u--input
            placeholder="请输入提现金额"
            v-model.number="money"
            type="number"
            border="node"
            placeholderStyle="fontSize:36rpx"
            inputAlign="center"
            color="#24263D"
            fontSize="36px"
            @input="changeMoney"
          ></u--input>
        </view>
        <view class="popup-main-mode fl_b u-border-bottom">
          <view class="fl"
            ><image src="../../static/image/icon_wallet.png" mode="" /><text
              >提现到微信钱包</text
            ></view
          >
          <image src="../../static/image/icon_tick.png" mode="" />
        </view>
        <u-button
          class="c_btn popup-main-btn"
          text="确 认"
          @click="withdrawal"
        ></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getQueryString } from "@/common/tool";
import {
  checkBindGzh,
  getWxConfig,
  OfficialLogin,
  withdrawal,
} from "@/utils/user";
export default {
  data() {
    return {
      show: false,
      money: 0,
      options: {},
    };
  },
  onShow() {
    location.search.includes("code") && this.OfficialLogin();
  },
  onLoad(options) {
    if (this.$method.isGoLogin()) {
      return;
    }
    this.options = options;
    if (options.isAuth) {
      this.checkBindGzh();
    }
  },
  methods: {
    changeMoney(val) {
      val *= 1;
      console.log(val < 0, val >= this.userInfo.cash, val);
      if (val < 0) {
        this.money = 0;
      }
      if (val >= this.userInfo.cash) {
        this.money = this.userInfo.cash;
      }
    },
    close() {
      this.show = false;
    },
    open() {
      this.checkBindGzh().then((res) => {
        this.show = true;
        this.money = this.userInfo.cash;
      });
    },
    // 获取授权
    checkBindGzh() {
      return checkBindGzh().then((res) => {
        if (res || process.env.NODE_ENV == "development") {
          return Promise.resolve();
        } else {
          this.authorize();
        }
      });
    },
    toRecord() {
      uni.navigateTo({
        url: "/pages/cashout/record",
      });
    },
    authorize() {
      // 没有code,就重定向到地址https://www.xyyxt.net?ask_type=https://api.xyyxt.net/pages2/order/confirm_pay 去获取code，授权后就会把code带上然后访问域名
      // ?fromCart=&code=061F5a1w3aolh03SLe1w3sMsCF4F5a16&state=STATE
      const url = window.location.host + "/pages/cashout/index";
      getWxConfig().then((res) => {
        location.replace(
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
            res.gzhAppId
          }&redirect_uri=${encodeURIComponent(
            "https://" + url
          )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
        );
      });
    },
    OfficialLogin() {
      OfficialLogin({
        code: getQueryString("code"),
      }).then((res) => {
        if (res.data.code !== 200) {
          this.$u.toast(res.data.msg);
        }
      });
    },
    withdrawal() {
      if (!this.money) {
        this.$u.toast("请输入提现金额");
        return;
      }

      withdrawal({ cash: this.money }).then((res) => {
        this.show = false;
        this.$u.toast("提现成功");
        this.$store.dispatch("getUserInfo");
      });
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #ffffff;
  padding: 60rpx 40rpx 0;
}
.cash-ward {
  .cash-ward-top {
    box-sizing: border-box;
    color: #ffffff;
    height: 516rpx;
    background: url("../../static/image/cash_bg.png");
    background-size: 100% 100%;
    padding: 66rpx 40rpx 48rpx;
    font-size: 32rpx;
    .title {
      font-weight: bold;
      font-size: 40rpx;
    }
    .money {
      font-weight: bold;
      font-size: 72rpx;
      margin: 40rpx 0 6rpx;
    }
    .btn {
      background: #ffffff;
      color: #3f8dfd;
      border-radius: 100rpx;
      margin-top: 72rpx;
    }
  }
  .cash-ward-tips {
    margin-top: 40rpx;
    font-size: 26rpx;
    padding-bottom: 64rpx;
    view {
      color: #7e7d83;
      line-height: 44rpx;
      &:nth-of-type(1) {
        color: #222222;
      }
    }
  }
  .bg_f3 {
    width: 100vw;
    height: 16rpx;
    margin-left: -40rpx;
  }
  .cash-ward-bom {
    padding: 40rpx 0;
    font-weight: bold;
    color: #24263d;
    font-size: 32rpx;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .popup-main {
    width: 560rpx;
    height: 600rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 0 40rpx 40rpx;
    .popup-main-title {
      font-weight: bold;
      color: #24263d;
      font-size: 36rpx;
      text-align: center;
      line-height: 98rpx;
    }
    .popup-main-money {
      padding: 32rpx 0 44rpx;
      text-align: center;
      text {
        color: #7e7d83;
        font-size: 28rpx;
        margin-bottom: 8rpx;
      }
    }
    .popup-main-mode {
      padding: 28rpx 0;
      image {
        width: 32rpx;
        height: 32rpx;
      }
      view {
        color: #484848;
        font-size: 28rpx;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 28rpx;
        }
      }
    }
    .popup-main-btn {
      border-radius: 136rpx;
      margin-top: 70rpx;
    }
  }
}
</style>
