<template>
    <div class="pb-8 px-0 sm:px-0 lg:px-0">
        <div
            class="-mx-4 mt-8 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg"
        >
            <table class="min-w-full divide-y divide-gray-300">
                <thead class="bg-gray-50">
                    <tr>
                        <th
                            v-for="(heading, index) in headings"
                            :key="index"
                            scope="col"
                            :class="heading['class']"
                        >
                            {{ heading['title'] }}
                        </th>

                        <th
                            v-for="(action, index) in actions"
                            :key="index + headings.length"
                            scope="col"
                            class="relative py-3.5 pl-3 pr-4 sm:pr-6"
                        >
                            <span class="sr-only">{{ action }}</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    <tr v-if="data.length == 0">
                        <td>
                            <div class="py-3.5 pl-3 pr-4 sm:pr-6">
                                {{ noDataMessage }}
                            </div>
                        </td>
                    </tr>
                    <tr v-for="(item, itemIndex) in data" :key="itemIndex">
                        <td
                            v-for="(heading, index) in headings"
                            :key="index"
                            :class="heading['subClass']"
                        >
                            {{
                                columnFilter
                                    ? columnFilter(
                                          heading['key'],
                                          item[heading['key']]
                                      )
                                    : item[heading['key']]
                            }}

                            <dl
                                v-for="(hItem, hItemIndex) in heading[
                                    'hiddenInfo'
                                ]['dts']"
                                :key="hItemIndex"
                                :class="heading['hiddenInfo']['headClass']"
                            >
                                <dt
                                    :class="
                                        heading['hiddenInfo']['dts'][
                                            hItemIndex
                                        ]['class']
                                    "
                                >
                                    {{
                                        heading['hiddenInfo']['dts'][
                                            hItemIndex
                                        ]['title']
                                    }}
                                </dt>
                                <dd
                                    :class="
                                        heading['hiddenInfo']['dds'][
                                            hItemIndex
                                        ]['class']
                                    "
                                >
                                    {{
                                        columnFilter
                                            ? columnFilter(
                                                  heading['hiddenInfo']['dds'][
                                                      hItemIndex
                                                  ]['key'],
                                                  item[
                                                      heading['hiddenInfo'][
                                                          'dds'
                                                      ][hItemIndex]['key']
                                                  ]
                                              )
                                            : item[
                                                  heading['hiddenInfo']['dds'][
                                                      hItemIndex
                                                  ]['key']
                                              ]
                                    }}
                                </dd>
                            </dl>
                        </td>

                        <td
                            class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
                        >
                            <a
                                v-for="(action, index) in actions"
                                :key="index"
                                href="javascript:void(0)"
                                class="text-indigo-600 hover:text-indigo-900"
                                @click="doAction(action, item[actionKey])"
                                >{{ action
                                }}<span class="sr-only"
                                    >, {{ item['serial'] }}</span
                                ></a
                            >
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    headings: { type: Array<object>, required: true },
    actions: { type: Array<string>, default: [] },
    keys: { type: Array<string>, default: [] },
    data: { type: Array<object>, required: true },
    actionKey: { type: String, default: 'serial' },
    columnFilter: {
        type: Function,
        default: (key: string, val: string) => val,
    },
    doAction: {
        type: Function,
        default: (key: string) => {
            return key;
        },
    },
    noDataMessage: { type: String, default: '검색된 데이터가 없습니다.' },
});
</script>
