import Taro, { Component } from '@tarojs/taro';
import './index.scss'

import { connect } from '@tarojs/redux'
import ListView from '@components/ListView'
import { dispatchProjectDetail } from '@actions/project'
import { getItemList } from '@services/item'
import ProjectItem from '../item'
import { View, Image, Button } from '@tarojs/components';
@connect(
  ({ user, card, project, city }) => ({ ...user, ...card, ...project, ...city }),
  { dispatchProjectDetail }
)
export default class Index extends Component {
  config = {
    navigationBarTitleText: '地图看房'
  }

  state = {
    list: [],
    latitude: null,
    longitude: null,
    points: null,
    markers: [],
    isProject: 'none',
    isShow:'none',
    coordinate: null,
    buildingName: null,
    address: null,
    navTop:'60%',
  }
  componentWillMount() {
    const marker = [];
    const points = [];
    this.loadList(1).then(res => {
      this.setState({
        list: res.records
      }, () => {
        const { list } = this.state
        list.forEach(function (val, index) {
          if (!val.coordinate || val.coordinate.indexOf(',') === -1) return

          let coord = val.coordinate.split(',')
          let latitude = parseFloat(coord[0])
          let longitude = parseFloat(coord[1])
          points.push({
            latitude: latitude,
            longitude: longitude,
          })
          marker.push({
            iconPath: require('@assets/dingwei.png'),
            id: val.buildingId,
            latitude: latitude,
            longitude: longitude,
            width: 33,
            height: 33,
            callout: {
              content: val.buildingName,
              color: '#000',
              borderColor: '#FF4740',
              borderWidth: 1,
              borderRadius: 12,
              bgColor: '#fff',
              padding: 7,
              display: 'ALWAYS'
            }
          })
        })
        this.setState({
          markers: marker,
          points: points
        }, () => {
          console.log(this.state.markers)
        })
      })
    });
  }
  loadList(pageNumber) {
    const that = this;
    const { curCity } = this.props
    const { filterOpt } = this.state
    const payload = Object.assign({ pageSize: 10, pageNumber }, filterOpt)
    if (curCity.id) {
      payload.cityId = curCity.id
      that.setState({
        latitude: curCity.lat,
        longitude: curCity.lng
      })
    }
    return getItemList(payload)
  }
  onViewDetail(item) {
    Taro.navigateTo({
      url: `/pages/project/detail/index?id=${item.buildingId}`
    })
  }
  showProject(e) {
    let _this = this;
    console.log('e:' + e)
    const { markerId } = e;
    const { list } = this.state
    list.forEach(function (val, index) {
      if (val.buildingId == markerId) {
        _this.setState({
          projectDetail: val,
          isProject: 'block',
          isShow:'block',
          coordinate: val.coordinate,
          buildingName: val.buildingName,
          address: val.address,
          navTop:'40%'
        })
      }
    })
  }
  toHome() {
    Taro.switchTab({
      url: `/pages/project/index`
    })
  }
  openMap() {
    const {
      buildingName, address, coordinate } = this.state
    const coord = coordinate.split(',')
    const latitude = parseFloat(coord[0])
    const longitude = parseFloat(coord[1])
    Taro.openLocation({
      latitude,
      longitude,
      name: buildingName,
      address,
      scale: 18
    })
  }
  // onShareAppMessage = () => {
  //   const {userInfo: { person: { personId } } } = this.props
  //   const { projectDetail: { buildingName, buildingId, poster } }   = this.state
  //   return {
  //     title: `${buildingName}欢迎您`,//分享内容
  //     path: `/pages/project/detail/index?id=${buildingId}&from=share&recommender=${personId}`,//分享地址
  //     imageUrl: poster
  //   }
  // }
  render() {
    const { markers, latitude, longitude, points, projectDetail, isProject,isShow,navTop } = this.state
    return (
      <View className='page'>
        <Map
          id="myMap"
          style="width: 100%; height: 100%;"
          latitude={latitude}
          longitude={longitude}
          markers={markers}
          show-location
          include-points={points}
          onCallouttap={this.showProject.bind(this)}
        >
        </Map>
        <View className="location">
          <Text className="location-icon iconfont icon-daohangdizhi"></Text>
          <Text className="location-text">{curCity.id ? curCity.name : '正在定位'}</Text>
        </View>
        <View className='btn-nav' style={{top:navTop}}>
          <Button className='btn gotobtn'  onClick={this.openMap}  style={{ display: isShow }}>
            <Image src={require('@assets/qianw.png')} className='btn-img'  mode='widthFix'></Image>
            <Text>前往</Text>
          </Button>
          <Button className='btn gotobtn' style={{ display: isShow }} open-type = 'share'>
            <Image src={require('@assets/zhuan.png')} className='btn-img'  mode='widthFix'></Image>
            <Text>转发</Text>
          </Button>
          <Button className='btn gotobtn' onClick={this.toHome} mode='widthFix'>
            <Image src={require('@assets/home.png')} className='btn-img'></Image>
            <Text>首页</Text>
          </Button>
        </View>
        <View className='project-info' style={{ display: isProject }}>
          {
            <ProjectItem
              data={projectDetail}
              onClick={this.onViewDetail.bind(this)}
            />
          }
        </View>
      </View >
    );
  }
}