<template>
  <a-dropdown trigger="contextMenu" @select="actionSelect">
    <span
      class="arco-tag arco-tag-size-medium"
      :class="{ 'link-activated': itemData.fullPath === $route.fullPath }"
    >
      <span class="tag-link">
        {{ itemData.title }}
      </span>
      <!-- <span
        v-show="
          itemData.fullPath === $route.fullPath &&
          itemData.name !== DEFAULT_ROUTE_NAME
        "
        class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
        @click.stop="tagClose(itemData, index)"
      >
        <icon-close />
      </span> -->
    </span>
    <template #content>
      <a-doption :disabled="disabledCurrent" :value="Eaction.current">
        <icon-close />
        <span>关闭当前标签页</span>
      </a-doption>
      <a-doption :disabled="disabledLeft" :value="Eaction.left">
        <icon-to-left />
        <span>关闭左侧标签页</span>
      </a-doption>
      <a-doption :disabled="disabledRight" :value="Eaction.right">
        <icon-to-right />
        <span>关闭右侧标签页</span>
      </a-doption>
      <a-doption :value="Eaction.others">
        <icon-swap />
        <span>关闭其它标签页</span>
      </a-doption>
      <a-doption :value="Eaction.all">
        <icon-folder-delete />
        <span>关闭全部标签页</span>
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useTabBarStore } from '@/store'
import type { TagProps } from '@/store/modules/tab-bar/types'
import { DEFAULT_ROUTE_NAME } from '@/router/routes/index'

// eslint-disable-next-line no-shadow
enum Eaction {
  current = 'current',
  left = 'left',
  right = 'right',
  others = 'others',
  all = 'all'
}

const props = defineProps({
  itemData: {
    type: Object as PropType<TagProps>,
    default() {
      return []
    }
  },
  index: {
    type: Number,
    default: 0
  }
})

const router = useRouter()
const route = useRoute()
const tabBarStore = useTabBarStore()

const tagList = computed(() => {
  return tabBarStore.getTabList
})

const disabledCurrent = computed(() => {
  return props.index === 0
})

const disabledLeft = computed(() => {
  return [0, 1].includes(props.index)
})

const disabledRight = computed(() => {
  return props.index === tagList.value.length - 1
})

const tagClose = (tag: TagProps, idx: number) => {
  tabBarStore.deleteTag(idx, tag)
  if (props.itemData.fullPath === route.fullPath) {
    const latest = tagList.value[idx - 1] // 获取队列的前一个tab
    router.push({
      name: latest.name,
      params: latest.params,
      query: latest.query
    })
  }
}

const findCurrentRouteIndex = () => {
  return tagList.value.findIndex(el => el.fullPath === route.fullPath)
}
const actionSelect = (value: any) => {
  const { itemData, index } = props
  const copyTagList = [...tagList.value]
  if (value === Eaction.current) {
    tagClose(itemData, index)
  } else if (value === Eaction.left) {
    const currentRouteIdx = findCurrentRouteIndex()
    copyTagList.splice(1, props.index - 1)

    tabBarStore.freshTabList(copyTagList)
    if (currentRouteIdx < index) {
      router.push({ name: itemData.name })
    }
  } else if (value === Eaction.right) {
    const currentRouteIdx = findCurrentRouteIndex()
    copyTagList.splice(props.index + 1)

    tabBarStore.freshTabList(copyTagList)
    if (currentRouteIdx > index) {
      router.push({ name: itemData.name })
    }
  } else if (value === Eaction.others) {
    const filterList = tagList.value.filter((el, idx) => {
      return idx === 0 || idx === props.index
    })
    tabBarStore.freshTabList(filterList)
    router.push({
      name: itemData.name,
      params: itemData.params,
      query: itemData.query
    })
  } else {
    tabBarStore.resetTabList()
    router.push({ name: DEFAULT_ROUTE_NAME })
  }
}
</script>

<style scoped lang="less">
.tag-link {
  // color: var(--color-text-2);
  text-decoration: none;
  font-size: 14px;
}
.link-activated {
  color: rgb(var(--primary-6));
  .tag-link {
    // color: rgb(var(--link-6));
    display: inline-block;
  }
  & + .arco-tag-close-btn {
    color: rgb(var(--primary-6));
  }
}
:deep(.arco-dropdown-option-content) {
  span {
    margin-left: 10px;
  }
}
.arco-dropdown-open {
  .tag-link {
    color: rgb(var(--link-6));
  }
  .arco-tag-close-btn {
    color: rgb(var(--link-6));
  }
}
</style>
