<template>
  <view>
    <view style="height: 56rpx" />
    <image class="integral-icon" src="/static/icon/ic_jifen@2x.png" />
    <view style="height: 36rpx" />
    <view class="integral-text">{{ userInfo.integral }}</view>
    <view style="height: 54rpx" />
    <u-button class="integral-submit" @click="onSubmitClick">提现</u-button>
    <view style="height: 82rpx" />
    <view style="display: flex">
      <u-button class="integral-btn" @click="$u.route({ url: 'pages/mine-integral-bonus/index' })">奖金记录</u-button>
      <u-button class="integral-btn" @click="$u.route({ url: 'pages/mine-integral-withdrawal/index' })">提现记录</u-button>
    </view>

    <u-modal :show="submitShow" :title="submitTitle" :showCancelButton="submitShowCancel" @cancel="onSubmitCancel" @confirm="onSubmitConfirm">
      <view>
        <view style="text-align: center">{{ submitContent }}</view>
        <view style="height: 16rpx" />
        <view>
          <u--input
            v-model="submitValue"
            placeholder="请输入需要提现的金额"
            placeholderStyle="font-size: 28rpx;text-align: center;color: #c6c6c6;"
            inputAlign="center"
            type="number"
            clearable
            style="background: #f5f5f5; border-radius: 16rpx; border: none"
          />
        </view>
      </view>
    </u-modal>

    <u-modal :show="successShow" title="提交成功" @confirm="successShow = false">
      <view style="text-align: center">{{ '可在“我的奖金-提现记录”查看' }}</view>
    </u-modal>

    <u-modal :show="warnShow" title="提示" @confirm="warnShow = false">
      <view style="text-align: center">{{ '支持星期一到星期五上午8:30到18:00，每天不能超过5次提现，每月不能大于150次' }}</view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      submitShow: false,
      submitShowCancel: false,
      submitTitle: '',
      submitContent: '',

      submitValue: '',

      successShow: false,
      warnShow: false,

      userInfo: {},
    };
  },

  onLoad(query) {
    this.fetchUserInfo();
  },

  methods: {
    onSubmitClick() {
      this.submitTitle = '提现';
      this.submitContent = '目前奖金 ' + this.userInfo.integral;
      this.submitShowCancel = true;

      this.submitShow = true;
    },

    async onSubmitConfirm() {
      if (!this.submitValue) return uni.$u.toast('请输入金额');
      try {
        uni.showLoading({});
        await this.fetchSubmit();
        this.onSubmitCancel();
        uni.hideLoading();
        this.successShow = true;
      } catch (e) {
        this.onSubmitCancel();
      } finally {
      }
    },

    async fetchSubmit() {
      await uni.$u.http.post('/api/withdrawal', { amount: this.submitValue });
    },

    async fetchUserInfo() {
      const { detail } = await uni.$u.http.get('/api/user_center/detail');
      this.userInfo = detail;
    },

    onSubmitCancel() {
      this.submitValue = '';
      this.submitShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
