<template>
  <CommonPage show-footer :title="$route.title">
    <n-form
      ref="formRef"
      :label-width="150"
      :model="formValue"
      label-placement="left"
      :rules="rules"
    >
      <n-form-item label="提现手续费类型:" path="ScaleType">
        <n-radio-group v-model:value="formValue.ScaleType" name="radiogroup">
          <n-space>
            <n-radio
              v-for="song in [
                { label: '动态比例', value: 1 },
                { label: '固定数值', value: 2 },
              ]"
              :key="song.value"
              :value="song.value"
            >
              {{ song.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="提现手续费比例:" path="Scale">
        <n-input-number
          v-model:value="formValue.Scale"
          clearable
          :precision="4"
          style="width: 200px"
          placeholder="输入提现手续费比例"
        />
      </n-form-item>
      <n-form-item>
        <n-button
          v-perms="['/admin/userConfig/edit']"
          class="ml-25"
          attr-type="button"
          type="primary"
          @click="handleValidateClick"
        >
          保存
        </n-button>
      </n-form-item>
    </n-form>
  </CommonPage>
</template>

<script setup>
import api from './api'

const formValue = ref({})

const formRef = ref(null)

const rules = {
  Scale: [
    {
      required: true,
      type: 'number',
      message: '请输入提现手续费比例',
    },
  ],
  ScaleType: [
    {
      required: true,
      type: 'number',
      message: '请选择提现手续费类型',
    },
  ],
}

onMounted(() => {
  getconfig()
})

const getconfig = async () => {
  const res = await api.getConfig()
  formValue.value = res.data.data[0]
}

const handleValidateClick = () => {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) return
      await api.editConfig(formValue.value)
      $message.success('保存成功')
      getconfig()
    } catch (error) {
      $message.error('保存失败')
    }
  })
}
</script>

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