<template>
  <CtForm ref="CtFormRef" :items="formItems">
    <template #tips>
      <div class="my-3">
        <v-icon color="warning">mdi-information</v-icon>
        <span class="color-warning ml-3">{{ props.params?.txt || '当前余额不足，请选择其他支付方式' }}</span>
      </div>
    </template>
    <template #paymentAmount>
      <div class="d-flex align-center justify-space-between" style="width: 100%;">
        <div class="color-666">支付金额</div>
        <div class="font-size-20 color-error font-weight-bold">￥{{ paymentAmount }}</div>
      </div>
    </template>
  </CtForm>
</template>

<script setup>
defineOptions({ name: 'Recharge-index'})
import { ref, computed } from 'vue'
import CtForm from '@/components/CtForm/index.vue'
const props = defineProps({
  params: {
    type: Array,
    default: () => {}
  }
})

// 余额充值
const CtFormRef = ref()
const formItems = ref({
  options: [
    {
      noParam: true,
      slotName: 'tips'
    },
    {
      type: 'ifRadio',
      key: 'rechargeType',
      value: 1,
      // label: '支付类型 *',
      label: '',
      width: 1,
      items: [
        { label: '账户余额支付', value: 1 },
        { label: '微信扫码支付', value: 2 },
        { label: '支付宝扫码支付', value: 3 },
      ],
      rules: [v => !!v || '请选择充值类型']
    },
    {
      type: 'number',
      key: 'count',
      value: 100,
      label: '充值数量 *',
      rules: [
        value => {
          if (value) return true
          return '请输入要充值的数量'
        },
        value => {
          if (value && value > 0) return true
          return '充值数量不得等于0'
        }
      ]
    },
    {
      slotName: 'paymentAmount',
      noParam: true
    }
  ]
})

const paymentAmount = computed(() => {
  return formItems.value.options.find(e => e.key === 'count').value
})

const getQuery = () => {
  const obj = {}
  formItems.value.options.forEach(e => {
    if (e.noParam) return
    obj[e.key] = e.value
  })
  return obj
}

defineExpose({
  CtFormRef,
  getQuery,
  formItems
})

</script>

<style scoped lang="scss">

</style>
