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

interface Turbine {
    id: number
    turbineNo: string
    status: 0 | 1 | 2
    lat?: number
    lng?: number
}

const props = defineProps<{
    modelValue: Turbine[]
}>()

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

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

function updateTurbine(index: number, t: Turbine) {
    const arr = [...turbines.value]
    arr.splice(index, 1, t)
    turbines.value = arr
}
</script>

<template>
    <a-row v-if="turbines.length" :gutter="[16, 16]" wrap>
        <a-col v-for="(t, i) in turbines" :key="t.id" :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
            <TurbineCard v-model="turbines[i]" @update:model-value="v => updateTurbine(i, v)" @map="$emit('map', t)" />
        </a-col>
    </a-row>
    <a-empty v-else description="请先设置项目规模" />
</template>