<script lang="ts">
export type DataProps = { zoom: { min: number, max: number }, urlTemplate: string, errorTileUrl: string, zoomSnap: number }

</script>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { MapType } from '../../lib/mapType';
const maptype = ref<MapType>('gaode')
const emit = defineEmits(['change'])


</script>
<template>
    <q-list>
        <q-item>
            <q-btn-group push>
                <q-btn-toggle v-model="maptype" toggle-color="primary" :options="[
                    { label: '百度', value: 'baidu' },
                    { label: '高德', value: 'gaode' },
                    { label: '高德在线', value: 'gaodeLine' }
                ]" />
            </q-btn-group>
        </q-item>
        <q-item clickable v-close-popup>
            <q-item-section>
                <q-item-label>缩放控制</q-item-label>
                <!-- <q-item-label caption>
                    <q-range :model-value="{ max: data.maxZoom, min: data.minZoom }"
                        @update:model-value="({ max, min }) => { data.maxZoom = max; data.minZoom = min; }" :min="3"
                        :max="19" color="deep-orange" label-always markers switch-label-side />
                </q-item-label> -->
                <!-- TODO 控制多图层 ?? 缩放级别减少 直接控制路线等 -->
                <!-- TODO 地图不清楚 -->
            </q-item-section>
        </q-item>
        <q-item>
            <q-item-section>
                <q-item-label>访问地址</q-item-label>
                <q-item-label caption>
                    <!-- <q-input v-model="data.urlTemplate" /> -->
                </q-item-label>
            </q-item-section>
        </q-item>
        <q-item>
            <q-item-section>
                <q-item-label>失败图片</q-item-label>
                <q-item-label caption>
                    <!-- <q-input v-model="data.errorTileUrl" /> -->
                </q-item-label>
            </q-item-section>
        </q-item>
        <q-item>
            <q-item-section>
                <q-item-label>缩放倍数</q-item-label>
                <q-item-label caption>
                    <!-- <q-input v-model.number="data.zoomSnap" type="number" /> -->
                </q-item-label>
            </q-item-section>
        </q-item>

    </q-list>
</template>