<template>
  <!-- 底部工具栏容器 -->
  <div class="footer">
    <div class="footer__content">
      <!-- 左侧信息区域 -->
      <div class="footer__left">
        <div class="footer__info">
          <span class="info-item clickable"
                @click="resetZoom"
                title="点击重置为100%">
            <i class="el-icon-view"></i>
            缩放: {{ scalePercent }}%
          </span>
          <span class="info-item">
            <i class="el-icon-full-screen"></i>
            {{ canvasSize }}
          </span>
          <span class="info-item"
                v-if="selectedCount > 0">
            <i class="el-icon-check"></i>
            已选中: {{ selectedCount }}/{{ totalComponents }}
          </span>
          <span class="info-item"
                v-else>
            <i class="el-icon-menu"></i>
            组件: {{ totalComponents }}
          </span>
          <span class="info-item">
            <i class="el-icon-collection-tag"></i>
            {{ currentGroup }}
          </span>
        </div>
      </div>

      <!-- 中间操作区域 -->
      <div class="footer__center">
        <div class="footer__brand">
          <span class="brand-text">avue数据可视化编辑器</span>

        </div>
      </div>

      <!-- 右侧工具区域 -->
      <div class="footer__right">
        <div class="footer__tools">
          <!-- 撤销/重做按钮组 -->
          <div class="tool-group">
            <div class="footer__tool-btn"
                 :class="{ 'footer__tool-btn--disabled': !canUndo }"
                 @click="handleUndo">
              <el-tooltip effect="dark"
                          content="撤销 (Ctrl+Z)"
                          placement="top">
                <el-icon>
                  <el-icon-arrow-left></el-icon-arrow-left>
                </el-icon>
              </el-tooltip>
            </div>

            <div class="footer__tool-btn"
                 :class="{ 'footer__tool-btn--disabled': !canRedo }"
                 @click="handleRedo">
              <el-tooltip effect="dark"
                          content="重做 (Ctrl+Y)"
                          placement="top">
                <el-icon>
                  <el-icon-arrow-right></el-icon-arrow-right>
                </el-icon>
              </el-tooltip>
            </div>
          </div>

          <!-- 选择工具组 -->
          <div class="tool-group">
            <div class="footer__tool-btn"
                 @click="handleSelectById">
              <el-tooltip effect="dark"
                          content="通过ID选择元素"
                          placement="top">
                <el-icon>
                  <el-icon-location></el-icon-location>
                </el-icon>
              </el-tooltip>
            </div>
          </div>

          <!-- 快捷键工具组 -->
          <div class="tool-group">
            <div class="footer__tool-btn"
                 @click="handleKeys">
              <el-tooltip effect="dark"
                          content="快捷键"
                          placement="top">
                <el-icon>
                  <el-icon-info-filled></el-icon-info-filled>
                </el-icon>
              </el-tooltip>
            </div>
          </div>

          <!-- 历史记录组 -->
          <div class="tool-group">
            <div class="footer__tool-btn">
              <HistoryViewer />
            </div>
          </div>

          <!-- 投屏工具组 -->
          <div class="tool-group">
            <div class="footer__tool-btn">
              <Screen />
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 快捷键弹窗 -->
    <keys ref="keysRef"></keys>
  </div>
</template>

