<template>
  <div>
    <div
      class="right-external-hide-btn"
      :class="{ hidden: isHidden }"
      @click="handleHide"
      :title="$t('rightPanel.hideRightPanel')"
    >
      <i class="el-icon-arrow-right"></i>
    </div>

    <div
      class="floating-right-panel blue-theme"
      :class="{ 'hidden': isHidden }"
    >
      <div v-if="activeTab === 'plan'" class="tab-content plan-content">
        <div class="section">
          <div class="section-header">
            <div class="section-title">{{ $t('rightPanel.planList') }}</div>
            <el-button
              type="primary"
              size="mini"
              @click="handleCreatePlan"
              class="create-route-btn-new"
            >
              {{ $t('rightPanel.createPlan') }}
            </el-button>
          </div>
          <div class="tree-list">
            <!-- 方案列表 -->
            <div
              v-for="plan in plans"
              :key="plan.id"
              class="tree-item plan-item"
              :class="{ selected: selectedPlanId === plan.id }"
            >
              <div class="tree-item-header" @click="togglePlan(plan.id)">
                <i :class="expandedPlans.includes(plan.id) ? 'el-icon-folder-opened' : 'el-icon-folder'" class="tree-icon"></i>
                <div class="tree-item-info">
                  <div class="tree-item-name">{{ plan.name }}</div>
                  <div class="tree-item-meta">{{ routes.filter(r => r.scenarioId === plan.id).length }}个航线</div>
                </div>
                <div class="tree-item-actions">
                  <i class="el-icon-plus" title="新建航线" @click.stop="handleCreateRouteForPlan(plan)"></i>
                  <i class="el-icon-edit" title="编辑" @click.stop="handleOpenPlanDialog(plan)"></i>
                  <i class="el-icon-delete" title="删除" @click.stop="handleDeletePlan(plan)"></i>
                </div>
              </div>
              <!-- 航线列表 -->
              <div v-if="expandedPlans.includes(plan.id)" class="tree-children route-children">
                <div
                  v-for="route in routes.filter(r => r.scenarioId === plan.id)"
                  :key="route.id"
                  class="tree-item route-item"
                  :class="getRouteClasses(route.id)"
                >
                  <div class="tree-item-header" @click="toggleRoute(route.id)">
                    <i class="el-icon-map-location tree-icon"></i>
                    <div class="tree-item-info">
                      <div class="tree-item-name">{{ route.name }}</div>
                      <div class="tree-item-meta">{{ route.points }}{{ $t('rightPanel.points') }}</div>
                      <div v-if="routeLockedByOther(route.id)" class="route-locked-tag">
                        <i class="el-icon-lock"></i> {{ routeLockedByName(route.id) }} 正在编辑
                      </div>
                    </div>
                    <el-tag
                      v-if="route.conflict"
                      size="mini"
                      type="danger"
                      class="conflict-tag"
                    >
                      {{ $t('rightPanel.conflict') }}
                    </el-tag>
                    <div class="tree-item-actions">
                      <i class="el-icon-view" title="显示/隐藏" @click.stop="handleToggleRouteVisibility(route)"></i>
                      <i
                        v-if="!routeLockedByOther(route.id)"
                        :class="routeLocked[route.id] ? 'el-icon-lock' : 'el-icon-unlock'"
                        :title="routeLocked[route.id] ? '解锁' : '上锁'"
                        @click.stop="$emit('toggle-route-lock', route)"
                      ></i>
                      <i
                        v-else
                        class="el-icon-lock route-locked-by-other-icon"
                        title="被他人锁定，无法操作"
                      ></i>
                      <i
                        class="el-icon-edit"
                        :title="routeLockedByOther(route.id) ? '被他人锁定，无法编辑' : '编辑'"
                        :class="{ 'action-disabled': routeLockedByOther(route.id) }"
                        @click.stop="!routeLockedByOther(route.id) && handleOpenRouteDialog(route)"
                      ></i>
                      <i
                        class="el-icon-delete"
                        :class="{ 'action-disabled': routeLockedByOther(route.id) }"
                        title="删除"
                        @click.stop="!routeLockedByOther(route.id) && $emit('delete-route', route)"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeTab === 'platform'" class="tab-content platform-content">
        <div class="section-header" style="padding: 10px 0; display: flex; justify-content: space-between; align-items: center;">
          <div class="section-title">平台列表</div>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-upload2"
            @click="handleImportPlatform"
            class="create-route-btn-new"
            style="width: 90px;height: 25px;line-height: 25px;padding: 0;font-size: 14px;"
          >
            导入平台
          </el-button>
        </div>
        <div class="platform-categories">
          <el-tabs v-model="activePlatformTab" type="card" size="mini" class="blue-tabs">
            <el-tab-pane :label="$t('rightPanel.air')" name="air">
              <div class="platform-list">
                <div
                  v-for="platform in airPlatforms"
                  :key="platform.id"
                  class="platform-item platform-item-draggable"
                  draggable="true"
                  @click="handlePlatformItemClick(platform, $event)"
                  @dragstart="onPlatformDragStart($event, platform)"
                >
                  <div class="platform-icon" :style="{ color: platform.color }">
                    <img v-if="isImg(platform.imageUrl)"
                         :src="formatImg(platform.imageUrl)"
                         class="platform-img"
                    />
                    <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
                  </div>
                  <div class="platform-info">
                    <div class="platform-name">{{ platform.name }}</div>
                    <div class="platform-type">{{ platform.type }}</div>
                  </div>
                  <div class="platform-action" style="margin-left: auto; padding-right: 10px;">
                    <i
                      class="el-icon-delete"
                      title="删除平台"
                      style="color: #F56C6C; cursor: pointer;"
                      @click.stop="$emit('delete-platform', platform)"
                    ></i>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane :label="$t('rightPanel.sea')" name="sea">
              <div class="platform-list">
                <div
                  v-for="platform in seaPlatforms"
                  :key="platform.id"
                  class="platform-item platform-item-draggable"
                  draggable="true"
                  @click="handlePlatformItemClick(platform, $event)"
                  @dragstart="onPlatformDragStart($event, platform)"
                >
                  <div class="platform-icon" :style="{ color: platform.color }">
                    <img v-if="isImg(platform.imageUrl)"
                         :src="formatImg(platform.imageUrl)"
                         class="platform-img"
                    />
                    <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
                  </div>
                  <div class="platform-info">
                    <div class="platform-name">{{ platform.name }}</div>
                    <div class="platform-type">{{ platform.type }}</div>
                  </div>
                  <div class="platform-action" style="margin-left: auto; padding-right: 10px;">
                    <i class="el-icon-delete" title="删除平台" style="color: #F56C6C; cursor: pointer;" @click.stop="$emit('delete-platform', platform)"></i>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane :label="$t('rightPanel.ground')" name="ground">
              <div class="platform-list">
                <div
                  v-for="platform in groundPlatforms"
                  :key="platform.id"
                  class="platform-item platform-item-draggable"
                  draggable="true"
                  @click="handlePlatformItemClick(platform, $event)"
                  @dragstart="onPlatformDragStart($event, platform)"
                >
                  <div class="platform-icon" :style="{ color: platform.color }">
                    <img v-if="isImg(platform.imageUrl)"
                         :src="formatImg(platform.imageUrl)"
                         class="platform-img"
                    />
                    <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
                  </div>
                  <div class="platform-info">
                    <div class="platform-name">{{ platform.name }}</div>
                    <div class="platform-type">{{ platform.type }}</div>
                  </div>
                  <div class="platform-action" style="margin-left: auto; padding-right: 10px;">
                    <i class="el-icon-delete" title="删除平台" style="color: #F56C6C; cursor: pointer;" @click.stop="$emit('delete-platform', platform)"></i>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightPanel',
  props: {
    isHidden: {
      type: Boolean,
      default: false
    },
    activeTab: {
      type: String,
      default: 'plan'
    },
    plans: {
      type: Array,
      default: () => []
    },
    routes: {
      type: Array,
      default: () => []
    },
    activeRouteIds: {
      type: Array,
      default: () => []
    },
    /** 航线上锁状态：routeId -> true 上锁，与地图右键上锁/解锁同步 */
    routeLocked: {
      type: Object,
      default: () => ({})
    },
    /** 协作：谁正在编辑（锁定）该航线 routeId -> { userId, userName, nickName, sessionId } */
    routeLockedBy: {
      type: Object,
      default: () => ({})
    },
    /** 当前用户 ID，用于判断“正在查看/锁定”是否为自己 */
    currentUserId: {
      type: [Number, String],
      default: null
    },
    selectedPlanId: {
      type: [String, Number],
      default: null
    },
    selectedPlanDetails: {
      type: Object,
      default: null
    },
    selectedRouteId: {
      type: [String, Number],
      default: null
    },
    selectedRouteDetails: {
      type: Object,
      default: null
    },
    /** 父组件要求展开的方案树（如冲突定位时），会展开对应方案以便看到航线行 */
    expandRouteIds: {
      type: Array,
      default: () => []
    },
    airPlatforms: {
      type: Array,
      default: () => []
    },
    seaPlatforms: {
      type: Array,
      default: () => []
    },
    groundPlatforms: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      activePlatformTab: 'air',
      expandedPlans: [], // 展开的方案列表
      platformJustDragged: false // 刚拖拽过，避免拖拽后误触点击打开弹窗
    }
  },
  watch: {
    expandRouteIds(newVal) {
      if (newVal && newVal.length) {
        newVal.forEach(routeId => {
          const r = this.routes.find(route => route.id === routeId);
          if (r && r.scenarioId != null && !this.expandedPlans.includes(r.scenarioId)) {
            this.expandedPlans.push(r.scenarioId);
          }
        });
      }
    },
    selectedPlanId(newId) {
      if (newId) {
        console.log('>>> [子组件同步] 检测到方案切换，自动展开 ID:', newId);
        // 如果还没展开，就把它塞进展开数组里
        if (!this.expandedPlans.includes(newId)) {
          this.expandedPlans.push(newId);
        }
      }
    },
    activeRouteIds: {
      handler(newVal) {
        console.log('activeRouteIds updated:', newVal);
      },
      deep: true
    }
  },
  methods: {
    // 切换方案展开/折叠
    togglePlan(planId) {
      const index = this.expandedPlans.indexOf(planId)
      if (index > -1) {
        this.expandedPlans.splice(index, 1)
        const planRoutes = this.routes.filter(r => r.scenarioId === planId)
        planRoutes.forEach(route => {
          if (this.activeRouteIds.includes(route.id)) {
            this.handleToggleRouteVisibility(route)
          }
        })
        this.$emit('select-plan', { id: null })
      } else {
        // 展开新方案：不再隐藏航线，保留已打开的航线显示；仅切换展开状态并选中方案
        this.expandedPlans = [];
        this.expandedPlans.push(planId)
        const plan = this.plans.find(p => p.id === planId)
        if (plan) {
          this.$emit('select-plan', plan)
        }
      }
    },

    // 点击航线行：与父组件 selectRoute 联动（未选中则上图，已选中则取消上图）；航点请在「编辑航线」中维护
    toggleRoute(routeId) {
      const route = this.routes.find(r => r.id === routeId)
      if (!route) return
      if (!route.waypoints) {
        this.$set(route, 'waypoints', [])
      }
      this.handleSelectRoute(route)
      this.$nextTick(() => {
        if (route.scenarioId != null && !this.expandedPlans.includes(route.scenarioId)) {
          this.expandedPlans.push(route.scenarioId)
        }
      })
    },

    // 判断是否是图片路径
    isImg(path) {
      if (!path) return false;
      return path.includes('/') || path.includes('data:image');
    },

    // 格式化图片地址
    formatImg(url) {
      if (!url) return '';
      // 清理路径中的双斜杠
      const cleanPath = url.replace(/\/+/g, '/');
      const backendUrl = process.env.VUE_APP_BACKEND_URL;
      const finalUrl = backendUrl + cleanPath;

      // 👈 核心排查日志：按 F12 在控制台看这个输出！
      console.log('>>> [图片渲染调试] 最终拼接地址:', finalUrl);

      return finalUrl;
    },

    handleHide() {
      this.$emit('hide')
    },

    handleSelectRoute(route) {
      // 确保航线有航点数据
      this.$emit('select-route', route)
    },

    handleCreatePlan() {
      this.$emit('create-plan')
    },

    handleCreateRouteForPlan(plan) {
      this.$emit('create-route', plan)
    },

    handleDeletePlan(plan) {
      this.$confirm(`是否确认删除方案 "${plan.name}"？这将同时删除该方案下的所有航线。`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$emit('delete-plan', plan);
      }).catch(() => {
      });
    },

    handleOpenPlanDialog(plan) {
      this.$emit('open-plan-dialog', plan)
    },

    handleImportPlatform() {
      this.$emit('open-import-dialog');
    },

    handleOpenRouteDialog(route) {
      this.$emit('open-route-dialog', route)
    },

    handleToggleRouteVisibility(route) {
      this.$emit('toggle-route-visibility', route)
    },

    getRouteClasses(routeId) {
      return {
        active: this.activeRouteIds.includes(routeId),
        'locked-by-other': this.routeLockedByOther(routeId)
      }
    },
    /** 是否有其他成员正在编辑（锁定）该航线 */
    routeLockedByOther(routeId) {
      const e = this.routeLockedBy[routeId]
      if (!e) return false
      const myId = this.currentUserId != null ? Number(this.currentUserId) : null
      const uid = e.userId != null ? Number(e.userId) : null
      return myId !== uid
    },
    routeLockedByName(routeId) {
      const e = this.routeLockedBy[routeId]
      return (e && (e.nickName || e.userName)) || ''
    },
    handleOpenPlatformDialog(platform) {
      this.$emit('open-platform-dialog', platform)
    },

    /** 平台项点击：若刚拖拽过则不打开弹窗，避免误触 */
    handlePlatformItemClick(platform, ev) {
      if (this.platformJustDragged) {
        this.platformJustDragged = false
        return
      }
      this.handleOpenPlatformDialog(platform)
    },

    /** 拖拽平台图标到地图时传递平台数据 */
    onPlatformDragStart(ev, platform) {
      this.platformJustDragged = true
      setTimeout(() => { this.platformJustDragged = false }, 300)
      try {
        ev.dataTransfer.setData('application/json', JSON.stringify({
          id: platform.id,
          name: platform.name,
          type: platform.type,
          imageUrl: platform.imageUrl,
          iconUrl: platform.iconUrl,
          icon: platform.icon,
          color: platform.color
        }))
        ev.dataTransfer.effectAllowed = 'copy'
      } catch (e) {
        console.warn('Platform drag start failed', e)
      }
    }
  }
}
</script>

