<template>
  <table :class="{ 'tbl': true, [className]: className }">
    <colgroup>
      <col v-for="(w, idx) in colgroup" :width="w" :key="idx" />
    </colgroup>
    <thead>
      <tr>
        <th v-for="(title, idx) in thead" :key="idx" class="text-ct">
          {{ title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <template v-if="tbody.length > 0">
        <tr
          v-for="(row, idx) in tbody"
          :key="idx"
          @click="handleClick(row, idx)"
          class="cursor"
          :class="isboldCheck(idx)"
        >
          <td v-if="$slots.checkbox" class="text-ct">
            <slot name="checkbox" :row="row" :idx="idx"></slot>
          </td>
          <td
            v-for="(content, index) in row"
            :key="index"
            :class="index === 'title' ? 'text-lf table-title' : 'text-ct'"
          >
          <svg-icon type="mdi" :path="pinPath" :width="20" :height="20"  v-if="index == 'bbsNm' && ntcList.includes(idx)"></svg-icon>
          <svg-icon type="mdi" :path="lockPath" :width="20" :height="20" v-else-if="index == 'bbsNm' && lockList.includes(idx)"></svg-icon>
            {{ content }}
          </td>
          <td v-if="$slots.button">
            <slot name="button" :row="row" :idx="idx"></slot>
          </td>
        </tr>
      </template>
      <tr v-else>
        <td :colspan="thead.length" class="text-ct data-none">
          등록된 정보가 존재하지 않습니다.
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { mdiPin,mdiLock  } from '@mdi/js';
export default {
  props: {
    colgroup: {
      type: Array,
      default: [],
    },
    thead: {
      type: Array,
      default: [],
    },
    tbody: {
      type: Array,
      default: [],
    },
    className: {
      type: String,
      default: "",
    },
    ntcCnt: {
      type: Number,
      default: 0,
    },
    lockList: {
      type: Array,
      default: [],
    },
    ntcList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      pinPath: mdiPin,
      lockPath: mdiLock,
    };
  },
  methods: {
    handleClick: function (row, idx) {
      this.$emit("listClick", idx); // 'listClick' 이벤트 발생
    },
    isboldCheck(index) {
      return this.ntcList.includes(index) ? "contentBold" : "";
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>
<style scoped>
.contentBold {
  font-weight: bold;
}
.lock-icon {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: inherit;
}
</style>
