import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import './style.scss'

const posIcon = require('@assets/icons/amap/position.png')

export default function Pannel(props) {
  const { data = [], manualData = [] } = props.dataset || {}
  const activeKey = props.active

  return (
    <View className="around-pannel">
      {
        data.map((item, index) => {
          const { id, name, distance } = item || {}
          const dist = distance >= 1000 ? `${Number(distance / 1000).toFixed(1)}km` : `${distance}m`
          const active = activeKey === id

          return (
            <View className={`around-cell ${active ? 'active' : ''}`} key={`auto-${id}`}>
              <View className="around-cell__body">{`${index + 1}、${name}`}</View>
              <View className="around-cell__action">
                <Image className="icon" src={posIcon} />
                {dist}
              </View>
            </View>
          )
        })
      }
      {
        manualData.length && (
          <View className="around-cell-title">其他</View>
        )
      }
      {
        manualData.map((item, index) => {
          return (
            <View className="around-cell" key={`manual-${index}`}>
              <View className="around-cell__body">{`${index + 1}、${item}`}</View>
            </View>
          )
        })
      }
    </View>
  )
}
