<script setup lang="ts">
import type { FormSubmitEvent } from '#ui/types'

// 定义单位数组
const units = [
  'GB', 'TB',
]

// 定义双向绑定模态框的显示
const model = defineModel({
  type: Boolean
})
// 定义加载状态
const loading = ref(false)
// 定义当前单位
const unit = ref(units[0])

// 根据单位转换大小，并监听单位变化
watch(unit, (val, old) => {
  if (old === 'GB') {
    state.BucketLimitSize = byteTrans.g2t(state.BucketLimitSize, 'ceil')
  } else {
    state.BucketLimitSize = byteTrans.t2g(state.BucketLimitSize, 'ceil')
  }
})

// 定义外部数据，以及操作方法
const { row, onEdit } = defineProps<{
  row: BucketInfo
  onEdit: (item: BucketCreateAndEditParams ) => Promise<void>
}>()


// 定义表单数据
const schema = z.object({
  BucketName: z.string({
    required_error: '桶名称不能为空'
  }),
  BucketLimitSize: z.number({
    required_error: '配额大小不能为空'
  }).min(1, '配额大小不能小于1')
})

// 定义双向绑定表单数据
const state = reactive({
  BucketName: '',
  BucketLimitSize: 0
})

// 初始化表单数据为外部传入的数据
effect(() => {
  state.BucketName = row.Name ?? ''
  state.BucketLimitSize = byteTrans.k2g(row.QuotaSize, 'ceil') ?? 0
})

// 提交事件
async function onSubmit(event: FormSubmitEvent<BucketCreateAndEditParams>) {
  loading.value = true
  model.value = false

  let size = 0
  // 根据当前单位进行转换为KB之后再提交
  if (unit.value === 'GB') {
    size = byteTrans.g2k(event.data.BucketLimitSize)
  } else {
    size = byteTrans.t2k(event.data.BucketLimitSize)
  }
  await onEdit({
    ...event.data,
    BucketLimitSize: size
  })

  loading.value = false
}


</script>

<template>
  <UDashboardModal
    v-model="model"
    :title="$t('user.bucket.modal.edit.title')"
    :description="$t('user.bucket.modal.edit.desc')"
    :ui="{ width: 'sm:max-w-md' }"
  >
    <!-- ~/components/users/UsersForm.vue -->
    <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
      <UFormGroup :label="$t('user.bucket.field.name')" name="BucketName">
        <UInput v-model="state.BucketName" disabled autofocus :placeholder="$t('user.bucket.field.name.placeholder')" />
      </UFormGroup>

      <UFormGroup :label="$t('user.bucket.field.quota')" name="size">
        <UButtonGroup class="w-full" orientation="horizontal">
          <UInput
            v-model="state.BucketLimitSize"
            class="w-full"
            type="number"
            :placeholder="$t('user.bucket.field.quota.placeholder')"
          />
          <UTooltip text="自动向上取整策略，100GB⇒0.10TB⇒1TB" :popper="{ placement: 'top' }">
            <USelectMenu v-model="unit" :options="units" />
          </UTooltip>
        </UButtonGroup>
      </UFormGroup>

      <div class="flex justify-end gap-3 pt-8">
        <UButton :label="$t('modal.cancel')" color="gray" variant="ghost" @click="model = false" />
        <UButton type="submit" :label="$t('modal.ok')" color="black" />
      </div>
    </UForm>
  </UDashboardModal>
</template>
