<script lang="ts" setup>
import { markInfo } from '../../hook/useMarks'
import { mdiMapMarker, mdiLanConnect } from '@quasar/extras/mdi-v7'

defineProps({
    marks: Array<markInfo>
})
defineEmits(['flyTo', 'remove'])
</script>

<template>
    <!-- TODO 移除-->
    <q-list bordered separator>
        <q-item clickable v-ripple v-for="(mark, i) in marks" :key="i">
            <q-menu touch-position context-menu>
                <q-list dense style="min-width: 100px">
                    <q-item clickable v-close-popup>
                        <q-item-section @click="$emit('flyTo', i)">跳转</q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup>
                        <q-item-section @click="$emit('remove', i)">删除</q-item-section>
                    </q-item>
                </q-list>
            </q-menu>
            <q-item-section side>
                <q-input filled v-model="mark.title">
                    <template v-slot:append>
                        <q-icon :name="{ 'localtion': mdiMapMarker, 'equipment': mdiLanConnect }[mark.type ||'localtion']"></q-icon>
                    </template>
                </q-input>
            </q-item-section>
            <q-item-section side>
                <q-toggle color="blue" v-model="mark.opacity" :false-value="0" :true-value="1" />
            </q-item-section>
        </q-item>
    </q-list>
</template>