<style scoped>
/* 右侧外部隐藏按钮 */
.right-external-hide-btn {
  position: absolute;
  top: 80px;
  right: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #165dff;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  z-index: 85;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
  transition: all 0.3s;
  backdrop-filter: blur(5px);
}

.right-external-hide-btn:hover {
  color: #165dff;
  background: rgba(22, 93, 255, 0.2);
  transform: scale(1.1);
}

.right-external-hide-btn.hidden {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}

/* 右侧浮动面板 - 蓝色主题 */
.floating-right-panel {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 300px;
  border-radius: 0 8px 8px 8px;
  z-index: 90;
  color: #333;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(22, 93, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  transition: all 0.3s ease;
  opacity: 1;
  transform: translateX(0);
}

.floating-right-panel.hidden {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}

.tab-content {
  padding: 15px;
  max-height: 500px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.section {
  margin-bottom: 20px;
}

/* 新增：标题栏容器样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(22, 93, 255, 0.2);
  margin-bottom: 15px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #165dff;
}

.create-route-btn-new {
  background-color: #165dff !important;
  border-color: #165dff !important;
  color: #ffffff !important;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
}

.create-route-btn-new:hover {
  background-color: #285fd9 !important;
  border-color: #285fd9 !important;
  opacity: 0.9;
}

.tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tree-item {
  border-radius: 6px;
  transition: all 0.3s;
  border: 1px solid rgba(22, 93, 255, 0.1);
}

.tree-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 6px;
}

.tree-item-header:hover {
  background: rgba(22, 93, 255, 0.1);
  transform: translateX(-2px);
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
}

.tree-item.plan-item .tree-item-header {
  background: rgba(255, 255, 255, 0.9) !important;
}

.tree-item.route-item .tree-item-header {
  background: rgba(255, 255, 255, 0.8) !important;
}

.tree-item.route-item:not(.active) .tree-item-header {
  background: rgba(255, 255, 255, 0.8) !important;
}

.tree-item.active .tree-item-header {
  background: rgba(22, 93, 255, 0.15) !important;
  border-color: rgba(22, 93, 255, 0.3);
  box-shadow: 0 2px 10px rgba(22, 93, 255, 0.25);
}

.tree-item.selected .tree-item-header {
  background: rgba(22, 93, 255, 0.1) !important;
  border-color: rgba(22, 93, 255, 0.2);
}

.tree-icon {
  font-size: 16px;
  color: #165dff;
  flex-shrink: 0;
}

.tree-item-info {
  flex: 1;
}

.tree-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.tree-item-meta {
  font-size: 12px;
  color: #999;
}

.route-locked-tag {
  font-size: 11px;
  color: #909399;
  margin-top: 2px;
}

.route-locked-tag .el-icon-lock {
  margin-right: 2px;
  font-size: 12px;
}

.tree-item.route-item.locked-by-other .tree-item-header {
  background: rgba(240, 242, 245, 0.95) !important;
  border-left: 3px solid #c0c4cc;
}

.tree-item-actions i.action-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  opacity: 0.7;
}

.tree-item-actions i.action-disabled:hover {
  background: transparent;
  transform: none;
}

.route-locked-by-other-icon {
  color: #909399;
  cursor: default;
}

.tree-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.tree-item-actions i {
  cursor: pointer;
  color: #165dff;
  font-size: 14px;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.tree-item-actions i:hover {
  background: rgba(22, 93, 255, 0.1);
  transform: scale(1.2);
}

.tree-children {
  margin-left: 20px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.route-children {
  margin-left: 25px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.platform-categories {
  height: 100%;
}

.platform-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 450px;
  overflow-y: auto;
}

.platform-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(22, 93, 255, 0.1);
}

.platform-item:hover {
  background: rgba(22, 93, 255, 0.1);
  transform: translateX(-2px);
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
}

.platform-item-draggable {
  cursor: grab;
}

.platform-item-draggable:active {
  cursor: grabbing;
}

.platform-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.platform-info {
  flex: 1;
}

.platform-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.platform-type {
  font-size: 12px;
  color: #999;
}

.platform-status {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background: #67c23a;
  box-shadow: 0 0 6px rgba(103, 194, 58, 0.6);
}

.status-dot.offline {
  background: #999;
}

.status-dot.operating {
  background: #165dff;
  animation: pulse 2s infinite;
  box-shadow: 0 0 10px rgba(22, 93, 255, 0.8);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.blue-btn {
  background: rgba(22, 93, 255, 0.1);
  color: #165dff;
  border: 1px solid rgba(22, 93, 255, 0.3);
}

.blue-btn:hover {
  background: rgba(22, 93, 255, 0.2);
  border-color: rgba(22, 93, 255, 0.5);
}

.blue-text-btn {
  color: #165dff;
}

.blue-text-btn:hover {
  color: #165dff;
}

.blue-badge {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
  border: 1px solid rgba(245, 108, 108, 0.3);
}

.blue-tabs >>> .el-tabs__item {
  color: #666;
  transition: all 0.3s;
}

.blue-tabs >>> .el-tabs__item:hover {
  color: #165dff;
}

.blue-tabs >>> .el-tabs__item.is-active {
  color: #165dff;
  font-weight: 600;
}

.blue-tabs >>> .el-tabs__active-bar {
  background-color: #165dff;
  box-shadow: 0 0 6px rgba(22, 93, 255, 0.5);
}

.blue-tabs >>> .el-tabs__nav-wrap::after {
  background-color: rgba(22, 93, 255, 0.3);
}

.blue-success {
  color: #67c23a;
}

.blue-warning {
  color: #e6a23c;
}

.platform-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 裁剪超出部分 */
}

.platform-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：图片自动填充不拉伸 */
  border-radius: 4px;
}
</style>
