<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInst, FormItemRule } from 'naive-ui';
import { NButton, NForm, NFormItem, NFormItemGi, NGrid, NInput, NInputNumber, NSpace, NSwitch } from 'naive-ui';
import { client, safeClient } from '@/service/api';

type Asset = CommonType.TreatyBody<typeof client.api.admin.assets.post>;

defineOptions({
  name: 'AssetEdit'
});

const props = defineProps<{
  data: Asset;
}>();

const emit = defineEmits<{
  close: [];
}>();

const formRef = ref<FormInst | null>(null);
const loading = ref(false);

const formModel = reactive<Partial<Asset>>({
  code: props.data.code,
  name: props.data.name,
  iconUrl: props.data.iconUrl,
  maxWithdrawPerDay: props.data.maxWithdrawPerDay,
  maxWithdrawPerTx: props.data.maxWithdrawPerTx,
  minDeposit: props.data.minDeposit,
  minWithdraw: props.data.minWithdraw,
  withdrawFeeFixed: props.data.withdrawFeeFixed,
  withdrawFeeRate: props.data.withdrawFeeRate,
  tradeEnabled: props.data.tradeEnabled,
  transferEnabled: props.data.transferEnabled,
  withdrawEnabled: props.data.withdrawEnabled,
  depositEnabled: props.data.depositEnabled,
  isActive: props.data.isActive,
  isRwaAsset: props.data.isRwaAsset,
  sortOrder: props.data.sortOrder
});

// 用于表单输入的临时数字值
const tempValues = ref({
  maxWithdrawPerDay: Number(props.data.maxWithdrawPerDay) || 0,
  maxWithdrawPerTx: Number(props.data.maxWithdrawPerTx) || 0,
  minDeposit: Number(props.data.minDeposit) || 0,
  minWithdraw: Number(props.data.minWithdraw) || 0,
  withdrawFeeFixed: Number(props.data.withdrawFeeFixed) || 0,
  withdrawFeeRate: Number(props.data.withdrawFeeRate) * 100 || 0, // 转换为百分比
  sortOrder: Number(props.data.sortOrder) || 0
});

const rules: Record<string, FormItemRule | FormItemRule[]> = {
  code: { required: true, message: '请输入资产代码', trigger: 'blur' },
  name: { required: true, message: '请输入资产名称', trigger: 'blur' },
  iconUrl: { required: true, message: '请输入图标地址', trigger: 'blur' },
  minDeposit: { required: true, message: '请输入最小充值金额', trigger: 'blur' },
  minWithdraw: { required: true, message: '请输入最小提现金额', trigger: 'blur' },
  withdrawFeeFixed: { required: true, message: '请输入提现固定手续费', trigger: 'blur' },
  withdrawFeeRate: { required: true, message: '请输入提现手续费率', trigger: 'blur' }
};

// 同步数字输入到表单字符串
function syncNumberToString() {
  formModel.maxWithdrawPerDay = tempValues.value.maxWithdrawPerDay.toString();
  formModel.maxWithdrawPerTx = tempValues.value.maxWithdrawPerTx.toString();
  formModel.minDeposit = tempValues.value.minDeposit.toString();
  formModel.minWithdraw = tempValues.value.minWithdraw.toString();
  formModel.withdrawFeeFixed = tempValues.value.withdrawFeeFixed.toString();
  formModel.withdrawFeeRate = (tempValues.value.withdrawFeeRate / 100).toString(); // 转回小数
  formModel.sortOrder = tempValues.value.sortOrder;
}

async function handleSubmit() {
  syncNumberToString();
  await formRef.value?.validate();
  loading.value = true;
  await safeClient(() =>
    client.api.admin.assets({ code: props.data.code }).patch({
      ...formModel
    })
  );
  loading.value = false;
  window.$message?.success('更新成功');
  emit('close');
}

function handleCancel() {
  emit('close');
}
</script>

