<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import type { Treaty } from '@elysiajs/eden';
import { client, safeClient } from '@/service/api';

defineOptions({ name: 'RwaProductEdit' });

const props = defineProps<{
  data: Treaty.Data<typeof client.api.admin.rwa.issuance.products.post>;
}>();
const emit = defineEmits<{
  (e: 'close'): void;
}>();

type Body = CommonType.TreatyBody<typeof client.api.admin.rwa.issuance.products.post>;

const formInst = useTemplateRef<FormInst>('formInst');
const { data: categories } = safeClient(
  client.api.admin.rwa.category.categories.get({
    query: {
      pageIndex: 1,
      pageSize: 9999
    }
  })
);

const form = ref<Body>({
  name: props.data.name,
  code: props.data.code,
  categoryId: props.data.categoryId,
  description: props.data.description,
  estimatedValue: props.data.estimatedValue,
  totalSupplyLimit: props.data.totalSupplyLimit,
  proofDocuments: props.data.proofDocuments
});

const rules: FormRules = {
  name: [{ required: true, message: '请输入产品名称', trigger: ['blur', 'input'] }],
  code: [{ required: true, message: '请输入产品编号', trigger: ['blur', 'input'] }],
  categoryId: [{ required: true, message: '请输入产品类型', trigger: ['blur', 'input'] }],
  estimatedValue: [{ required: true, message: '请输入产品估值', trigger: ['blur', 'input'] }],
  totalSupplyLimit: [{ required: true, message: '请输入总发行量', trigger: ['blur', 'input'] }]
};

function handleSubmit() {
  formInst.value?.validate(async errors => {
    if (!errors) {
      await safeClient(
        client.api.admin.rwa.issuance.products.post({
          ...form.value
        })
      );
      emit('close');
    }
  });
}
</script>

<template>
  <div class="my-10">
    <NForm
      ref="formInst"
      :model="form"
      label-width="auto"
      label-placement="left"
      :rules="rules"
      require-mark-placement="left"
    >
      <NFormItem path="name" label="产品名称">
        <NInput v-model:value="form.name" />
      </NFormItem>
      <NFormItem path="code" label="产品编号">
        <NInput v-model:value="form.code" />
      </NFormItem>
      <NFormItem path="categoryId" label="产品类型">
        <NSelect
          :value="form.categoryId || null"
          :options="categories?.data?.map(item => ({ label: item.name, value: item.id }))"
          @update:value="val => (form.categoryId = val as string)"
        />
      </NFormItem>
      <NFormItem path="estimatedValue" label="产品估值">
        <NInput v-model:value="form.estimatedValue" />
      </NFormItem>
      <NFormItem path="totalSupplyLimit" label="总发行量">
        <NInput v-model:value="form.totalSupplyLimit" />
      </NFormItem>
      <NFormItem path="description" label="产品描述">
        <NInput v-model:value="form.description" type="textarea" />
      </NFormItem>
      <NFormItem path="proofDocuments" label="资产证明 ">
        <NUpload
          action="https://naive-upload.free.beeceptor.com/"
          :headers="{ 'naive-info': 'hello!' }"
          :data="{
            'naive-data': 'cool! naive!'
          }"
        >
          <NButton>上传文件</NButton>
        </NUpload>
      </NFormItem>
      <NSpace justify="end">
        <NButton @click="$emit('close')">取 消</NButton>
        <NButton type="primary" @click="handleSubmit">确 认</NButton>
      </NSpace>
    </NForm>
  </div>
</template>

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