<template>
  <popup v-model:value="value" header-title="账户充值" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="recharge-container relative">
      <div @click="close" class="recharge-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="recharge-close"></icon>
      </div>

     <!--   内容   -->
      <section class="screen jCenter recharge-content">
        <div class="recharge-title">巧鱼币充值</div>
        <!--   余额   -->
        <section class="recording-info rowACenter">
          <div class="recording-label">账户余额:</div>
          <aside class="flex-1 rowACenter recording-integral">
            <img src="@/assets/images/currency.png" class="recording-currency" />
            <span>{{$store.getters.integral}}</span>
          </aside>
        </section>
        <!--   充值   -->
        <section class="recording-info row">
          <div class="recording-label">充值巧鱼币:</div>
          <section class="flex-1 rowACenter recording-money wrap">
            <aside
              v-for="(item,index) in payList"
              class="recording-item center"
              :key="'recording-'+index"
              @click="triggerPayNumber(index)"
              :class="{
                'recording-item-active': index === paySelect,
                'cursor-pointer': index !== paySelect
              }"
            >
              <div>{{item.integral}}{{ item.format === false ? '':'巧鱼币' }}</div>
              <div v-if="item.input" class="rowACenter recording-price-input">
                <span>¥</span>
                <a-input-number :min="1" :precision="0" v-model:value="item.value" class="recording-input"></a-input-number>
              </div>
              <div v-else class="recording-price">¥{{item.money}}元</div>
            </aside>
          </section>
        </section>
        <!--   支付方式   -->
        <section class="recording-info row recording-pay-margin">
          <div class="recording-label">支付方式:</div>
          <section class="flex-1 rowACenter recording-pay wrap">
            <aside
                v-for="(item,index) in payOrder"
                class="recording-pay-item rowCenter"
                :key="'recording-pay-'+index"
                :class="{
                'recording-pay-active': index === payCheck,
                'cursor-pointer': index !== payCheck
              }"
                :style="{
                  color: index === payCheck ? payData[item].color : ''
                }"
                @click="triggerPayType(index)"
            >
              <img :src="payData[item].icon" class="recording-pay-icon" />
              <span>{{payData[item].label}}</span>
            </aside>
          </section>
        </section>
        <!--   同意充值服务协议   -->
        <section class="rowACenter recording-radio">
            <radio v-model:value="authorization"></radio>
            <div class="recording-agreement-margin">同意</div>
            <div @click="openRecharge" class="recording-agreement cursor-pointer">充值服务协议</div>
        </section>
        <!--   立即支付   -->
        <section class="center">
          <v-button class="recording-button" @submit="payOrderInfo" @submitVerify="payOrderInfoVerify">立即支付</v-button>
        </section>
        <!--   支付提醒   -->
        <section class="recording-pay-remind">请谨防以刷单名义诈骗</section>

      </section>

    </section>
  </popup>
</template>

<script>
import {
  Popup,
  icon,
  vImage,
  radio,
  vButton
} from '$components';
import {
  InputNumber
} from 'ant-design-vue';
import mixins from '../mixins';
export default {
  name: "popup-recharge",
  components:{
    Popup,
    icon,
    vImage,
    [InputNumber.name]:InputNumber,
    radio,
    vButton
  },
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>

<style lang="scss" src="../global.scss"></style>