<template>
  <section class="g-custom-list">
    <div v-if="showHeader" class="g-custom-list-header">
      <custom-header
        :title="title"
        :count="data.length"
        :showCount="showCount"
      >
        <template #actions>
          <slot name="actions">
            <d-button class="g-custom-list-button">新建Star列表</d-button>
          </slot>
        </template>
      </custom-header>
    </div>
    <div class="g-custom-list-content">
      <div
        v-for="(item, index) in data"
        :key="`${item.id}_${index}`"
        class="g-custom-list-item"
        :class="{'is-last': index === data.length - 1}"
      >
        <slot name="item" :data="item" :index="index">
          <div class="g-custom-list-item-name">
            <slot name="item-name" :data="item" :index="index">{{ item.name }}</slot>
          </div>
          <div class="g-custom-list-item-extra">
            <slot name="item-extra" :data="item" :index="index">
              {{ item.extra }}
            </slot>
          </div>
        </slot>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
export default {
  name: 'custom-list'
};
</script>

<script setup lang="ts">
import CustomHeader from '@/components/CustomHeader/index.vue';
withDefaults(defineProps<{
  title?: string;
  data: {
    name: string;
    extra: string;
    [propName: string]: any;
  }[];
  showCount?: boolean;
  showHeader?: boolean;
}>(), {
  title: '',
  data: () => [],
  showCount: true,
  showHeader: true
});
</script>

<style scoped lang="scss">
$g-custom-list-color: #000000;
$g-custom-list-color-second: #606060;
$g-custom-list-color-white: #ffffff;
$g-custom-list-bg-color: #333333;
$g-custom-list-border-color: #D3D3D3;
$g-custom-list-border-radius: 4px;
.g-custom-list {
  &-header {
    margin-bottom: 16px;
  }
  &-button {
    padding: 8px 16px;
    line-height: 1;
    background-color: $g-custom-list-bg-color;
    color: $g-custom-list-color-white;
  }
  &-content {
    border: 1px solid $g-custom-list-border-color;
    border-radius: $g-custom-list-border-radius;
  }
  &-item {
    border-bottom: 1px solid $g-custom-list-border-color;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    &.is-last {
      border-bottom: none;
    }
    &-name {
      font-size: 18px;
      color: $g-custom-list-bg-color;
      font-weight: 500;
    }
    &-extra {
      color: $g-custom-list-color-second;
      font-size: 16px;
    }
  }
}
</style>
