<template>
  <div :class="classes" :style="listStyle">
    <div :class="prefixCls + '-header'">
      <span :class="prefixCls + '-header-title'">{{ title }}</span>
    </div>
    <div :class="bodyClasses">
      <div :class="prefixCls + '-content'" style="padding: 5px;">
        <Tree
          :data="data"
          :empty-text="notFoundText"
          show-checkbox
          multiple
          @on-check-change="select"
        >
        </Tree>
      </div>
    </div>
    <div :class="prefixCls + '-footer'" v-if="showFooter"><slot></slot></div>
  </div>
</template>
<script>
export default {
  name: "transfer-list",
  props: {
    prefixCls: String,
    data: Array,
    listStyle: Object,
    title: [String, Number],
    notFoundText: String
  },
  data() {
    return {
      selected: [],
      showFooter: true
    };
  },
  computed: {
    classes() {
      return [
        `${this.prefixCls}`,
        {
          [`${this.prefixCls}-with-footer`]: this.showFooter
        }
      ];
    },
    bodyClasses() {
      return [
        `${this.prefixCls}-body`,
        {
          [`${this.prefixCls}-body-with-footer`]: this.showFooter
        }
      ];
    }
  },
  methods: {
    select(selected) {
      this.selected = selected;
      this.$emit("selected", selected.length);
    }
  },
  mounted() {
    this.showFooter = this.$slots.default !== undefined;
  }
};
</script>
