<script lang="ts" setup>
import { markRaw, onMounted } from 'vue'
import CAdminTable from '../CAdminTable.vue'
import { TableInfo } from '../tableInfo'
import { dbCompanies, Company } from './helpers/dbCompanies'
import DbFormChangeEditableVue from './helpers/DbFormChangeEditable.vue'

const schema = [
  { id: 'name', label: '企業名' },
  { id: 'addressNum', label: '郵便番号' },
  { id: 'tel', label: '企業電話番号', sortable: false },
  { id: 'personInCharge', label: '担当者名' },
  { id: 'licenseCount', label: '利用可能ライセンス数' },
  { id: 'statusContract', label: '契約状況' },
  { id: 'meta.serial', label: 'シリアルナンバー' },
  { id: 'dateCreated', label: '登録日' },
]

const tableInfo: TableInfo<Company> = {
  schemaColumns: schema,
  db: dbCompanies,
  componentForm: markRaw(DbFormChangeEditableVue),
}
onMounted(() => {
  const target = document.querySelector('.admin-table')?.parentNode ?? null

  // @ts-ignore
  if (target) target.style.width = '860px'
})
</script>

<template>
  <CAdminTable :tableInfo="tableInfo" p_Title="タイトル漢字english" />
</template>
