<script setup lang="ts">
// 製作者 樋渡
import { ref, computed } from 'vue'
import CCFilterDrawer from '../CCFilterDrawer.vue'

type TableExample = {
  company: string
  name: string
  email: string
  prefecture: string
  registrationDate: string
  upDate: string
}

const allTableDetailObj = ref([
  {
    company: '株式会社111',
    name: '一郎',
    email: '111@gmail.com',
    prefecture: '石川県',
    registrationDate: '2021-01-01',
    upDate: '2021-01-01',
  },
  {
    company: '株式会社222',
    name: '二郎',
    email: '222@gmail.com',
    prefecture: '茨城県',
    registrationDate: '2022-02-02',
    upDate: '2022-02-02',
  },
  {
    company: '株式会社333',
    name: '三郎',
    email: '333@gmail.com',
    prefecture: '佐賀県',
    registrationDate: '2023-03-03',
    upDate: '2023-03-03',
  },
])

/**
 * name: allTableDetailObjのプロパティ名
 * label: テーブルのヘッダー名
 * type: textはインプットフォーム、selectはセレクトボックス、calendarはカレンダー
 */
const tableTitleObj = [
  {
    name: 'company' as const,
    label: '代理店名',
    type: 'select',
  },
  {
    name: 'name' as const,
    label: '従業員名',
    type: 'text',
  },
  {
    name: 'email' as const,
    label: 'メールアドレス',
    type: 'text',
  },
  {
    name: 'prefecture' as const,
    label: '都道府県',
    type: 'select',
  },
  {
    name: 'registrationDate' as const,
    label: '登録日',
    type: 'calendar',
  },
  {
    name: 'upDate' as const,
    label: '更新日',
    type: 'calendar',
  },
]

/** 詳細検索された時のフラグ */
const isSearch = ref<boolean>(false)
/** 検索結果のデータ */
const searchData = ref<TableExample[]>([])

const resSearchData = (value: { flag: boolean; searchResults: TableExample[] }) => {
  isSearch.value = value.flag
  searchData.value = value.searchResults
}

const resetSearchData = (value: boolean) => {
  isSearch.value = value
}

// 検索結果のデータを返す
const searchTableDetailObj = computed(() => {
  return searchData.value.map((item) => {
    return {
      company: item.company ?? '-',
      name: item.name ?? '-',
      email: item.email ?? '-',
      prefecture: item.prefecture ?? '-',
      registrationDate: item.registrationDate ?? '-',
      upDate: item.upDate ?? '-',
    }
  })
})

const tableData = computed(() => {
  return isSearch.value ? searchTableDetailObj.value : allTableDetailObj.value
})
</script>

<template>
  <CCFilterDrawer
    :allTableDetailObj="allTableDetailObj"
    :tableTitleObj="tableTitleObj"
    @searchData="resSearchData"
    @allData="resetSearchData"
  />
  <div style="max-width: 1000px">
    <div
      style="
        display: flex;
        justify-content: space-between;
        background-color: #efefef;
        padding: 0 50px;
      "
    >
      <div v-for="table in tableTitleObj" :key="table.label">{{ table.label }}</div>
    </div>
    <div>
      <div
        v-for="data in tableData"
        :key="data.name"
        style="display: flex; justify-content: space-between; padding: 0 50px"
      >
        <div>{{ data.company }}</div>
        <div>{{ data.name }}</div>
        <div>{{ data.email }}</div>
        <div>{{ data.prefecture }}</div>
        <div>{{ data.registrationDate }}</div>
        <div>{{ data.registrationDate }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped></style>
