<script setup lang="ts">
import { PropType, ref, watch } from 'vue'
import { copy } from 'copy-anything'
import CInput from '../../../CInput/CInput.vue'
import { Company } from './dbCompanies'
import { FieldProps, ErrorsPerField } from '../../CFormWrapper.types'

const props = defineProps({
  modelValue: { type: Object as PropType<Company>, required: true },
  fieldProps: { type: Object as PropType<FieldProps>, required: true },
  errorsPerField: { type: Object as PropType<ErrorsPerField>, required: true },
})
// Emitの定義
const emit = defineEmits<{
  (e: 'update:modelValue', payload: Company): void
}>()

const localValue = ref(copy(props.modelValue))

watch(localValue, (newVal) => emit('update:modelValue', newVal), { deep: true })
watch(
  () => props.modelValue,
  (newVal) => (localValue.value = newVal),
  { deep: true }
)
</script>

<template>
  <div class="c_form_company">
    <CInput
      v-bind="fieldProps"
      v-model="localValue.name"
      :p_Error="!!errorsPerField.name"
      class="_name"
      p_Title="企業名"
    />
    <CInput
      v-bind="fieldProps"
      v-model="localValue.addressNum"
      :p_Error="!!errorsPerField.addressNum"
      class="_addressNum"
      p_Title="郵便番号"
    />
    <CInput
      v-bind="fieldProps"
      v-model="localValue.tel"
      :p_Error="!!errorsPerField.tel"
      class="_tel"
      p_Title="電話番号"
      p_Caution="（必須）"
    />
    <CInput
      v-bind="fieldProps"
      v-model="localValue.personInCharge"
      :p_Error="!!errorsPerField.personInCharge"
      class="_personInCharge"
      p_Title="企業住所"
    />
    <CInput
      v-bind="fieldProps"
      v-model="localValue.licenseCount"
      :p_Error="!!errorsPerField.licenseCount"
      class="_licenseCount"
      p_Title="企業電話番号"
    />
    <CInput
      v-bind="fieldProps"
      v-model="localValue.statusContract"
      :p_Error="!!errorsPerField.statusContract"
      class="_statusContract"
      p_Title="企業FAX番号"
    />
  </div>
</template>

<style lang="scss" scoped>
.c_form_company {
  grid-template-areas:
    'name name'
    'name-error name-error'
    'addressNum addressNum'
    'tel personInCharge'
    'licenseCount statusContract';
}
</style>
<style lang="sass" scoped>
.c_form_company
  display: grid
  grid-gap: 1rem 2rem
  grid-template-columns: 1fr 1fr
._name
  grid-area: name
._addressNum
  grid-area: addressNum
._tel
  grid-area: tel
._personInCharge
  grid-area: personInCharge
._licenseCount
  grid-area: licenseCount
._statusContract
  grid-area: statusContract
.name-error
  grid-area: name-error
  color: crimson
</style>
