<template>
  <div class="v_list_card">
    <h2 v-if="title" class="mb-12 v-title">{{title}}</h2>
    <ul v-infinite-scroll="loadMore">
      <li
        v-for="v in dataList"
        :key="v[itemKey]"
        :class="{active:active&&active[itemKey]===v[itemKey]}"
        @click="setActive(v)"
      >{{v[itemLabelKey]}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String },
    itemKey: { type: String, default: 'id' },
    itemLabelKey: { type: String, default: 'title' },
    dataList: { type: Array, default: () => [] },
    loadMore: { type: Function },
    isCancel: { type: Boolean }
  },

  data: () => ({ active: null }),

  watch: {
    active (v) {
      this.$emit('change', v)
    }
  },

  methods: {
    setActive (v) {
      if (this.isCancel && this.active === v) {
        return (this.active = null)
      }

      this.active = v
    }
  }
}
</script>

<style lang="scss" scoped>
.v_list_card {
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;

  > h2 {
    margin: 12px 12px 0 12px;
    white-space: nowrap;
  }

  > ul {
    margin-top: 12px;
    padding: 0;
    width: 100%;
    flex: 1;
    overflow: auto;

    > li {
      margin: 0 auto 8px;
      width: calc(100% - 24px);
      padding: 8px;
      display: block;
      text-align: center;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &.active,
      &:hover {
        color: #fff;
        background-color: $--color-primary;
        border-color: $--color-primary;
      }
    }
  }
}
</style>
