<script setup lang="ts">
import { ref } from 'vue'
import { isNumber } from 'is-what'
import { defaultsCompany } from './helpers/dbCompanies'
import CFormContractor from './helpers/CFormContractor.vue'
import CFormWrapper from '../CFormWrapper.vue'

//
const localData = ref(defaultsCompany())

/**
 * フォームの表示状態を切り替える
 * @example 'add' : 保存確認とキャンセルボタンがデフォルト表示
 * @example 'edit' : 編集開始ボタンからデフォルト表示になる
 */
const mode: 'add' | 'edit' = 'edit'

// 保存確認ボタンを押した時
function save() {
  // console.log(`こちれを保存しよう → `, localData.value)
}

// バリデーター
const validation = {
  name: {
    error: (val: any) => {
      if (!val) return '会社名を記入してください'
      return null
    },
  },
  tel: {
    error: (val: any) => {
      if (!val) return '電話番号'
      return null
    },
  },
  addressNum: {
    error: (val: any) => {
      if (!val) return '郵便番号を記入してください'
      if (!isNumber(Number(val))) return '郵便番号は数字のみ'
      if (String(val).length > 7) return '郵便番号はなげーよ'
      return null
    },
  },
}

const l = console.log
</script>

<template>
  <CFormWrapper
    :mode="mode"
    v-model="localData"
    :validation="validation"
    @save="() => save()"
    @cancel="() => l('キャンセルした')"
    @close="() => l('閉じるした')"
    @edit="() => l('編集おした')"
    :p_DeleteAuth="true"
  >
    <template #default="{ fieldProps, errorsPerField }">
      <CFormContractor
        v-model="localData"
        :fieldProps="fieldProps"
        :errorsPerField="errorsPerField"
      />
    </template>
  </CFormWrapper>

  <pre style="padding: 1rem">{{ localData }}</pre>
</template>
