<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {type cardItem, cards} from "~/config/cards";

const mainLayoutStore = useMainLayoutStore()
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  cardId: {
    type: String,
    required: true
  }
})
const items = [{
  label: '刷新',
  command: () => {
  }
}, {
  label: '弹出',
  command: () => {
  }
}, {
  label: '删除',
  command: () => {
    mainLayoutStore.deleteLayout(props.id)
  }
}
];
let card: cardItem | undefined = undefined
onBeforeMount(() => {
  card = cards.find(x => x.id === props.cardId)
})
</script>

<template>
  <div :id="`card_${id}`" class="card-layout">
    <SplitButton :model="items" class="SplitButton"/>
    <div :id="'item' + id" class="card-title vue-draggable-handle">
      <div></div>
      <h3 v-if="card && card.name">{{ card?.name ?? "默认标题" }}</h3>
    </div>
    <div class="card-content">
      <component :is="card?.component" v-if="card && card.component"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "base";

.card-layout {
  width: 100%;
  height: 100%;
  background: $light-bg-color;
  border-radius: $radius;
  padding-bottom: $padding;
  box-shadow: 0 10px 30px 0 rgba(17, 38, 146, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: $gap*1.5;
  will-change: scroll-position, contents;
  border: $border;
  .dark-mode & {
    background: $dark-bg-color;
  }
}

.SplitButton {
  position: absolute;
  right: $padding*.5;
  top: $padding*.5;

  :deep(.p-button) {
    background: unset;
    border: unset;
    padding: unset;

    > svg {
      stroke: $light-unfocused-color;

      .dark-mode & {
        stroke: $dark-unfocused-color;
      }

      &:hover {
        stroke: $light-text-color;

        .dark-mode & {
          stroke: $dark-text-color;
        }
      }
    }
  }
}

.card-content {
  padding: 0 $padding*1.5;
  flex: 1;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0
  }
}

.card-title {
  display: flex;
  align-items: center;
  gap: $gap;
  color: $light-text-color;
  padding: $padding*1.5;
  padding-bottom: 0;

  &,
  h3:hover {
    cursor: move;
  }

  .dark-mode & {
    color: $dark-text-color;
  }

  div {
    width: 6px;
    height: 20px;
    border-radius: $radius;
    background: $primary-color;
  }
}
</style>
