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

const schema = [
  { id: 'name', label: '名前' },
  { id: 'companyId', label: '会社ID' },
  { id: 'companyName', label: '会社名' },
]

onMounted(() => {
  const target = document.querySelector('.admin-table')?.parentNode ?? null

  // @ts-ignore
  if (target) target.style.width = '1090px'
})
const tableInfo: TableInfo<User> = {
  schemaColumns: schema,
  db: dbUsers,
  componentForm: markRaw(DbFormCheck),
  mapRow: (row) => {
    const company = dbCompanies.doc(row.companyId).data
    return {
      ...row,
      companyName: company?.name || 'エラーがおきました',
    }
  },
  afterFetch: async () => {
    dbCompanies.fetch()
    return 0
  },
}
</script>

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