import { View, Map } from '@tarojs/components'
import style from './index.module.less'
import locationImg from "@/images/location.png";
import Taro from '@tarojs/taro';
import { useState } from 'react';
interface Props {
  children?: React.ReactChild |  React.ReactChild[];
  longitude: number
  latitude: number 
  enableZoom?: boolean
  name?: string
  address?: string
  enableScroll?: boolean
}



const Index: React.FC<Props> = ({children, latitude, longitude, name = '', address = '', enableZoom = false, enableScroll = false }) => {
  const onError = (e)=> {
    console.log(e)
  }
   // 标记点配置
   const markers = [
    {
      id: 1, // 必须唯一
      latitude: latitude,  // 纬度
      longitude: longitude, // 经度
      iconPath: locationImg, // 本地图标路径
      width: 30,  // 图标宽度（像素）
      height: 30, // 图标高度
      title: name, // 点击时显示的标题
      callout: {
        content: name,
        color: '#333',
        fontSize: 14,
        borderRadius: 8,
        bgColor: '#fff',
        padding: 8,
        display: 'ALWAYS', // 让 callout 始终显示
      }
    }
  ]

  return (
    <View className='flex flex-col gap-16 px-16'>
      <View className={`flex items-center gap-8`}>
        <View className="component-icon-address"></View>
        <View className='flex-1 truncate'>
          {children}
        </View>
      </View>
      <View className='rounded-10 overflow-clip relative'>
        <Map
            onError={onError}
            longitude={longitude}
            latitude={latitude}
            markers={markers}
            enableZoom={enableZoom}
            enableScroll={enableScroll}

            style={{width: '100%', height: '300px'}}
            scale={14} />
        <View className={style.goButton}></View>
      </View>
    </View>    
  )
}

export default Index
