import Taro, { Component } from '@tarojs/taro'
// import { View } from '@tarojs/components'
import './index.scss'
export default class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isAnimate: false,
      ltArr: [
        {text: '洪楼Plus'},
        {text: '南昌楼市'},
        {text: '楼盘测评'},
        {text: '学区资讯'},
      ],
    }
  }

  componentDidMount () {
    let that = this
    setInterval(() => {
      const { ltArr } = that.state
      let newArr = [...ltArr]
      that.setState({
        isAnimate: true
      })
      setTimeout(() => {
        newArr.push(ltArr[0])
        newArr.shift()
        that.setState({
          ltArr: [...newArr],
          isAnimate: false
        })
      }, 1000)
    }, 3000)
  }

  posHandle () {
    Taro.getLocation({
      type: 'wgs84',
      success: function (res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const key = '5WFBZ-LCZ3J-D5AFM-KNUUL-BTT46-45BWB'
        const referer = '洪楼Plus'
        const location = JSON.stringify({
          latitude: latitude,
          longitude: longitude
        })
        const category = '地铁公交,医院,购物美食'
        Taro.navigateTo({
          url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
        })
      }
    })
  }

  render () {
    const searchImg = require('@img/images/icon_g_search.png')
    const iconPos = require('@img/images/top_map.png')
    const iconPos2 = require('@img/images/top_map2.png')
    const { isAnimate, ltArr } = this.state
    const { type } = this.props
    return (
      <View className={type === 'home' ? 'l-search-show t2' : 'l-search-show'}>
        <View className="it-input">
          <Navigator url={'/pagesHouse/search'} className="l-search-box">
            <Image src={searchImg} className="lsb-icon" />
            <View className="lsb-main">
              <View className="l-loop-text">
                <View className={isAnimate ? 'llt-ul loop' : 'llt-ul'}>
                  {
                    ltArr.map((lt,ltIndex) =>{
                      return (
                        <View key={ltIndex} className="llt-li">{lt.text}</View>
                      )
                    })
                  }
                </View>
              </View>
            </View>
          </Navigator>
        </View>
        <View className="it-map" onClick={this.posHandle.bind(this)}>
          <Image src={type === 'home' ? iconPos2 : iconPos} className="icon" />
          <View className="t">地图</View>
        </View>
      </View>
    )
  }
}