<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    id?: number
    isSeeAll?: boolean
    isDraggable?: boolean
  }>(),
  {
    isSeeAll: true,
    isDraggable: true
  }
)

const isCollapse = defineModel<boolean>()
const emits = defineEmits<{ collapse: [boolean]; draggable: [string, number] }>()
const handleCollapse = (isCollapse: boolean) => {
  emits('collapse', isCollapse)
}

const optionList = ref([
  { id: 1, name: 'Move to Top', icon: 'icon_movetotop_b' },
  {
    id: 2,
    name: 'Move Up',
    icon: 'icon_moveup_b'
  },
  {
    id: 3,
    name: 'Move Down',
    icon: 'icon_movedown_b'
  },
  {
    id: 4,
    name: 'Move to Bottom',
    icon: 'icon_movetobottom__b'
  }
])

const handleDraggable = (type: string) => {
  if (!props.id) return
  emits('draggable', type, props.id)
  vBoxPopoverRef.value.hide()
}

const vBoxPopoverRef = ref()
</script>

<template>
  <div class="v-box">
    <div class="header">
      <slot name="header">Title</slot>
      <div class="option">
        <SeeAllIcon
          v-if="props.isSeeAll"
          @update:modelValue="handleCollapse"
          v-model="isCollapse"
        />
        <el-popover
          ref="vBoxPopoverRef"
          popper-class="v-box-options"
          :width="172"
          placement="bottom"
          trigger="click"
        >
          <div class="options">
            <div
              class="move-item"
              @click="handleDraggable(item.name)"
              v-for="item in optionList"
              :key="item.name"
            >
              <span class="font_family" :class="[`icon-${item.icon}`]"></span>
              <span>{{ item.name }}</span>
            </div>
          </div>
          <template #reference v-if="props.isDraggable">
            <el-button class="sort handle-draggable el-button--text">
              <span class="font_family icon-icon_dragsort__b" style="font-size: 16px"></span>
            </el-button>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.v-box {
  border: 1px solid var(--color-border);
  overflow: hidden;
  border-radius: 12px;
  & > .header {
    position: relative;
    padding: 0 16px;
    height: 48px;
    line-height: 48px;
    background-color: var(--color-header-bg);
    font-size: 18px;
    font-weight: 700;
    .option {
      position: absolute;
      right: 48px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
    }
    .sort {
      position: absolute;
      top: 50%;
      right: -40px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 32px;
      span.icon-icon_dragsort__b {
        color: var(--color-neutral-1);
      }
      & .font_family {
        &:active {
          color: var(--color-theme);
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-popover.el-popper.v-box-options {
  border-radius: 12px;
}
.v-box-options {
  .options {
    padding: 8px;
    color: var(--color-neutral-1);
    .move-item {
      height: 40px;
      line-height: 40px;

      &:hover {
        border-radius: 6px;
        background-color: var(--color-btn-default-bg-hover);
        span {
          color: var(--color-theme);
        }
      }
      .font_family {
        margin-left: 8px;
        margin-right: 10px;
        font-size: 16px;
        vertical-align: baseline;
      }
    }
  }
}
</style>
