<template>
  <div class="content-box overflow-y">
    <div class="content-box">
      <ul class="content-list" v-if="postList.length > 0">
        <li class="cursor" v-for="(item, idx) in postList" :key="idx">
          <a
            @click="categorySelect(item, idx)"
            :class="{ 'file-list': true, selected: selected === idx }"
          >
            <div class="flex align-center">
              <p class="mr5">
                <svg-icon type="mdi" :path="path" :color="'#fbbe28'"></svg-icon>
              </p>
              <p>{{ item.post_sj }}</p>
            </div>
          </a>
        </li>
      </ul>
      <ul class="content-list" v-else></ul>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiFolder } from "@mdi/js";

export default {
  props: {
    dataPostList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      postList: this.dataPostList,
      groupCode: this.groupCode,
      path: mdiFolder,
      selected: 0,
    };
  },
  methods: {
    categorySelect: function (item, idx) {
      this.selected = idx;
      this.$emit("selectDatasetPost", item);
    },
  },
  watch: {
    dataPostList: function (newVal, oldVal) {
      this.postList = newVal;
      if (this.postList.length > 0) {
        this.categorySelect(this.postList[0], 0);
      }
    },
  },
  components: {
    SvgIcon: SvgIcon,
  },
};
</script>