<template>
  <view class="content">
    <tencent-map class="map" ref="mapRef" :longitude="longitude" :latitude="latitude" :scale="scale"
      :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" />
    <scroll-view class="scrollview" scroll-y="true">
      <input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" type="number" @confirm="onScaleChange"></input-data>
      <button @click="getScale" style="margin:10px 0">获取缩放级别</button>
      <boolean-data :default-value="enableSatellite" title="卫星图" @change="onEnableSatelliteChange"></boolean-data>
      <boolean-data :default-value="enableTraffic" title="实时路况" @change="onEnableTrafficChange"></boolean-data>
    </scroll-view>
  </view>
</template>

<script setup lang="uts">
  const mapRef = ref<TencentMapComponentPublicInstance | null>(null)
  const longitude = ref(116.39742)
  const latitude = ref(39.909)

  const scale = ref(13)
  const enableSatellite = ref(false)
  const enableTraffic = ref(false)
  const onScaleChange = (value : number) => {
    scale.value = value
  }
  const onEnableSatelliteChange = (checked : boolean) => {
    enableSatellite.value = checked
  }
  const onEnableTrafficChange = (checked : boolean) => {
    enableTraffic.value = checked
  }

  function getScale() {
    uni.showModal({
      content: 'scale:' + mapRef.value?.getScale(),
      showCancel: false
    })
  }
</script>

<style>
  .content {
    flex: 1;
  }

  .map {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
  }

  .scrollview {
    flex: 1;
    padding: 10px;
  }

  .button {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>
