<template>
  <div class="establish-container">
    <!-- 弹出的按钮容器 -->
    <!-- <div class="expanded-buttons" :class="{ 'show': isExpanded }"> -->
    <button v-for="(btn) in isbuttonsave()" :class="{ 'show': isExpanded }" :key="btn.id" class="action-button"
      @click="handleButtonClick(btn)">
      <!-- <i :class="btn.icon"></i> -->
      <span>{{ btn.label }}</span>
    </button>
    <!-- </div> -->

    <!-- 主圆形按钮 -->
    <button class="main-button" :class="{ 'active': isExpanded }" @click="toggleExpand">
      <i class="icon">+</i>
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router';
import { articleService, messageService, categoryAttributeService ,loginService} from '@/services'
// 全局状态管理
import { useGlobalStore } from '@/store/globalStore'
const globalStore = useGlobalStore()
// 路由参数
const router = useRouter()

// 定义响应式状态
const isExpanded = ref(false)
const buttons = [
  { id: 1, label: '新建文章', icon: 'icon-add-article' },
  { id: 2, label: '新建分类', icon: 'icon-create-category' },
  { id: 3, label: '疯言疯语', icon: 'icon-upload-file' },
  { id: 4, label: '新建标签', icon: 'icon-new-tag' },
  { id: 5, label: '登出', icon: 'icon-logout' }
]
const buttonsave = [
  { id: 1, label: '修改文章', icon: 'icon-add-article' },
  { id: 2, label: '删除删除', icon: 'icon-create-category' },
]

const isbuttonsave = () => {

  if (globalStore.getValue('localpath').name == 'article') {
    return buttonsave
  }
  return buttons
}
// 切换按钮显示状态
const toggleExpand = (event) => {
  isExpanded.value = !isExpanded.value
  // 防止点击弹出的按钮后再次触发主按钮的点击事件
  event.stopPropagation()

}

// 处理按钮点击事件
const handleButtonClick = (button) => {
  console.log('点击了按钮:', button.label)
  // 可以在这里添加具体的按钮点击逻辑
  if (button.label == '新建文章') {
    router.push({
      path: '/articlesave',
    })
  }
  if (button.label == '新建分类') {
    globalStore.setValue('localpath', { name: 'category', id: 0 })
  }
  if (button.label == '疯言疯语') {
    globalStore.setValue('localpath', { name: 'message', id: 0 })
  }
  if (button.label == '新建标签') {
    globalStore.setValue('localpath', { name: 'tag', id: 0 })
  }
  if (button.label == '修改文章') {
    globalStore.setValue('localpath', { name: 'article', id: Number(route.query.id) })
  }
  if (button.label == '删除删除') {
    // 确认删除
    ElMessageBox.confirm('确定删除该文章吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 调用删除文章接口
      articleService.deleteArticle(Number(route.query.id)).then(response => {
        if (response.code == 200) {
          ElMessage.success('文章删除成功')
          // 跳转回文章列表页
          router.push({ path: '/home' })
        } else {
          ElMessage.error(response.message || '删除失败')
        }
      }).catch(err => {
        ElMessage.error(err.message || '删除失败')
      })
    }).catch(() => {
      // 取消删除
    })
  }
  if (button.label == '登出') {
    // 调用登出接口
    loginService.logout().then(response => {
      if (response.code == 200) {
        ElMessage.success('登出成功')
        // 清空全局状态
        globalStore.clearAll()
        // 清除localStorage中的token
        localStorage.removeItem('token')
        // 跳转首页
        router.push({ path: '/' })
      } else {
        ElMessage.error(response.message || '登出失败')
      }
    }).catch(err => {
      ElMessage.error(err.message || '登出失败')
    })
  }
  isExpanded.value = false // 点击后收起
}

// 点击外部区域收起按钮的处理函数
const handleClickOutside = (e) => {
  const mainButton = document.querySelector('.main-button')
  const actionButtons = document.querySelectorAll('.action-button')

  // 检查是否点击了主按钮
  const clickedMainButton = mainButton && mainButton.contains(e.target)

  // 检查是否点击了任何一个操作按钮
  const clickedActionButton = Array.from(actionButtons).some(button => button.contains(e.target))

  // 如果点击的不是主按钮和操作按钮，则收起
  if (!clickedMainButton && !clickedActionButton) {
    isExpanded.value = false
  }
}

// 生命周期钩子 - 挂载时添加事件监听
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 生命周期钩子 - 卸载前清理事件监听
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.establish-container {
  width: 150px;
  position: fixed;
  z-index: 1000;
  bottom: 50px;
  right: -10px;
}

/* 主圆形按钮样式 */
.main-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #409eff;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1001;
  margin-left: 80px;
}

.main-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.main-button.active {
  background-color: #f56c6c;
  transform: rotate(45deg);
}

.main-button.active:hover {
  background-color: #f78989;
}

.main-button .icon {
  font-style: normal;
  transition: transform 0.3s ease;
}


/* 弹出的按钮样式 */
.action-button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 15px;
  background-color: white;
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
  opacity: 0;
  /* 从右侧滑入 */
  min-width: 120px;
}

.action-button:hover span {
  color: red;
}

.action-button i {
  margin-right: 8px;
  font-style: normal;
  color: #409eff;
  font-size: 16px;
}

.action-button span {
  color: #606266;
  font-size: 14px;
}

/* 确保按钮按顺序显示，形成卷帘效果 */
.action-button.show:nth-child(1) {
  transition: all 0.9s ease-in-out;
  margin-left: 0;
  opacity: 1;
}

.action-button.show:nth-child(2) {
  transition: all 0.7s ease-in-out;
  margin-left: 0;
  opacity: 1;
}

.action-button.show:nth-child(3) {
  transition: all 0.5s ease-in-out;
  margin-left: 0;
  opacity: 1;
}

.action-button.show:nth-child(4) {
  transition: all 0.3s ease-in-out;
  margin-left: 0;
  opacity: 1;
}
.action-button.show:nth-child(5) {
  transition: all 0.2s ease-in-out;
  margin-left: 0;
  opacity: 1;
}

/* 确保按钮按顺序关闭，形成卷帘效果 */
.action-button:nth-child(1) {
  transition: all 0.3s ease-in-out;
  margin-left: 150px;
  opacity: 1;
}

.action-button:nth-child(2) {
  transition: all 0.5s ease-in-out;
  margin-left: 150px;
  opacity: 1;
}

.action-button:nth-child(3) {
  transition: all 0.7s ease-in-out;
  margin-left: 150px;
  opacity: 1;
}

.action-button:nth-child(4) {
  transition: all 0.9s ease-in-out;
  margin-left: 150px;
  opacity: 1;
}

.action-button:nth-child(5) {
  transition: all 1.1s ease-in-out;
  margin-left: 150px;
  opacity: 1;
}
/* 响应式调整 */
@media (max-width: 768px) {
  .establish-container {
    bottom: 20px;
    right: 20px;
  }

  .main-button {
    width: 50px;
    height: 50px;
    font-size: 20px;
    bottom: 0;
    right: 0;
  }

  .expanded-buttons.show {
    width: 130px;
  }

  .action-button {
    min-width: 100px;
    padding: 8px 12px;
  }

  .action-button span {
    font-size: 12px;
  }
}
</style>