<template>
  <div class="emergency-supply-container">
    <BasicForm ref="formRef" :formData="ruleFormData" :formConfig="ruleFormConfig" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import BasicForm from '@/components/BasicForm.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { useEmergencyHook } from '@/views/emergency/src/hoos';
  import { useEmergencySuppliesHook } from '../hook';
  import type { ViewEmergencyItemForm } from '@/types/emergency-supplier';
  import { getEmergencySupplyDetail } from '@/api/emergency-supplier';
  import { VIEW_EMERGENCY_ITEM_FROM_CONFIG, VIEW_EMERGENCY_ITEM_DATA } from '../config';

  const props = defineProps<{
    id: number;
  }>();
  const formRef = ref();
  const DISABLED_EMERGENCY_ITEM_FROM_CONFIG = VIEW_EMERGENCY_ITEM_FROM_CONFIG.map((item) => {
    return {
      ...item,
      componentProps: {
        ...(item.componentProps || {}),
        disabled: true,
      },
    };
  });
  const { ruleFormConfig, ruleFormData } = useFormConfigHook<ViewEmergencyItemForm>(
    DISABLED_EMERGENCY_ITEM_FROM_CONFIG,
    VIEW_EMERGENCY_ITEM_DATA,
  );

  const { getEmergencyEventDict, getEmergencyEvent } = useEmergencyHook();
  const {
    getEmergencySupplyDict,
    getEmergencySupply,
    getParkDict,
    getPark,
    getLocationDict,
    getLocation,
  } = useEmergencySuppliesHook();
  const getEmergencySupplyInfo = async () => {
    const res = await getEmergencySupplyDetail(props.id);
    for (const key in res) {
      ruleFormData[key] = res[key as keyof typeof res];
      ruleFormData.emergencyTypeName = getEmergencyEvent(res.emergencyType) || '';
      ruleFormData.supplyTypeName = getEmergencySupply(res.supplyType) || '';
      ruleFormData.parkName = getPark(res.park) || '';
      ruleFormData.locationName = getLocation(res.location) || '';
    }
  };
  onMounted(() => {
    getEmergencyEventDict().then(async () => {
      await getEmergencySupplyDict();
      await getLocationDict('all');
      await getEmergencySupplyInfo();
    });
    getParkDict();
  });
</script>

<style lang="scss" scoped>
  @use '../styles/info.scss' as *;
</style>
