<script setup lang="ts">
import { ref } from 'vue'
const props = withDefaults(
  defineProps<{
    id?: number
  }>(),
  {}
)

const emits = defineEmits<{ changeCancel: [boolean]; draggable: [string, number] }>()
const changeCancel = (isShow: boolean) => {
  emits('changeCancel', isShow)
}

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">
        <el-button type="text" class="sort handle-draggable">
          <span class="iconfont_icon">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_dragsort__b"></use>
            </svg>
          </span>
        </el-button>
      </div>
      <div class="cancel" @click="changeCancel">
        <span class="iconfont_icon iconfont_cancel">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_reject_b"></use>
          </svg>
        </span>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="content">
      <slot name="content2"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.iconfont_icon {
  margin-right: 0;
}
.cancel {
  position: absolute;
  right: 12px;
  top: 12px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.v-box {
  border: 1px solid var(--color-border);
  overflow: hidden;
  border-radius: 12px;
  & > .header {
    position: relative;
    padding: 0 16px 0 48px;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    .option {
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
    }
    .cancel:hover {
      background-color: var(--color-btn-default-bg-hover);
      border-radius: 6px;
    }
    .sort {
      position: absolute;
      top: 50%;
      width: 24px;
      height: 24px;
      left: 12px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      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>
