<script setup lang="ts">
import { computed } from 'vue'
import WindTurbine from './icons/WindTurbine.vue'

interface Turbine {
  id: number
  turbineNo: string
  status: 0 | 1 | 2 // 0 待施工 1 施工中 2 已完成
  lat?: number
  lng?: number
}

const props = defineProps<{ modelValue: Turbine }>()
const emit = defineEmits<{
  (e: 'update:modelValue', v: Turbine): void
  (e: 'map'): void
}>()

const turbine = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
})

/* 状态文字 & 颜色 */
const statusTextMap = { 0: '待施工', 1: '施工中', 2: '已完成' }
const statusColorMap = { 0: '#FF7D00', 1: '#165DFF', 2: '#00B42A' }

/* 点击循环切换 */
function toggleStatus() {
  const next = ((turbine.value.status + 1) % 3) as 0 | 1 | 2
  turbine.value = { ...turbine.value, status: next }
}

function updateNo(val: string) {
  turbine.value = { ...turbine.value, turbineNo: val }
}
</script>

<template>
  <div class="turbine-card">
    <!-- 可点击的状态标签 -->
    <div class="status-tag" :style="{ backgroundColor: statusColorMap[turbine.status] }" @click="toggleStatus">
      {{ statusTextMap[turbine.status] }}
    </div>

    <!-- 风机图标 -->
    <WindTurbine />

    <!-- 机组编号输入框 -->
    <a-input
      :model-value="turbine.turbineNo" size="small" class="turbine-input" placeholder="编号"
      @update:model-value="updateNo"
    />

    <!-- 地图选点按钮 -->
    <a-button size="mini" @click="$emit('map')">
      <template #icon><icon-location /></template>
    </a-button>
  </div>
</template>

<style scoped>
.turbine-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    background: var(--color-bg-2);
}

.status-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 10px;
    color: #fff;
    padding: 2px 4px;
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
}

.turbine-input {
    margin-top: 8px;
    text-align: center;
}
</style>
