<template>
  <div>
      <div class="balance-box">
        <div class="balance-label">账户余额（元）</div>
        <div class="balance-amount">{{user.balance | money | defaultValue}}</div>
        <div class="balance-sub-title">
          <div style="flex: 1">
            累计提现：{{user.withDrawlAmount | money | defaultValue}} 元
          </div>
          <transition name="el-fade-in-linear">
            <div class="balance-withdraw-btn" @click="handleWithdraw" v-show="!showWithdraw">立即提现</div>
          </transition>
        </div>
      </div>

    <el-collapse-transition>
      <div class="withdraw-box" v-show="showWithdraw">
        <el-form :model="withdrawForm" :rules="withdrawRules" ref="withdrawForm">
          <el-form-item label="提现金额" prop="money">
            <el-input v-model="withdrawForm.money" placeholder="请输入提现金额（元）" clearable @input="computeArrivalAmount">
              <template #append>
                <el-button @click="withdrawForm.money = user.balance">全部提现</el-button>
              </template>
            </el-input>
            <div>提现手续费 {{withdrawForm.serviceCharge | money | defaultValue}} 元</div>
          </el-form-item>
          <el-form-item label="提现方式" prop="channelId">
            <el-radio-group style="width: 100%" v-model="withdrawForm.channelId" @change="onChangeChannel">
              <el-radio v-for="channel of channelList"
                        :key="channel.channelId"
                        :label="channel.channelId"
                        border
                        class="channel-item">
                {{channel.name}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-row type="flex" style="justify-content: right">
          <el-button @click="showWithdraw = false" round>取消</el-button>
          <el-button @click="submitWithdraw" type="primary" round :loading="loading">确认提现</el-button>
        </el-row>
      </div>
    </el-collapse-transition>
  </div>


</template>

<script>
import { getEnabledWithdrawChannel } from '@/api/app/withdrawChannel'
import { isEmpty } from '@/utils'
import { appAddWithdraw, appGetWithdrawService } from '@/api/app/withdraw'

export default {
  name: 'MchBalance',
  props: {
    user: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      showWithdraw: false,
      withdrawForm: {},
      channelList: [],
      withdrawRules: {
        money: [{ required: true, message: '提现金额不能为空', trigger: 'blur' }],
        channelId: [{ required: true, message: '提现方式不能为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getChannel();
  },
  methods: {
    resetWithdrawForm() {
      this.withdrawForm = {
        money: null,
        channelId: null,
        arrivalAmount: null,
        serviceCharge: 0,
        serviceRate: null,
        serviceType: null
      }
      if (!isEmpty(this.channelList)) {
        this.withdrawForm.channelId = this.channelList[0].channelId;
        this.onChangeChannel(this.withdrawForm.channelId);
      }
    },
    onChangeChannel(channelId) {
      appGetWithdrawService(channelId).then(res => {
        this.withdrawForm.serviceType = res.data.serviceType;
        this.withdrawForm.serviceRate = res.data.serviceRate;
        this.computeArrivalAmount();
      })
    },
    computeArrivalAmount() {
      if (this.withdrawForm.serviceType == null || this.withdrawForm.money == null) {
        this.withdrawForm.serviceCharge = 0;
        return;
      }
      if (this.withdrawForm.serviceType === "1") {
        this.withdrawForm.serviceCharge = (this.withdrawForm.money * this.withdrawForm.serviceRate / 100).toFixed(2);
      } else if (this.withdrawForm.serviceType === "2") {
        this.withdrawForm.serviceCharge = this.withdrawForm.serviceRate.toFixed(2);
      }
      this.withdrawForm.arrivalAmount = (this.withdrawForm.money - this.withdrawForm.serviceCharge).toFixed(2)
    },
    // 确认提现
    submitWithdraw() {
      this.$refs.withdrawForm.validate(valid => {
        if (valid) {
          this.loading = true;
          appAddWithdraw(this.withdrawForm).then(res => {
            if (res.code === 200) {
              this.$message.success("提交成功，等待审核通过");
              this.showWithdraw = false;
              this.$emit('withdraw')
            }
          }).finally(() => {
            this.loading = false;
          })
        }
      })
    },
    // 处理提现
    handleWithdraw() {
      this.resetWithdrawForm();
      this.showWithdraw = true;
    },
    getChannel() {
      getEnabledWithdrawChannel().then(res => {
        this.channelList = res.data;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.balance-box {
  z-index: 2;
  position: relative;
  background-image: url('https://api.ccttiot.com/smartmeter/img/static/uXaoTV3GIW6q0QHcM4De');
  width: 100%;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2em 2em calc(2em + 32px);
  color: #fff;
  border-radius: 16px;
  transition: .25s;

  .balance-label{
    font-size: 20px;
  }
  .balance-amount{
    font-size: 32px;
    font-weight: bold;
    margin-top: 0.5em;
  }
  .balance-sub-title {
    position: absolute;
    width: calc(100% - 4em);
    display: flex;
    justify-content: space-between;
    bottom: 1.5em;
    line-height: 32px;

    .balance-withdraw-btn {
      height: 32px;
      bottom: 2em;
      right: 2em;
      background-color: #FFFFFF;
      color: #a3a0ff;
      padding: 0 1em;
      border-radius: 16px;
      cursor: pointer;
      transition: .25s;
    }
    .balance-withdraw-btn:hover {
      transform: scale(1.15);
    }
  }

}

.withdraw-box {
  z-index: 1;
  position: relative;
  top: -2em;
  width: 100%;
  padding: 3em 2em 1.5em;
  background-color: #fff;
  border-radius: 16px;

  .channel-item {
    margin: 0;
  }
}
</style>
