<template>
    <div class="flex flex-col">
        <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div
                class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"
            >
                <table class="min-w-full divide-y divide-gray-300">
                    <thead>
                        <tr>
                            <th
                                v-for="(heading, index) in headings"
                                :key="index"
                                :width="
                                    heading['widthRatio'] != ''
                                        ? heading['widthRatio'] + '%'
                                        : '100%'
                                "
                                :class="
                                    index == 0
                                        ? 'py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0'
                                        : 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900'
                                "
                                scope="col"
                            >
                                {{ heading['title'] }}
                            </th>

                            <th
                                v-for="(action, index) in actions"
                                :key="index + headings.length"
                                :width="actions.length * 1"
                                class="relative py-3.5 pl-3 pr-4 sm:pr-6 md:pr-0"
                                scope="col"
                            >
                                <span class="sr-only">{{ action }}</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr v-for="(item, itemIndex) in data" :key="itemIndex">
                            <td
                                v-for="(heading, index) in headings"
                                :key="index"
                                :class="
                                    index == 0
                                        ? 'whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0'
                                        : 'whitespace-nowrap py-4 px-3 text-sm text-gray-500'
                                "
                            >
                                {{
                                    columnFilter
                                        ? columnFilter(
                                              heading['key'],
                                              item[heading['key']]
                                          )
                                        : item[heading['key']]
                                }}
                            </td>

                            <td
                                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 md:pr-0"
                            >
                                <a
                                    v-for="(action, index) in actions"
                                    :key="index"
                                    href="javascript:void(0)"
                                    :class="index != 0 ? 'ml-3' : ''"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    @click="doAction(action, item[actionKey])"
                                    >{{ action
                                    }}<span class="sr-only"
                                        >, {{ item['serial'] }}</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr v-if="data.length == 0">
                            <td
                                :colspan="headings.length"
                                class="whitespace-nowrap py-4 px-3 text-sm text-gray-500"
                            >
                                {{ noDataMessage }}
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th
                                v-for="(heading, index) in headings"
                                :key="index"
                                :width="
                                    heading['widthRatio'] != ''
                                        ? heading['widthRatio'] + '%'
                                        : '100%'
                                "
                                :class="
                                    index == 0
                                        ? 'py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0'
                                        : 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900'
                                "
                                scope="col"
                            >
                                {{
                                    index == 0
                                        ? '합계'
                                        : calcSum(heading['key'])
                                }}
                            </th>

                            <th
                                v-for="(action, index) in actions"
                                :key="index + headings.length"
                                :width="actions.length * 1"
                                class="relative py-3.5 pl-3 pr-4 sm:pr-6 md:pr-0"
                                scope="col"
                            >
                                <span class="sr-only">{{ action }}</span>
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    headings: { type: Array<object>, required: true },
    actions: { 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: '조회된 데이터가 없습니다.' },
});

function calcSum(tag) {
    let tmpSum = 0;
    for (let i = 0; i < props.data.length; i++) {
        tmpSum += props.data[i][tag];
    }
    return tmpSum;
}
</script>
