import Taro, { Component } from '@tarojs/taro'
import { View, Map } from '@tarojs/components'

import { AtNoticebar, AtFloatLayout  } from 'taro-ui'

import './vr.scss'
import { arrToObj } from '@utils'

class Index extends Component {
  onShareAppMessage() {
    return {
      title: `南昌楼盘航拍VR，楼栋外观、周边环境一目了然`,
      path: `/pagesOther/map/vr`,
    }
  }
  onShareTimeline () {
    return {
      title: `南昌楼盘航拍VR，楼栋外观、周边环境一目了然`,
      path: `/pagesOther/map/vr`,
    }
  }

  constructor (props) {
    super(props)
    this.state = {
      isPopupShow: false,
      curObj: {},
      estateList: [],
      allDataArr: [],
    }
  }

  config = {
    navigationBarTitleText: '楼盘航拍',
  }

  componentWillUnmount () {
  }

  componentWillMount () {
    Taro.$AHU(this)
    this.getData()
  }

  getData () {
    Taro.api.other.apivrestateall().then(res => {
      let estateList = res.map((item, index) => {
        return ({
          id: index + 20000,
          longitude: item.longitude,
          latitude: item.latitude,
          iconPath: 'https://icon.honglouplus.com/icon_1px.png',
          // iconPath: item.vr_image,
          width: 0,
          height: 0,
          zIndex: 9,
          callout: {
            content: `${item.estate_name}`,
            color: '#fff',
            bgColor: '#369af7',
            display: 'ALWAYS',
            padding: '6px 10px',
            textAlign: 'center',
            borderRadius: '10',
          }
        })
      })
      this.setState({
        allDataArr: res,
        estateList
      })
    })
  }



  componentDidShow () { }

  componentDidHide () { }

  calloutTap (e) {
    const { markerId } = e.detail
    if (markerId > 9999) {
      // Taro.showLoading({
      //   mask: true,
      //   title: '正在跳转~'
      // })
      // setTimeout(() => {
      //   Taro.hideLoading()
      // }, 3000)
      if (markerId > 19999 && markerId < 30000) { // 楼盘
        const { allDataArr } = this.state
        const curItem = allDataArr[markerId - 20000]
        this.setState({
          curObj: curItem
        }, () => {
          this.openPopup()
        })
        // console.log(curItem)
        // Taro.navigateTo({url: `/pagesHouse/vr?id=${curItem.vr_key}&estateName=${curItem.estate_name}`})
      }
    }
  }
  markerTap (e) {}









  renderShare () {
    const iconShare = require('@img/images/icon_g_share6.png')
    return (
      <Button className="g-icon-share btn-to-div" openType="share">
        <Image className="img" src={iconShare} />
      </Button>
    )
  }





  renderHeader () {
    return (
      <View className="scoped-header">
        <AtNoticebar>
          点击楼盘查看航拍VR，楼栋外观、周边环境一目了然
        </AtNoticebar>
      </View>
    )
  }

  renderSign () {
    const img = require('@img/sigin_sy.png')
    return (
      <View className="scoped-sign">
        <View className="bg"></View>
        <Image className="img" src={img} />
      </View>
    )
  }
  renderSign2 () {
    const img = require('@img/sigin_sy.png')
    return (
      <View className="scoped-sign2">
        <Image className="img" src={img} />
      </View>
    )
  }




  closePopup () {
    this.setState({
      isPopupShow: false
    })
  }
  openPopup () {
    this.setState({
      isPopupShow: true
    })
  }
  linkVr () {
    const { curObj } = this.state
    Taro.navigateTo({url: `/pagesHouse/vr?id=${curObj.vr_key}&estateName=${curObj.estate_name}`})
  }


  render () {
    let { estateList, isPopupShow, curObj } = this.state
    const hpI1 = require('@img/icon_hp_1.png')
    const hpI2 = require('@img/icon_hp_2.gif')
    return (
      <View className="l-box">
        {this.renderHeader()}
        <Map
          enable-satellite="true"
          longitude='115.851699'
          latitude='28.644161' 
          enable-poi={false}
          scale='14'
          markers={estateList}
          min-scale="11"
          max-scale="20"
          subkey="Y7PBZ-FPZRP-4DXDL-VXQ3B-7DFL7-UXBK4"
          onCalloutTap={this.calloutTap.bind(this)}
          className="scoped-map"/>
        {this.renderShare()}
        {/* {this.renderSign()}
        {this.renderSign2()} */}
        <AtFloatLayout isOpened={isPopupShow} title={curObj.estate_name} onClose={this.closePopup.bind(this)}>
          <View className="scoped-vr-img" onClick={this.linkVr.bind(this)} >
            <View className="icon">
              <Image src={hpI1} className="i i1" />
              <Image src={hpI2} className="i i2" />
            </View>
            <Image src={curObj.vr_image} className="img" mode="aspectFit"/>
          </View>
        </AtFloatLayout>
      </View>
    )
  }
}

export default Index