<script setup>
import { computed, inject, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import HistoryViewer from '../components/HistoryViewer.vue'
import keys from './keys.vue'

// 注入依赖
const contain = inject('contain')

// 组件引用
const keysRef = ref(null)

// 计算属性
/**
 * 获取当前缩放比例（百分比显示）
 * @returns {number} 缩放比例百分比
 */
const scalePercent = computed(() => {
  const scale = contain?.scale || 1
  return Math.round(scale * 100)
})

/**
 * 获取画布尺寸信息
 * @returns {string} 画布尺寸
 */
const canvasSize = computed(() => {
  const width = contain?.config?.width || 1920
  const height = contain?.config?.height || 1080
  return `${width} × ${height}`
})

/**
 * 是否可以撤销
 * @returns {boolean} 能否撤销
 */
const canUndo = computed(() => {
  return contain?.canUndo || false
})

/**
 * 是否可以重做
 * @returns {boolean} 能否重做
 */
const canRedo = computed(() => {
  return contain?.canRedo || false
})

/**
 * 获取当前选中组件数量
 * @returns {number} 选中组件数量
 */
const selectedCount = computed(() => {
  return contain?.active?.length || 0
})

/**
 * 获取总组件数量
 * @returns {number} 总组件数量
 */
const totalComponents = computed(() => {
  return contain?.list?.length || 0
})



/**
 * 获取当前分组信息
 * @returns {string} 分组名称
 */
const currentGroup = computed(() => {
  const groups = contain?.config?.group || []
  const currentGroupId = contain?.group || ''
  const group = groups.find(g => g.id === currentGroupId)
  return group?.name || '主屏幕'
})

// 方法
/**
 * 处理撤销操作
 */
const handleUndo = () => {
  if (contain?.editorUndo && canUndo.value) {
    contain.editorUndo()
  }
}

/**
 * 处理重做操作
 */
const handleRedo = () => {
  if (contain?.editorRedo && canRedo.value) {
    contain.editorRedo()
  }
}

/**
 * 处理通过ID选择元素
 */
const handleSelectById = async () => {
  try {
    const { value } = await ElMessageBox.prompt('请输入要选择的元素ID', '选择元素', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputValidator: (value) => {
        if (!value?.trim()) {
          return '请输入有效的元素ID'
        }
        return true
      }
    })

    // 调用selectNav方法选择对应元素
    if (contain?.selectNav && value?.trim()) {
      contain.selectNav(value.trim())
      ElMessage.success(`已选择ID为 ${value.trim()} 的元素`)
    }
  } catch (error) {
    // 用户取消操作或发生错误
    if (error !== 'cancel') {
      console.warn('选择元素时发生错误:', error)
    }
  }
}

/**
 * 重置缩放到100%
 */
const resetZoom = () => {
  if (contain?.setScale) {
    contain.scale = 1
    contain.setScale()
    ElMessage.success('缩放已重置为100%')
  }
}

/**
 * 显示快捷键弹窗
 */
const handleKeys = () => {
  if (keysRef.value) {
    keysRef.value.show = true
  }
}



// 组件名称定义
defineOptions({
  name: 'Footer',
  components: {
    HistoryViewer,
    keys
  }
})
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  height: 35px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: var(--bg-color-secondary);
  border-top: var(--datav-border-dark);
  color: var(--text-color-primary);
  font-size: 12px;
  user-select: none;
  z-index: 99;

  &__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  &__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 10px;
  }

  &__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
  }

  &__info {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;

    .info-item {
      display: flex;
      align-items: center;
      gap: 2px;
      color: var(--text-color-secondary);
      font-size: 12px;
      white-space: nowrap;
      transition: all 0.3s ease;

      i {
        font-size: 14px;
        color: var(--primary-color);
      }

      &.clickable {
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 3px;

        &:hover {
          background: var(--bg-color-hover);
          color: var(--text-color-primary);
        }
      }
    }
  }

  &__brand {
    .brand-text {
      color: var(--text-color-secondary);
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }
  }

  &__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;

    &::-webkit-scrollbar {
      height: 0;
    }
  }

  // 工具组样式
  .tool-group {
    display: flex;
    align-items: center;
    gap: 4px;

    &__label {
      color: var(--text-color-placeholder);
      font-size: 11px;
      white-space: nowrap;
      margin-right: 2px;
    }
  }

  &__tool-btn {
    width: 28px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--bg-color-tertiary);
    border: 1px solid var(--border-color-light);
    border-radius: 2px;
    transition: all 0.3s ease;

    &:hover:not(&--disabled) {
      background: var(--primary-color);
      border-color: var(--primary-color);

      .el-icon {
        color: var(--color-white);
      }
    }

    &--disabled {
      cursor: not-allowed;
      opacity: 0.5;
      background: var(--bg-color-disabled);
      border-color: var(--border-color-lighter);

      .el-icon {
        color: var(--text-color-disabled);
      }
    }

    .el-icon {
      font-size: 14px;
      color: var(--text-color-primary);
      transition: color 0.3s ease;
    }
  }
}
</style> 