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

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

export default class Pannel extends Component {

  // 记录滚动位置
  scrollPos = {}

  state = {
    markerList: [],
    currentMarker: undefined,   // 仅用于数据比较, 渲染不依靠这个
    currentMarkerPos: undefined,
  }

  componentDidMount() {
    // setTimeout(() => {
    //   // 记录滚动位置
    //   Taro.createSelectorQuery().in(this.$scope).selectAll('.around-cell').fields({ id: true, rect: true }, (res) => {
    //     console.log('--------', res)
    //     // this.scrollPos[res.id] = res.scrollTop
    //   }).exec()

    // }, 0)
  }

  componentWillMount() {
    this.initData(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.initData(nextProps)
  }

  initData = (props) => {
    const { data = [] } = props.dataset || {}
    const markerList = data
    let activeIndex = -1
    let currentMarkerPos = undefined

    if (props.active !== undefined && props.active != (this.state.currentMarker || {}).id) {
      for (let i = 0; i < markerList.length; i++) {
        if (markerList[i].id === props.active) {
          activeIndex = i;
          break;
        }
      }

      if (activeIndex !== -1) {
        currentMarkerPos = activeIndex * 35 + 20 // 每个 around-cell 的高度是 35, 20 是 调节值
      } else {
        currentMarkerPos = 0
      }
    } else {
      currentMarkerPos = 0
    }

    // console.log('-------markerList---------', markerList)

    this.setState({ currentMarkerPos, markerList })
  }

  setCurrent = (marker) => () => {
    this.setState({
      currentMarkerPos: undefined,
      currentMarker: marker,
    }, () => this.props.onChange(marker))
  }

  bindScroll = (e) => {
    console.log(e)
  }

  render() {
    const { manualData = [] } = this.props.dataset || {}
    const activeKey = this.props.active

    return (
      // <ScrollView scrollY style={fixdHeight} scrollTop={this.state.currentMarkerPos} onScroll={this.bindScroll}>
      <View className="around-pannel">
        {
          this.state.markerList.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}`} id={id} onClick={this.setCurrent(item)}>
                <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>
      // </ScrollView>
    )
  }
}
