<template>
  <div class="vtj-data-item" :class="{ 'is-current': props.active }">
    <div
      class="vtj-data-item__header"
      @click="onClick"
      :class="{ 'is-pointer': props.clickable || props.collapsible }">
      <i
        v-if="props.collapsible"
        class="vtj-icon-greater arrow"
        :class="{ open: !collapsed }"
        @click.stop="toggleCollapsed"></i>
      <div class="vtj-data-item__title">
        <slot name="title">
          {{ props.title }}
        </slot>
      </div>
      <div class="vtj-data-item__action">
        <slot name="action"></slot>
        <i
          v-if="props.editable"
          class="vtj-icon-edit"
          title="编辑"
          @click.stop="onEdit"></i>
        <i
          v-if="props.removable"
          class="vtj-icon-remove"
          title="删除"
          @click.stop="onRemove"></i>
      </div>
    </div>
    <div
      v-if="props.content || $slots.default"
      v-show="!collapsed"
      class="vtj-data-item__body">
      <slot>
        {{ props.content }}
      </slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
export interface Props {
  title?: string;
  content?: string;
  editable?: boolean;
  removable?: boolean;
  active?: boolean;
  collapsible?: boolean;
  clickable?: boolean;
  collapsed?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  title: '',
  content: '',
  editable: false,
  removable: false,
  active: false,
  collapsible: false,
  clickable: false,
  collapsed: false
});

const emit = defineEmits(['click', 'remove', 'edit']);

const collapsed = ref<boolean>(props.collapsed);

const onEdit = () => {
  emit('edit');
};

const onRemove = () => {
  emit('remove');
};

const onClick = () => {
  if (props.clickable) {
    emit('click');
  } else {
    toggleCollapsed();
  }
};

const toggleCollapsed = () => {
  if (!props.collapsible) return;
  collapsed.value = !collapsed.value;
};
</script>
