<script setup lang="ts">
const props = defineProps<{
  env: ResourceTechnologyInfo['env']
}>()

const schema = z.object({
  yieldDistance: z.number(),
  area: z.number(),
  terrain: z.string().min(1),
  supplyWater: z.string().min(1),
  supplyElectricity: z.string().min(1),
  dischargeWater: z.string().min(1),
  temperature: z.number(),
  airPressure: z.number(),
})

const edit = ref(false)

const open = ref(false)

async function onSubmit(values: ZodInfer<typeof schema>) {
  open.value = false
}
</script>

<template>
  <Dialog v-model:open="open">
    <DialogTrigger as-child>
      <Button class="font-bold tracking-wide">
        查看所需场地条件
      </Button>
    </DialogTrigger>
    <DialogScrollContent class="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>所需场地条件</DialogTitle>
        <DialogDescription>
          通过点击编辑按钮可以编辑所需场地条件
        </DialogDescription>
      </DialogHeader>
      <Form class="space-y-4" :schema="schema" :initial-values="env" @submit="onSubmit">
        <FormFieldItem v-slot="{ componentField }" label="退让距离" name="yieldDistance" required>
          <Input type="text" v-bind="componentField" placeholder="" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="占地面积" name="area" required>
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="地形" name="terrain" required>
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="供水要求" name="supplyWater">
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="排水要求" name="dischargeWater" required>
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="供电要求" name="supplyElectricity" required>
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="温度" name="temperature" required>
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>
        <FormFieldItem v-slot="{ componentField }" label="气压" name="airPressure" required>
          <Input type="text" v-bind="componentField" :disabled="!edit" />
        </FormFieldItem>

        <DialogFooter class="mt-4">
          <Button type="button" class="font-bold tracking-wide" @click="edit = !edit">
            {{ edit ? '取消编辑' : '编辑' }}
          </Button>
          <Button v-if="edit" type="submit" class="font-bold tracking-wide">
            保存
          </Button>
        </DialogFooter>
      </Form>
    </DialogScrollContent>
  </Dialog>
</template>
