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

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

/** 検索ドロワーに表示したいデータ */
const tableTitleObj = ref<DrawerFilterType<TableExample>[]>([
  {
    collection: 'D_Employee',
    path: 'name' as const,
    label: '従業員名',
    filterType: 'input' as const,
    placeholder: '山田太郎',
    search: '',
    where: '==',
  },
  {
    collection: 'D_Customer',
    path: 'email' as const,
    label: 'メールアドレス',
    filterType: 'input' as const,
    placeholder: 'info@example.com',
    search: '',
    where: '==',
  },
  {
    collection: 'D_Customer',
    path: 'prefecture' as const,
    label: '住所',
    filterType: 'select' as const,
    options: ['石川県', '茨城県', '佐賀県'],
    placeholder: '都道府県',
    search: '',
    where: '==',
  },
  {
    collection: 'D_Contents',
    path: 'address.prefecture' as const,
    label: 'コンテンツ',
    filterType: 'checkboxes' as const,
    options: ['ゲーム', '映画', '読書', '音楽', 'スポーツ', 'その他'],
    search: [],
    where: '==',
  },
  {
    collection: 'D_Customer',
    path: 'name' as const,
    label: '役割',
    filterType: 'radio' as const,
    options: ['王様', '大臣', '兵士', '庶民', '家畜'],
    search: '',
    where: '==',
  },
  {
    collection: 'D_Customer',
    path: 'registrationDate' as const,
    label: '登録日',
    filterType: 'input' as const,
    placeholder: '',
    search: '',
    where: '==',
  },
  {
    collection: 'D_Customer',
    path: 'upDate' as const,
    label: '更新日',
    filterType: 'calendar' as const,
    placeholder: '',
    search: {
      start: '',
      end: '',
    },
    where: {
      start: '>=',
      end: '<=',
    },
  },

  {
    collection: 'D_Customer',
    path: 'address.zipCode' as const,
    label: '更新日',
    filterType: 'input' as const,
    placeholder: '',
    search: '',
    where: '==',
  },
])

const isFilter = (value: boolean) => {
  value ? alert('検索を開始！！！') : alert('全ての条件をクリア！！！')
}
</script>

<template>
  <div></div>
  <CCFilterDrawer @filter="isFilter" v-model="tableTitleObj" />
  <div style="max-width: 1050px; padding: 20px">
    {{ tableTitleObj }}
  </div>
</template>

<style scoped></style>
