<template>
  <CommonPage show-footer :title="$route.title">
    <n-form
      ref="formRef"
      :label-width="120"
      :model="formValue"
      label-placement="left"
      :rules="rules"
    >
      <n-form-item label="积分佣金比例:" path="reward">
        <n-input-number
          v-model:value="formValue.reward"
          style="width: 200px"
          placeholder="输入积分佣金比例"
        />
      </n-form-item>
      <n-form-item>
        <n-button
          v-perms="['/admin/userConfig/edit']"
          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({
  reward: null,
})

const formRef = ref(null)

const rules = {
  reward: [
    {
      required: true,
      type: 'number',
      message: '请输入积分佣金比例',
    },
  ],
}

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

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

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>
