<template>
  <popup v-model:value="value" header-title="余额兑换巧鱼币" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="recharge-container exchange-container relative jCenter">
      <div @click="close" class="recharge-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="recharge-close"></icon>
      </div>

      <section class="screen">

        <aside class="rowACenter exchange-item exchange-item-margin">
          <div class="exchange-label">我的余额:</div>
          <div class="flex-1">
            <div class="line-1 exchange-value">{{$store.getters.money}}</div>
          </div>
        </aside>

        <aside class="rowACenter exchange-item">
          <div class="exchange-label">兑换金额</div>
          <div class="exchange-input-warp">
            <a-input-number
                class="recording-input screen exchange-input"
                :min="1"
                :precision="0"
                v-model:value="moneyValue"
                :max="$store.getters.money"
                :disabled="disabled"
            ></a-input-number>
          </div>
          <div @click="allExChange" class="exchange-all-button"
            :class="{
              'button-active': !disabled
            }"
          >全部兑换</div>
        </aside>

        <aside class="rowACenter exchange-item">
          <div class="exchange-label">巧鱼币</div>
          <img src="@/assets/images/currency.png" class="exchange-currency-icon" />
          <div class="flex-1">
            <div class="line-1 exchange-value">{{integral}}</div>
          </div>
        </aside>

        <div class="center">
          <v-button @submit-verify="submitVerify" @submit="submit" class="exchange-button">立即兑换</v-button>
        </div>

        <div class="exchange-introduce">兑换为巧鱼币后，可在平台内消费，购买礼物，不可提现</div>


      </section>

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

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

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

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