<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 DbFormContractor from './helpers/DbFormContractor.vue'
import { CustomStylePropType } from '../customStyle.types'

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(DbFormContractor),
}
onMounted(() => {
  const target = document.querySelector('.admin-table')?.parentNode ?? null

  // @ts-ignore
  if (target) target.style.width = '860px'
})
const customData: CustomStylePropType = {
  table: { height: '300px', overflowY: 'auto' },
  td: { padding: '0' },
  th: { padding: '0', fontWeight: 'normal' },
}
</script>

<template>
  <CAdminTable
    :tableInfo="tableInfo"
    :p_Addable="true"
    p_Title="タイトル漢字english"
    p_TableType="custom"
    p_EditType="row-click"
    :p_CustomStyle="customData"
  />
</template>
