<script setup lang="ts">
import { stringifyExpression } from '@vue/compiler-core'

const props = defineProps({
  listTitle: {
    type: String,
    default: '',
  },
  list: {
    type: Array,
    default: [],
  },
  listType: {
    type: String,
    default: 'page',
  },
})

const emits = defineEmits(['checkedPageOrService'])

const checkedData = (data: Record<string, string>) => {
  emits('checkedPageOrService', data)
}
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <header class="text-4xl h-14">{{ props.listTitle }}</header>
    <div class="flex-1 overflow-y-auto px-10 py-5 bg-slate-800">
      <div class="flex" v-for="(items, index) in list" :key="index">
        <div class="w-40">{{ items.themeName ?? items.typeName }}</div>
        <div class="flex-1 grid grid-cols-5 gap-x-6">
          <n-button
            quaternary
            class="h-10 justify-start"
            v-for="itemData in items[`${listType}List`]"
            :key="itemData[`${listType}Id`]"
            @click="checkedData(itemData)"
          >
            <n-ellipsis>
              {{ itemData[`${listType}Name`] }}
            </n-ellipsis>
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>

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