<template>
  <view v-if="!isLoading" class="container b-f">

    <!-- 头部背景图 -->
    <view class="dealer-bg">
      <image class="image" mode="widthFix" :src="background"></image>
    </view>

    <view class="widget-body">
      <form @submit="handleSubmit">
        <!-- 提现佣金 -->
        <view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
          <view class="capital__item dis-flex flex-x-between flex-y-center">
            <view class="item__left">{{ words.capital.value }}：</view>
            <view class="item__right c-violet">
              <text class="f-24">￥</text>
              <text class="f-34">{{ dealer.money }}</text>
            </view>
          </view>
          <view class="capital__item dis-flex flex-y-center">
            <view class="item__left">{{ words.money.value }}：</view>
            <view class="item__right flex-box">
              <input class="input" name="money" :placeholder="words.money_placeholder.value"></input>
            </view>
          </view>
        </view>
        <!-- 最低提现金额 -->
        <view class="capital__lowest m-top20 col-7 t-r">
          {{ words.min_money.value }}{{ settlement.min_money }}元
        </view>

        <!-- 提现方式 -->
        <view class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
          <view class="form__title f-28">提现方式</view>
          <view class="form__box">
            <block v-for="(item, index) in settlement.pay_type" :key="index">
              <block v-if="item == PayTypeEnum.WECHAT.value">
                <!-- 微信支付 -->
                <view class="form__field dis-flex flex-y-center">
                  <view class="form__radio dis-flex flex-y-center" @click="handleChecked(PayTypeEnum.WECHAT.value)">
                    <text class="radio__icon iconfont icon-radio"
                      :class="[payment == PayTypeEnum.WECHAT.value ? 'c-violet' : 'col-bb']"></text>
                    <text class="f-28">{{ PayTypeEnum.WECHAT.name }}</text>
                  </view>
                </view>
              </block>
              <block v-if="item == PayTypeEnum.ALIPAY.value">
                <!-- 支付宝 -->
                <view class="form__field dis-flex flex-y-center">
                  <view class="form__radio dis-flex flex-y-center" @click="handleChecked(PayTypeEnum.ALIPAY.value)">
                    <text class="radio__icon iconfont icon-radio"
                      :class="[payment == PayTypeEnum.ALIPAY.value ? 'c-violet' : 'col-bb']"></text>
                    <text class="f-28">{{ PayTypeEnum.ALIPAY.name }}</text>
                  </view>
                </view>
                <block v-if="payment == PayTypeEnum.ALIPAY.value">
                  <view class="form__field dis-flex flex-y-center">
                    <view class="field-input flex-box">
                      <input class="input" name="alipay_name" placeholder="请输入真实姓名"></input>
                    </view>
                  </view>
                  <view class="form__field dis-flex flex-y-center">
                    <view class="field-input flex-box">
                      <input class="input" name="alipay_account" placeholder="请输入支付宝账号"></input>
                    </view>
                  </view>
                </block>
              </block>
              <block v-if="item == PayTypeEnum.BANK_CARD.value">
                <!-- 银行卡 -->
                <view class="form__field dis-flex flex-y-center">
                  <view class="form__radio dis-flex flex-y-center" @click="handleChecked(PayTypeEnum.BANK_CARD.value)">
                    <text class="radio__icon iconfont icon-radio"
                      :class="[payment == PayTypeEnum.BANK_CARD.value ? 'c-violet' : 'col-bb']"></text>
                    <text class="f-28">{{ PayTypeEnum.BANK_CARD.name }}</text>
                  </view>
                </view>
                <block v-if="payment == PayTypeEnum.BANK_CARD.value">
                  <view class="form__field dis-flex flex-y-center">
                    <view class="field-input flex-box">
                      <input class="input" name="bank_name" placeholder="请输入真实姓名"></input>
                    </view>
                  </view>
                  <view class="form__field dis-flex flex-y-center">
                    <view class="field-input flex-box">
                      <input class="input" name="bank_account" placeholder="请输入开户行名称/地址"></input>
                    </view>
                  </view>
                  <view class="form__field dis-flex flex-y-center">
                    <view class="field-input flex-box">
                      <input class="input" name="bank_card" placeholder="请输入银行卡号"></input>
                    </view>
                  </view>
                </block>
              </block>
            </block>
          </view>
        </view>
        <!-- 提交申请 -->
        <view class="form-submit dis-flex flex-x-center">
          <button formType="submit" :disabled="disabled">{{ words.submit.value }}</button>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
  import * as DealerApi from '@/api/dealer'
  import * as WithdrawApi from '@/api/dealer/withdraw'
  import SettingModel from '@/common/model/dealer/Setting'
  import { PayTypeEnum } from '@/common/enum/dealer/withdraw'

  export default {
    data() {
      return {
        // 枚举类
        PayTypeEnum,
        // 正在加载
        isLoading: true,
        // 分销商用户信息
        dealer: undefined,
        // 当前提现方式(选中的)
        payment: undefined,
        // 分销结算设置
        settlement: undefined,
        // 文字设置
        words: undefined,
        // 背景图
        background: undefined,
        // 按钮禁用
        disabled: false
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.getSetting()
      this.getDealer()
    },

    methods: {

      // 获取分销设置
      getSetting() {
        const app = this
        SettingModel.data()
          .then(setting => {
            // 赋值属性
            app.payment = setting.settlement.pay_type[0]
            app.settlement = setting.settlement
            app.words = setting.words.withdraw_apply.words
            app.background = setting.background.withdraw_apply
            // 设置当前页面标题
            app.setPageTitle(setting.words.withdraw_apply.title)
          })
      },

      // 获取分销商
      getDealer() {
        const app = this
        app.isLoading = true
        DealerApi.user()
          .then(result => app.dealer = result.data.dealer)
          .finally(() => app.isLoading = false)
      },

      // 设置当前页面标题
      setPageTitle(title) {
        uni.setNavigationBarTitle({ title: title.value })
      },

      // 切换支付选项
      handleChecked(value) {
        this.payment = value
      },

      // 表单提交
      handleSubmit({ detail }) {
        const app = this
        // 表单验证
        if (!app.onValidation(detail.value)) {
          return false
        }
        // 确认是否提交
        uni.showModal({
          title: '友情提示',
          content: '确定提交提现申请吗？请确认填写无误',
          showCancel: true,
          success(res) {
            if (res.confirm) {
              app.onSubmit(detail.value)
            } else if (res.cancel) {
              app.disabled = false
            }
          }
        })
      },

      // 提交提现申请
      onSubmit(data) {
        const app = this
        app.disabled = true
        data.pay_type = app.payment
        WithdrawApi.submit({ form: data })
          .then(result => {
            app.$toast(result.message)
            setTimeout(() => uni.navigateBack(), 1200)
          })
          .finally(() => app.disabled = false)
      },

      // 表单验证
      onValidation(data) {
        const app = this
        const words = app.words
        // 验证可提现佣金
        if (app.dealer.money <= 0) {
          app.$error('当前没有' + words.capital.value)
          return false
        }
        // 验证提现金额
        if (!data.money || data.money.length < 1) {
          app.$error('请填写' + words.money.value)
          return false
        }
        return true
      }

    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .c-violet {
    color: #786cff;
  }

  .col-bb {
    color: #bbb;
  }

  .dealer-bg {
    .image {
      width: 100%;
    }
  }

  .widget-body {
    position: relative;
    width: 88%;
    margin: 0 auto;

    .widget {
      box-sizing: border-box;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
      border-radius: 12rpx;
    }
  }

  // 提现金额
  .widget__capital {
    padding: 10rpx 0;
    margin-top: -60rpx;

    .capital__item {
      height: 80rpx;
      padding: 10rpx 35rpx;
      font-size: 28rpx;
      border-bottom: 1rpx solid #e7e7e7;
      box-sizing: border-box;

      &:last-child {
        border-bottom: none;
      }

      .item__left {
        margin-right: 20rpx;
      }

      .item__right {
        .input {
          font-size: 28rpx;
          text-align: right;
        }
      }
    }
  }

  .capital__lowest {
    padding-right: 20rpx;
    box-sizing: border-box;
    font-size: 26rpx;
  }

  // 提现方式
  .widget__form {
    padding: 10rpx 0 20rpx 0;

    .form__title {
      padding: 16rpx 35rpx;
      border-bottom: 1rpx solid #f3f3f3;
    }

    .form__box {
      padding: 20rpx 35rpx;
    }

    .form__field {
      height: 80rpx;
      padding: 0;
      box-sizing: border-box;
      font-size: 28rpx;
      margin-bottom: 10rpx;

      .radio__icon {
        font-size: 38rpx;
        margin-right: 12rpx;
      }

      .field-input {
        .input {
          background-color: #f9f9f9;
          // height: 70rpx;
          padding: 16rpx 20rpx;
          font-size: 28rpx;
        }
      }
    }
  }

  // 提交申请
  .form-submit {
    margin-top: 40rpx;

    button {
      font-size: 30rpx;
      background: #786cff;
      border: 1rpx solid #786cff;
      color: white;
      border-radius: 50rpx;
      padding: 0 120rpx;
    }

    button[disabled] {
      background: #8e84fc;
      border-color: #8e84fc;
      color: white;
    }
  }
</style>
