<template>
  <div class="dispatch-console">
    <el-row :gutter="16" class="console-row">
      <el-col :xs="24" :md="5" class="left-panel">
        <CurrentShiftCard />
        <DispatchStatsCard Wh />

        <DispatchTimelineCard
          ref="timelineCard"
          @view-item="handleTimelineItemView"
          @clear-highlight="handleClearHighlight"
          @view-detail="handleTimelineDetail"
          @view-task-detail="handleTaskDetail"
          @task-status-changed="handleTaskStatusChanged"
          @create-task="handleCreateTaskFromTimeline"
          @event-pin-changed="handleEventPinChanged"
          :highlight-marker-id="highlightMarkerId"
        />
      </el-col>

      <el-col :xs="24" :md="19" class="map-col">
        <DispatchMapPanel
          @marker-clicked="handleMarkerClicked"
          @event-pin-changed="handleEventPinChanged"
          @task-created="handleTaskCreated"
          :highlight-marker-id="highlightMarkerId"
        />
      </el-col>
    </el-row>
    
    <TeamDetailDrawer
      :visible.sync="teamDetailVisible"
      :team-id="selectedTeamId"
    />
    
    <VehicleDetailDrawer
      :visible.sync="vehicleDetailVisible"
      :vehicle-id="selectedVehicleId"
    />

    <WarehouseDetailDrawer
      :visible.sync="warehouseDetailVisible"
      :warehouse-id="selectedWarehouseId"
    />

    <ExpertDetailDrawer
      :visible.sync="expertDetailVisible"
      :expert-id="selectedExpertId"
    />

    <EventDetailDrawer
      :visible.sync="eventDetailVisible"
      :event-id="selectedEventId"
    />

    <TaskDetailDrawer
      :visible.sync="taskDetailVisible"
      :task-id="selectedTaskId"
      @view-event="handleTaskDrawerViewEvent"
      @locate-event="handleTaskDrawerLocateEvent"
      @task-status-changed="handleTaskStatusChanged"
    />

    <CreateTaskDialog
      :visible.sync="createTaskDialogVisible"
      :event-id="createTaskEventId"
      :event-data="createTaskEventData"
      @success="handleTaskCreated"
    />
  </div>
</template>

<script>
import CurrentShiftCard from '@/components/shift/CurrentShiftCard.vue'
import DispatchStatsCard from '../components/DispatchStatsCard.vue'
import DispatchTimelineCard from '../components/DispatchTimelineCard.vue'
import DispatchMapPanel from '../components/DispatchMapPanel.vue'
import TeamDetailDrawer from '../components/TeamDetailDrawer.vue'
import VehicleDetailDrawer from '../components/VehicleDetailDrawer.vue'
import WarehouseDetailDrawer from '../components/WarehouseDetailDrawer.vue'
import ExpertDetailDrawer from '../components/ExpertDetailDrawer.vue'
import EventDetailDrawer from '../components/EventDetailDrawer.vue'
import TaskDetailDrawer from '../components/TaskDetailDrawer.vue'
import CreateTaskDialog from '../components/CreateTaskDialog.vue'