<template>
  <div class="my-10">
    <NForm ref="formRef" :model="formModel" :rules="rules" label-placement="left" :label-width="140">
      <NGrid :cols="2" :x-gap="12">
        <NFormItemGi label="资产代码" path="code">
          <NInput v-model:value="formModel.code" placeholder="请输入资产代码" />
        </NFormItemGi>

        <NFormItemGi label="资产名称" path="name">
          <NInput v-model:value="formModel.name" placeholder="请输入资产名称" />
        </NFormItemGi>
      </NGrid>

      <NFormItem label="图标地址" path="iconUrl">
        <IconPicker v-model="formModel.iconUrl" :collections="['cryptocurrency-color']" />
      </NFormItem>

      <NGrid :cols="2" :x-gap="12">
        <NFormItemGi label="每日最大提现金额" path="maxWithdrawPerDay">
          <NInputNumber
            v-model:value="tempValues.maxWithdrawPerDay"
            placeholder="请输入每日最大提现金额"
            :min="0"
            :precision="2"
            class="w-full"
          />
        </NFormItemGi>

        <NFormItemGi label="单笔最大提现金额" path="maxWithdrawPerTx">
          <NInputNumber
            v-model:value="tempValues.maxWithdrawPerTx"
            placeholder="请输入单笔最大提现金额"
            :min="0"
            :precision="2"
            class="w-full"
          />
        </NFormItemGi>
      </NGrid>

      <NGrid :cols="2" :x-gap="12">
        <NFormItemGi label="最小充值金额" path="minDeposit">
          <NInputNumber
            v-model:value="tempValues.minDeposit"
            placeholder="请输入最小充值金额"
            :min="0"
            :precision="2"
            class="w-full"
          />
        </NFormItemGi>

        <NFormItemGi label="最小提现金额" path="minWithdraw">
          <NInputNumber
            v-model:value="tempValues.minWithdraw"
            placeholder="请输入最小提现金额"
            :min="0"
            :precision="2"
            class="w-full"
          />
        </NFormItemGi>
      </NGrid>

      <NGrid :cols="2" :x-gap="12">
        <NFormItemGi label="提现固定手续费" path="withdrawFeeFixed">
          <NInputNumber
            v-model:value="tempValues.withdrawFeeFixed"
            placeholder="请输入提现固定手续费"
            :min="0"
            :precision="2"
            class="w-full"
          />
        </NFormItemGi>

        <NFormItemGi label="提现手续费率" path="withdrawFeeRate">
          <NInputNumber
            v-model:value="tempValues.withdrawFeeRate"
            placeholder="请输入提现手续费率"
            :min="0"
            :max="100"
            :precision="4"
            class="w-full"
          >
            <template #suffix>%</template>
          </NInputNumber>
        </NFormItemGi>
      </NGrid>

      <NFormItem label="排序" path="sortOrder">
        <NInputNumber v-model:value="tempValues.sortOrder" placeholder="请输入排序" :min="0" class="w-full" />
      </NFormItem>

      <NGrid :cols="2" :x-gap="12">
        <NFormItemGi label="是否可交易">
          <NSwitch v-model:value="formModel.tradeEnabled" />
        </NFormItemGi>

        <NFormItemGi label="是否可转账">
          <NSwitch v-model:value="formModel.transferEnabled" />
        </NFormItemGi>

        <NFormItemGi label="是否可提现">
          <NSwitch v-model:value="formModel.withdrawEnabled" />
        </NFormItemGi>

        <NFormItemGi label="是否可充值">
          <NSwitch v-model:value="formModel.depositEnabled" />
        </NFormItemGi>

        <NFormItemGi label="是否启用">
          <NSwitch v-model:value="formModel.isActive" />
        </NFormItemGi>

        <NFormItemGi label="是否为 RWA 资产">
          <NSwitch v-model:value="formModel.isRwaAsset" />
        </NFormItemGi>
      </NGrid>

      <NSpace justify="end">
        <NButton type="primary" ghost @click="handleCancel">取消</NButton>
        <NButton type="primary" :loading="loading" @click="handleSubmit">提交</NButton>
      </NSpace>
    </NForm>
  </div>
</template>

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