<template>
  <!-- 工具栏 -->
  <div class="toolbar">
    <h3>战略地图画布 — 四层泳道</h3>
    <div class="toolbar-right">
      <el-select v-model="selectedMapLocal" placeholder="选择地图" style="width:200px;margin-right:8px;" @change="$emit('select-map', selectedMapLocal)">
        <el-option v-for="m in maps" :key="m.id" :label="m.title" :value="m.id" />
      </el-select>
      <!-- 缩放控制 -->
      <div class="zoom-controls" title="画布缩放">
        <el-button size="small" @click="$emit('zoom-out')" :disabled="zoomLevel <= 0.5">−</el-button>
        <span class="zoom-label">{{ Math.round(zoomLevel * 100) }}%</span>
        <el-button size="small" @click="$emit('zoom-in')" :disabled="zoomLevel >= 1.5">+</el-button>
        <el-button size="small" @click="$emit('zoom-reset')">100%</el-button>
        <el-button size="small" @click="$emit('zoom-fit')">适合</el-button>
      </div>
      <!-- 视角切换 -->
      <span class="view-toggle">
        <label class="vt-label" :class="{ active: viewDirection === 'cascade' }">
          <input type="radio" :checked="viewDirection === 'cascade'" @change="$emit('update:viewDirection', 'cascade')" /> 📐 级联
        </label>
        <label class="vt-label" :class="{ active: viewDirection === 'causal' }">
          <input type="radio" :checked="viewDirection === 'causal'" @change="$emit('update:viewDirection', 'causal')" /> 🔗 因果
        </label>
      </span>
      <el-button
        :type="chainMode ? 'warning' : 'default'"
        :class="{ 'chain-mode-on': chainMode }"
        @click="$emit('toggle-chain-mode')"
        title="点击节点可聚焦查看其相关因果链，其余自动变淡"
      >🔍 因果链查看{{ chainMode ? '中' : '' }}</el-button>
      <el-button @click="$emit('show-causality')">🔗 因果链推荐</el-button>
      <el-button @click="$emit('show-connection-manager')" title="以表格方式查看/创建/维护连线">🔗 连接管理</el-button>
      <el-button type="primary" @click="$emit('save-canvas')">保存</el-button>
      <el-button type="success" @click="$emit('publish-map')" v-if="currentMap?.status === 'draft'">发布</el-button>
      <el-button @click="$emit('show-versions')">版本历史</el-button>
      <el-button @click="$emit('go-alignment')" type="info" plain>
        <svg style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 12h4l2-3 3 3 4-7 3 5 2-2 4 4"/>
        </svg>
        查看执行看板
      </el-button>
      <el-button @click="$emit('export-image')">📷 导出图片</el-button>
    </div>
  </div>

  <!-- 连线模式提示 -->
  <div v-if="linkingFrom" class="linking-bar">
    <span>🔗 从「{{ linkingFrom.obj.name }}」连线 — 点击另一个目标完成连线</span>
    <el-button size="small" @click="$emit('cancel-link')">取消</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  maps: any[]
  selectedMap: number | null
  zoomLevel: number
  viewDirection: string
  currentMap: any
  linkingFrom: { key: string; obj: any } | null
  chainMode: boolean
}>()

const emit = defineEmits<{
  (e: 'select-map', id: number): void
  (e: 'update:viewDirection', v: string): void
  (e: 'zoom-in'): void
  (e: 'zoom-out'): void
  (e: 'zoom-reset'): void
  (e: 'zoom-fit'): void
  (e: 'export-image'): void
  (e: 'show-causality'): void
  (e: 'show-connection-manager'): void
  (e: 'save-canvas'): void
  (e: 'publish-map'): void
  (e: 'show-versions'): void
  (e: 'go-alignment'): void
  (e: 'cancel-link'): void
  (e: 'toggle-chain-mode'): void
}>()

const selectedMapLocal = ref(props.selectedMap)
watch(() => props.selectedMap, (v) => { selectedMapLocal.value = v })
</script>

<style scoped>
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
.toolbar h3 { margin: 0; }
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zoom-controls { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.zoom-controls .el-button { padding: 4px 8px !important; font-size: 13px; min-height: auto; }
.zoom-label { display: inline-block; min-width: 32px; text-align: center; font-size: 12px; color: #666; font-variant-numeric: tabular-nums; }
.linking-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #fdf6ec; border: 1px solid #f5dab1; border-radius: 8px; margin-bottom: 8px; font-size: 14px; flex-shrink: 0; }
.view-toggle { display:inline-flex; align-items:center; gap:0; margin-right:8px; border:1px solid #dcdfe6; border-radius:4px; overflow:hidden; }
.vt-label { padding:5px 12px; font-size:12px; cursor:pointer; color:#606266; background:#fff; transition:all .15s; display:inline-flex; align-items:center; gap:4px; }
.vt-label input { display:none; }
.vt-label.active { background:#409eff; color:#fff; border-color:#409eff; }
.vt-label:not(:last-child) { border-right:1px solid #dcdfe6; }
.vt-label:hover:not(.active) { color:#409eff; }
</style>