export default {
  name: 'DispatchWorkbench',
  components: {
    CurrentShiftCard,
    DispatchStatsCard,
    DispatchTimelineCard,
    DispatchMapPanel,
    TeamDetailDrawer,
    VehicleDetailDrawer,
    WarehouseDetailDrawer,
    ExpertDetailDrawer,
    EventDetailDrawer,
    TaskDetailDrawer,
    CreateTaskDialog
  },
  data() {
    return {
      teamDetailVisible: false,
      selectedTeamId: null,
      vehicleDetailVisible: false,
      selectedVehicleId: null,
      warehouseDetailVisible: false,
      selectedWarehouseId: null,
      expertDetailVisible: false,
      selectedExpertId: null,
      eventDetailVisible: false,
      selectedEventId: null,
      taskDetailVisible: false,
      selectedTaskId: null,
      highlightMarkerId: null,
      createTaskDialogVisible: false,
      createTaskEventId: null,
      createTaskEventData: null
    }
  },
  methods: {
    handleMarkerClicked(markerInfo) {
      if (markerInfo.type === 'teams') {
        // 显示队伍详情
        this.selectedTeamId = markerInfo.id
        this.teamDetailVisible = true
      } else if (markerInfo.type === 'vehicles') {
        // 显示车辆详情
        this.selectedVehicleId = markerInfo.id
        this.vehicleDetailVisible = true
      } else if (markerInfo.type === 'warehouses') {
        this.selectedWarehouseId = markerInfo.id
        this.warehouseDetailVisible = true
      } else if (markerInfo.type === 'experts') {
        this.selectedExpertId = markerInfo.id
        this.expertDetailVisible = true
      } else if (markerInfo.type === 'events') {
        this.selectedEventId = markerInfo.id
        this.eventDetailVisible = true
      } else {
        console.log('Marker clicked:', markerInfo)
      }
    },
    handleTimelineItemView(item) {
      if (item.markerId) {
          if (this.highlightMarkerId === item.markerId) {
            this.highlightMarkerId = ''
            this.$nextTick(() => {
              this.highlightMarkerId = item.markerId
            })
          } else {
            this.highlightMarkerId = item.markerId
          }
      }
    },
    handleClearHighlight() {
      this.highlightMarkerId = null
    },
    handleTimelineDetail(item) {
      if (item.type === 'event') {
        this.selectedEventId = item.entityId
        this.eventDetailVisible = true
      }
    },
    handleTaskDetail(item) {
      if (item.type === 'task' && item.entityId) {
        this.selectedTaskId = item.entityId
        this.taskDetailVisible = true
      }
    },
    handleTaskDrawerViewEvent(eventId) {
      // Close task drawer and open event drawer
      this.taskDetailVisible = false
      this.selectedEventId = eventId
      this.eventDetailVisible = true
    },
    handleTaskDrawerLocateEvent(eventId) {
      // Center map on event marker
      this.highlightMarkerId = `event-${eventId}`
      // Emit event to center map (if needed)
      this.$nextTick(() => {
        // Map should auto-center when highlightMarkerId changes
      })
    },
    handleTaskCreated(taskData) {
      // Refresh timeline to show the newly created task
      this.$nextTick(() => {
        if (this.$refs.timelineCard && this.$refs.timelineCard.reload) {
          this.$refs.timelineCard.reload()
        }
      })
      // Optionally refresh stats
      // if (this.$refs.statsCard && this.$refs.statsCard.reload) {
      //   this.$refs.statsCard.reload()
      // }
    },
    handleTaskStatusChanged({ taskId, status }) {
      // Refresh timeline to reflect status change
      this.$nextTick(() => {
        if (this.$refs.timelineCard && this.$refs.timelineCard.reload) {
          this.$refs.timelineCard.reload()
        }
      })
      // Refresh stats to update counts
      if (this.$refs.statsCard) {
        if (this.$refs.statsCard.reload) {
          this.$refs.statsCard.reload()
        } else if (this.$refs.statsCard.loadStats) {
          this.$refs.statsCard.loadStats()
        }
      }
    },
    handleEventPinChanged() {
      if (this.$refs.timelineCard) {
        this.$refs.timelineCard.reload()
      }
    },
    handleCreateTaskFromTimeline(event) {
      this.createTaskEventId = event.entityId
      this.createTaskEventData = event
      this.createTaskDialogVisible = true
    },
  }
}
</script>

<style lang="scss" scoped>
.dispatch-console {
  padding: 24px;
  background: #f5f7fb;
  min-height: calc(100vh - 84px);
  // height: calc(100vh - 84px);
}

.console-row {
  // display: flex;
  // align-items: stretch;
  height: calc(100vh - 135px);
  overflow: hidden;
}

.console-row .el-col {
  // display: flex;
  // flex-direction: column;
  height: 100%;
}

.left-panel {
  height: 100%;
  overflow-y: auto;
}

.left-panel > * {
  margin-bottom: 16px;
}

.left-panel > *:last-child {
  margin-bottom: 0;
}

.left-panel ::v-deep .info-card.recent-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left-panel ::v-deep .info-card.recent-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.shift-info {
  margin-top: 12px;
}

.shift-label {
  font-size: 13px;
  color: #909399;
}

.shift-value {
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
}

.shift-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #606266;
  font-size: 13px;
}

.shift-timeline {
  padding-left: 4px;
}

.member-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  min-width: 100px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-title {
  font-size: 13px;
  color: #909399;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
}

.stat-desc {
  font-size: 12px;
  color: #a8abb2;
}

.recent-list {
  margin-top: 16px;
}

.item-title {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 13px;
  margin-top: 4px;
}


</style>