import Taro, { Component } from '@tarojs/taro';
import { View, Video, SwiperItem, Swiper } from '@tarojs/components'
import './index.scss'
import Banner from '../banner'
import HelpGroupBanner from '../swiper'
import Poster from './poster'
import Around from './Around/around'
import BackHomeBtn from '@/components/BackHomeBtn'
import AchievePhone from '@/components/achievePhone'
import AchieveAvatar from '@/components/achieveAvatar'
import {
  addItemUv,
  // addItemShareNum,
  favorProject,
  cancelFavorProject,
  queryLiveList
} from '@/services/item'
import { getMiniQrcode, savePoint, updatePoint } from '@/services/common'
import { queryNewsList, queryHelpGroup } from '@/services/news'
import { queryActivityList } from '@/services/activity'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 按需加载
import ready from '@/utils/ready'
import Notice from '@/components/Notice'
import { getDownloadURL, transferImage, sceneInShare } from '@/utils/tools'
import { getQrCodeParams } from '@/utils/qrcode'
import { connect } from '@tarojs/redux'
import { dispatchProjectDetail } from '@/actions/project'
import getUserPhone from '@/utils/getUserPhone'
import { ROLE_CODE } from '@/constants/user'
import { getCardDetail } from '@/services/card'
import Consultant from '@/components/consultant'
import { report as reportCustomer } from '@/utils/customer'
import * as noticeType from '@/constants/common.js'
import { withDetail } from '@/utils/page'
import { share as shareSavePoint } from '@/utils/shareSavePoint'

const buildBg = 'https://njcj.oss-cn-shanghai.aliyuncs.com/miniapp/images/buildbg.png'
const dotImg = require('@/assets/dot.png')
const vrLogo = require('@/assets/vr.png');

@connect(
  ({ user, project }) => ({ ...user, ...project }),
  { dispatchProjectDetail }
)
@withDetail({
  track: {
    event: 'detail',
    eventType: 'building',
    propertyName: '项目详情',
    data: '{}',
  }
})
export default class Index extends Component {
  config = {
    navigationBarTitleText: '项目详情',
  }

  state = {
    buildingId: null,
    isSaved: false,
    loaded: false,
    posterStatus: false,
    buildingProjectType: [],
    posterData: {},
    newsList: [],
    activityList: [],
    helpList: [],
    groupList: [],
    liveList: [],
    statusOpts: ['待售', '售罄', '在售'],
    statusBgColors: ['#BB9C79', '#CECECE', '#F6B61D'],
    // circumOpts: [],
    curTab: 'Transport',
    recordId: null,
    posterShow: 'none',
    current: 1,
    btnstate: 0,// 1显示视频 0显示图片 2显示全景
    albumCurrent: 0,
    videoPlayShow: 'flex',
    consultData: {}, // 分享的置业顾问信息
    consultShow: false,  // 置业顾问悬浮框显示隐藏
    reportedCustomer: false,
    qrcodeParams: '',
    grantPhoneVisible: false, // 授权电话
    grantAvatarVisible: false, // 授权头像
    maskVisible: false,
    extendContent: [],
    queryInfo: {}
  }

  componentWillPreload(params) {
    console.log('-------trackkkkkk----->', this, params)
  }

  componentWillMount() {
    console.log('-------trac2222----->', this)
    ready.queue(() => {
      // 分享场景需要先授权手机, 再授权头像
      if (this.toggleGrantPhone()) {
        this.toggleGrantAvatar()
      }

      this.loadData()

      // const id = this.$router.params.id

      // // 没有找到 id , 再重新找一次
      // if (this.$router.params.scene) {
      //   getQrCodeParams(this.$router.params.scene).then(res => {
      //     console.log(res, "扫码参数")
      //     this.setState({
      //       qrcodeParams: res
      //     })
      //     this.initPageData(res.id)
      //   }).catch(err => {
      //     Taro.showToast({
      //       title: '没有找到项目',
      //       icon: 'none'
      //     })
      //   })
      // } else {
      //   console.log('有项目id,不请求扫码参数接口')
      //   this.initPageData(id)
      // }
    })
  }
  componentDidShow() {
    console.log('3366633', this.$router.params)

    const fromCard = !!wx.getStorageSync('from-card')

    if (fromCard) {
      this.loadData()
    }
  }

  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)

  }

  // componentWillReceiveProps() {
  //   this.reportClientFn()
  // }

  // 报备客户
  // reportClientFn() {
  //   const { qrcodeParams } = this.state
  //   const consultant = this.$router.params.consultant || qrcodeParams.consultant || ""
  //   const { userInfo: { person } } = this.props

  //   if (!this.state.reportedCustomer) {
  //     reportCustomer(person, consultant).then(() => {
  //       this.setState({ reportedCustomer: true })
  //     })
  //   }
  // }

  loadData() {
    const id = this.$router.params.id

    // 没有找到 id , 再重新找一次
    if (this.$router.params.scene) {
      getQrCodeParams(this.$router.params.scene).then(res => {
        console.log(res, "扫码参数")
        this.setState({
          qrcodeParams: res,
          queryInfo: {
            channelId: res.channelId || '',
            qrCodeId: res.qrCodeId || '',
            scene: this.$router.params.scene,
          }
        })
        this.initPageData(res.id)
      }).catch(err => {
        Taro.showToast({
          title: '没有找到项目',
          icon: 'none'
        })
      })
    } else {
      console.log('有项目id,不请求扫码参数接口')
      this.initPageData(id)
    }

    wx.removeStorageSync('from-card')
  }

  currentPageAndParams() {
    const {
      projectDetail: { buildingId },
      userInfo: { person: { personId, personType, userId } }
    } = this.props
    const sceneParams = this._$_scene || {}
    const consultant1 = this.$router.params.consultant || sceneParams.consultant || Taro.getStorageSync('consultantId') || ''
    const consultantId1 = this.$router.params.consultantId || sceneParams.consultantId || ''
    const consultant = personType == ROLE_CODE['CONSULTANT'] ? personId : consultant1
    const consultantId = personType == ROLE_CODE['CONSULTANT'] ? userId : consultantId1
    const queryParams = [
      `id=${buildingId}`,
      'from=building_share',
      `recommender=${personId}`,
      `consultant=${consultant}`,
      `consultantId=${consultantId}`,
    ]

    return [
      'pages/project/detail/index',
      queryParams.join('&'),
    ]
  }

  onShareAppMessage = () => {
    const {
      projectDetail: { shareContents, buildingName, buildingId, poster = '' },
      userInfo: { person: { personId, personType, userId } }
    } = this.props
    const sceneParams = this._$_scene || {}
    const consultantId1 = this.$router.params.consultantId || sceneParams.consultantId || ''
    const consultantId = personType == ROLE_CODE['CONSULTANT'] ? userId : consultantId1
    // 分享埋点
    shareSavePoint({
      event: 'share',
      eventType: 'building',
      propertyName: '项目详情分享',
      consultantId: consultantId,
      sharePersonId: personId,
      targetId: buildingId,
      buildingId: buildingId || '',
      data: '{}'
    }, 'project')

    const [page, params] = this.currentPageAndParams()

    const shareData = shareContents && shareContents.length ? shareContents[0] : { shareContentTitle: buildingName, shareContentImg: poster }
    console.log(`/${page}?${params}`, "`/${page}?${params}`")
    return {
      title: shareData.shareContentTitle,//分享内容
      path: `/${page}?${params}`,//分享地址
      imageUrl: shareData.shareContentImg
    }
  }

  initPageData(id) {
    console.log('----项目ID---->', id)
    this.setState({
      buildingId: id
    }, () => {
      this.loadDetail()
      this.loadNewsData()
      // this.loadActivityData()
      this.loadHelpGroupList()

      addItemUv(id)
      const { sceneParams = {} } = this.state
      // 埋点
      const consultant = this.$router.params.consultant || sceneParams.consultant || Taro.getStorageSync('consultantId') || ''
      // const consultant = this.$router.params.consultant || qrcodeParams.consultant
      // const consultantId = this.$router.params.consultantId ||  qrcodeParams.consultantId || ""
      // const recommender = this.$router.params.recommender || qrcodeParams.recommender || ""
      // savePoint({
      //   event: 'detail',
      //   eventType: 'building',
      //   propertyName: '项目详情',
      //   targetId: id,
      //   buildingId: id,
      //   consultantId: consultantId,
      //   sharePersonId: recommender,
      //   data: '{}'
      // }).then(res => {
      //   this.setState({
      //     recordId: res.recordId
      //   })
      //   console.log('项目详情')
      // })
      const { userInfo: { person: { personId } } } = this.props
      const notSelf = personId != consultant
      if (notSelf && consultant) {
        getCardDetail(consultant).then(res => {
          this.setState({
            consultData: res,
            consultShow: true
          })
        })
      }

      // this.reportClientFn()
    })
  }

  _$_track() {
    const sceneParams = this._$_scene || {}
    const id = this.$router.params.id || sceneParams.id
    const consultantId = this.$router.params.consultantId || sceneParams.consultantId
    const recommender = this.$router.params.recommender || sceneParams.recommender
    const { queryInfo } = this.state

    return {
      targetId: id,
      buildingId: id,
      consultantId,
      sharePersonId: recommender,
      ...queryInfo
    }
  }


  loadHelpGroupList() {
    const { buildingId } = this.state
    queryLiveList({ buildingId }).then(res => {
      this.setState({
        liveList: res.records || []
      })
    })

    queryHelpGroup({ buildingId: buildingId }).then(res => {
      console.log(res, "buildingId")
      const helpList = []
      const groupList = []
      const activityList = []
      res.map(item => {
        if (item.type == 'help') {
          helpList.push(item)
        } else if (item.type == 'group') {
          groupList.push(item)
        } else {
          activityList.push(item)
        }
      })
      this.setState({
        helpList,
        groupList,
        activityList
      })
    })
  }

  loadDetail() {
    const sceneParams = this._$_scene || {}
    const buildingId = this.state.buildingId || this.$router.params.id || sceneParams.id
    const { dispatchProjectDetail } = this.props
    const { queryInfo } = this.state
    const consultant = this.$router.params.consultant || sceneParams.consultant || Taro.getStorageSync('consultantId') || ''
    const recommender = this.$router.params.recommender || sceneParams.recommender || Taro.getStorageSync('recommender') || ''
    this.setState({
      loaded: false,
    })
    Taro.showToast({
      title: '正在加载数据',
      icon: 'loading'
    })
    console.log('项目详情项目详情项目详情项目详情项目详情项目详情项目详情')
    dispatchProjectDetail(buildingId, queryInfo, { header: { ['x-consultant']: consultant, ['x-recommender']: recommender } }).then(res => {
      const connectId = (res.extendContent || [])[0] ? (res.extendContent || [])[0].contentId : null
      const extendContentList = Taro.getStorageSync('extendContent') || []
      const maskVisible = extendContentList.length ? (res.extendContent || []).length && extendContentList.indexOf(connectId) == -1 : (res.extendContent || []).length
      // debugger
      this.setState({
        loaded: true,
        maskVisible: maskVisible,
        extendContent: (res.extendContent || [])[0],
        // circumOpts: newCircumOpts,
        isSaved: res.isSave
      }, () => {
        if (res.posters && res.posters.length) {
          this.setState({
            posterShow: 'flex'
          })
        }
        if (connectId && extendContentList.indexOf(connectId) == -1) {
          extendContentList.push(connectId)
          Taro.setStorageSync('extendContent', extendContentList);
        }

        this._$_dataReady()
      })

      Taro.hideToast()
    })
  }

  // loadActivityData() {
  //   const { buildingId } = this.state
  //   const payload = { pageSize: 999, pageNumber: 1, buildingId }
  //   queryActivityList(payload).then(res => {
  //     console.log(res, 'Activity')
  //     this.setState({
  //       activityList: res.list || []
  //     })
  //   })
  // }

  loadNewsData() {
    const { buildingId } = this.state
    const payload = { pageSize: 2, pageNumber: 1, buildingId }
    queryNewsList(payload).then(res => {
      this.setState({
        newsList: res.records || []
      })
    })
  }

  navigateTo(url) {
    Taro.navigateTo({ url: url })
  }

  // 查看大图
  previewImage(arr) {
    // console.log('arr:' + arr)
    if (arr[0].length > 1) {
      Taro.previewImage({
        current: arr,
        urls: arr
      })
    } else {
      var previewArr = [];
      for (var i = 0; i < arr.length; i++) {
        previewArr.push(arr[i].url);
      }
      Taro.previewImage({
        current: previewArr,
        urls: previewArr
      })
    }
    savePoint({
      event: 'apartment',
      eventType: 'building',
      propertyName: '查看户型',
      data: '{}'
    }).then(res => {
      console.log('查看户型')
    })
  }

  openMap() {
    const {
      buildingName,
      address,
      coordinate = ''
    } = this.props.projectDetail

    const coord = coordinate.split(',')
    const latitude = parseFloat(coord[0])
    const longitude = parseFloat(coord[1])
    Taro.openLocation({
      latitude,
      longitude,
      name: buildingName,
      address,
      scale: 18
    })
    savePoint({
      event: 'navigation',
      eventType: 'building',
      propertyName: '查看项目地图',
      data: '{}'
    }).then(res => {
      console.log('查看项目地图')
    })
  }

  toViewAlbum(index) {
    const { buildingId } = this.state
    console.log('1111111', index)
    this.navigateTo(`/pages/project/album/index?id=${buildingId}&current=${index}`)
  }

  onViewFans() {
    const { buildingId } = this.state
    this.navigateTo('/pages/card/fans/index?type=item&id=' + buildingId)
  }

  getPhoneNumber(e, item) {
    getUserPhone(e, (phoneNumber) => {
      const { userInfo: { person: { personId, nickname, name } } } = this.props
      const { userInfo: { miniApp: { tpls } } } = this.props
      const tplId = (tpls.filter(x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true)[0] || {}).tplId

      wx.requestSubscribeMessage({
        tmplIds: [tplId],
        success(res) {

        },
        fail(res) {

        },
        complete() {
          // App.zhuge.track('查看置业顾问列表')
          Taro.navigateTo({
            url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(name || nickname)}&receiverId=${item.id}&receiverName=${encodeURIComponent(item.userName)}`
          })
        }
      })

    })
  }

  getPosterData() {
    return new Promise(resolve => {
      const { posterData } = this.state
      if (posterData.qrcode) {
        resolve(posterData)
        return
      }
      const {
        userInfo: { person: { avatarurl, nickname, personId, personType, userId }, miniApp },
        projectDetail: { posters, buildingId, poster, price, buildingRestaurant, createDate, buildingName, tel, buildingTag, uvList = {} }
      } = this.props
      const { total = 0 } = uvList

      const [page, scene] = this.currentPageAndParams();
      const payload = { page, scene }

      const _avatarurl = getDownloadURL(avatarurl, 'avatar');

      getMiniQrcode(payload).then(qrcode => {
        let data = {
          tel,
          qrcode,//小程序二维码
          nickname,//访问者名字
          avatarurl: _avatarurl,//访问者头像
          poster: posters[0].posterImg,
          price: price,
          posterDescription: posters[0].posterDescription,
          buildingName: posters[0].posterTitle,//标题
          createDate: createDate,//时间
          buildingTag: buildingTag,//标签,
          total: total, //围观人数
          miniAppName: miniApp.name,
        }
        resolve(data)
      })
    })
  }

  // 开始生成海报
  togglePosterStatus = (flag) => {
    console.log(flag, "flag")
    if (flag) {
      // App.zhuge.track('生成海报')

      this.getPosterData().then(posterData => {
        const { poster, qrcode } = posterData || {}
        if (!poster || !qrcode) {
          Taro.showToast({
            title: '没有海报背景或二维码',
            icon: 'none'
          })
          return
        }

        this.setState({
          posterStatus: !!flag,
          posterData
        })
      })

    } else {
      this.setState({
        posterStatus: !!flag
      })
    }
    // 分享埋点
    const { projectDetail: { buildingId } } = this.props
    shareSavePoint({
      event: 'poster',
      eventType: 'building',
      propertyName: '生成项目详情海报',
      data: '{}',
      targetId: buildingId,
      buildingId: buildingId || '',
    }, 'project')

    // addItemShareNum(buildingId)
    // savePoint({
    //   event: 'poster',
    //   eventType: 'building',
    //   propertyName: '生成项目详情海报',
    //   data: '{}'
    // }).then(res => {
    //   console.log('生成项目详情海报')
    // })
  }

  callPhone = () => {
    const { qrcodeParams } = this.state
    const consultant = this.$router.params.consultant || qrcodeParams.consultant
    if (consultant) {
      this.handleTelClick(this.state.consultData)
    } else {
      const { tel } = this.props.projectDetail
      if (tel) {
        Taro.makePhoneCall({
          phoneNumber: tel
        })
        savePoint({
          event: 'phone',
          eventType: 'building',
          propertyName: '拨打电话',
          data: '{}'
        }).then(res => {
          console.log('拨打电话')
        })
      } else {
        Taro.showToast({
          title: '暂无联系电话',
          icon: 'none'
        })
      }
    }
  }

  handleTelClick(item, e) {
    // e.stopPropagation()
    Taro.makePhoneCall({
      phoneNumber: item.phone || item.tel
    })
    savePoint({
      event: 'phone',
      eventType: 'building',
      propertyName: '拨打电话',
      data: '{}'
    }).then(res => {
      console.log('拨打电话')
    })
  }

  handleChatClick(item, e) {
    // e.stopPropagation()
    const { userInfo: { person: { personId, nickname, name } } } = this.props
    const { userInfo: { miniApp: { tpls } } } = this.props
    const tplId = (tpls.filter(x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true)[0] || {}).tplId
    wx.requestSubscribeMessage({
      tmplIds: [tplId],
      success(res) {

      },
      fail(res) {

      },
      complete() {
        Taro.navigateTo({
          url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(name || nickname)}&receiverId=${item.id}&receiverName=${encodeURIComponent(item.userName || item.name)}`
        })
        savePoint({
          event: 'communicate',
          eventType: 'building',
          propertyName: '在线沟通',
          data: '{}'
        }).then(res => {
          console.log('在线沟通')
        })
      }
    })

  }

  handleConsuItemClick(item) {
    Taro.navigateTo({
      url: `/pages/card/index?id=${item.id}`
    })
  }

  handleMoreClick() {

    Taro.navigateTo({
      url: `/pages/card/list/index?buildingId=${this.state.buildingId}`
    })
  }
  ChatOnlineClick() {
    const { qrcodeParams } = this.state
    const consultant = this.$router.params.consultant || qrcodeParams.consultant
    if (consultant) {
      this.handleChatClick(this.state.consultData)
    } else {
      this.handleMoreClick()
    }
  }

  handleStopPropagation(e) {
    e.stopPropagation()
  }

  toRecomonedPage() {
    // const {
    //   userInfo: { person: { personType } }
    // } = this.props
    // if (personType === ROLE_CODE['DRIFT']) {
    //   // 游客或者客户 区别是否有电话|| personType === ROLE_CODE['CUSTOMER']
    //   Taro.navigateTo({
    //     url: `/pages/agent/become/index`
    //   })
    // } else {
    Taro.navigateTo({
      url: `/useless/pages/agent/recommend/index?type=projectDeatil`
    })
    // }
  }

  toHome() {
    Taro.switchTab({
      url: `/pages/project/index`
    })
  }

  HandleCircumTabClick(id) {
    this.setState({
      curTab: id
    })
  }

  handleNewsMoreClick() {
    Taro.navigateTo({
      url: `/pages/news/index?buildingId=` + this.state.buildingId
    })
  }

  handNewsItemClick(id) {
    Taro.navigateTo({
      url: '/pages/news/detail/index?id=' + id
    })
  }

  handleActivityMoreClick() {
    Taro.navigateTo({
      url: `/pages/activity/index?buildingId=` + this.state.buildingId
    })
  }

  handActivityItemClick(item) {
    Taro.navigateTo({
      url: '/pages/activity/detail/index?id=' + item.activityId
    })
  }

  handlePreviewHxImage(current, urls) {
    Taro.previewImage({
      current,
      urls
    })
    savePoint({
      event: 'apartment',
      eventType: 'building',
      propertyName: '查看户型',
      data: '{}'
    }).then(res => {
      console.log('查看户型')
    })
  }

  handleFavor() {
    const { buildingId, isSaved } = this.state
    if (isSaved) {
      cancelFavorProject(buildingId).then(res => {
        Taro.showToast({
          title: '已取消收藏'
        })
        this.setState({
          isSaved: false
        })
      })
    } else {
      favorProject(buildingId).then(res => {
        Taro.showToast({
          title: '收藏成功'
        })
        this.setState({
          isSaved: true
        })
      })
    }
    savePoint({
      event: 'save',
      eventType: 'building',
      propertyName: '项目收藏',
      data: '{}'
    }).then(res => {
      console.log('活动项目收藏')
    })
  }
  handleToolsClick() {
    Taro.navigateTo({
      url: `/pages/toolKit/index`
    })
  }
  moreFloor() {
    Taro.navigateTo({
      url: `/pages/project/floor/index`
    })
  }


  // 调起授权电话
  toggleGrantPhone = () => {
    const { userInfo: { person: { phone, tel } } } = this.props
    if (!phone && !tel) {
      this.setState({ grantPhoneVisible: true })
      return false
    }
    console.log('phone:', phone, 'tel:', tel, '!!!!!')
    console.log(this.props, 'this.propsphone!!!!!')

    return true
  }

  // 调起授权头像
  toggleGrantAvatar = () => {
    const { userInfo: { person: { avatarurl } } } = this.props

    if (!avatarurl || avatarurl.indexOf('wx.qlogo.cn') === -1) {
      this.setState({ grantAvatarVisible: true })
      return false
    }

    console.log(avatarurl, "avatarurl")
    console.log(this.props.userInfo, "this.props")
    return true
  }
  getPrice(start, end) {

    if (start) {
      if (end) {
        if (start == end) {
          return start
        } else {
          return start + '--' + end
        }
      } else {
        return start
      }
    } else {
      return end
    }
  }


  renderBottomMenu() {
    const { userInfo: { person: { personType } } } = this.props
    const { posterShow } = this.state
    return (
      <View className='bt-nav'>
        <View className="bt-nav__left">
          <Button class='bt-nav__item' style={{ display: posterShow }} onClick={() => { this.togglePosterStatus(true) }}>
            <Image src={require('@/assets/news/tupian.png')} className='poster-img'></Image>
            <Text className="text">生成海报</Text>
          </Button>
          <Button class='bt-nav__item' open-type="share">
            <Image src={require('@/assets/news/fasong.png')} className='fenxiang-img'></Image>
            <Text className="text">分享</Text>
          </Button>
          {
            personType !== ROLE_CODE['CONSULTANT'] && (
              <Button className='bt-nav__item' onClick={this.toRecomonedPage}>
                <Image src={require('@/assets/news/peo.png')} className='kehutuijian-img'></Image>
                <Text className="text">推荐客户</Text>
              </Button>
            )
          }

        </View>
        <Button className='bt-nav__item  bt-nav__right' onClick={this.ChatOnlineClick}>
          <Text className="text">在线聊</Text>
        </Button>
        <Button className='bt-nav__item  bt-nav__right bt-nav__right2' onClick={this.callPhone}>
          <Text className="iconfont icon-tel"></Text>
          <Text className="text">打电话</Text>
        </Button>
      </View>
    )
  }

  previewHouseImage(current, urls) {
    Taro.previewImage({
      current,
      urls
    })
  }

  renderBuildingProjectTypeList() {
    const { statusOpts } = this.state
    const { projectDetail: { buildingProjectType = [], status, marketStatus } } = this.props
    return (
      <Block>
        {
          buildingProjectType.length > 0 && (
            <ScrollView
              scrollX
              className='type-intro'
            >
              <View className="type-intro__list">
                {
                  buildingProjectType.map((item, index) => (
                    <View className={buildingProjectType.length == 1 ? 'onlyone type-intro__item' : 'type-intro__item'} key={index + 'detailBuildingId'} style={`background: url(${transferImage(buildBg)}) no-repeat center;background-size: 100% 100%;`}>
                      <View >
                        {item.marketStatus &&
                          <Text className='item__status' className={item.marketStatus == '在售' ? 'item__status sale' : item.marketStatus == '售罄' ? 'item__status soldout' : 'item__status waitsale'}>{item.marketStatus}</Text>
                        }
                        {/* <Text className='type-status'>{statusOpts[status]}</Text> */}
                        {/* <Icon className="iconfont icon-jinrongxianxingge-" onClick={this.handleToolsClick}></Icon> */}
                        <View className='row' style="margin-top:0">
                          <Text className='row-label'>项目类型：</Text>
                          <Text className='row-txt black'>{item.buildingTypeName || '　'}</Text>
                        </View>
                        <View className='row'>
                          <Text className='row-label'>参考价格：</Text>
                          {
                            (item.startPrice || item.endPrice) ? <Text className='row-txt'>约{this.getPrice(item.startPrice, item.endPrice)}{item.priceType == 'total' ? '万元/套' : '元/m²'}{item.startPrice && !item.endPrice ? '起' : ''}</Text> : <Text className='row-txt'>待定</Text>
                          }
                        </View>
                        <View className='row'>
                          <Text className='row-label'>产权：</Text>
                          {item.rightsYear ?
                            <Text className='row-txt'>{item.rightsYear}年</Text>
                            :
                            <Text className='row-txt'>暂无</Text>
                          }

                          <View className='row-right'>
                            <Text className='row-label'>装修：</Text>
                            <Text className='row-txt'>{item.decoration || '暂无'}</Text>
                          </View>
                        </View>
                      </View>
                    </View>
                  ))
                }
              </View>
            </ScrollView>
          )
        }
      </Block>
    )
  }


  renderPhotoAlbum() {
    const { projectDetail: { buildingApartment } } = this.props
    const list = buildingApartment.filter(item => item.apartmentType === 'photo')
    // const imgList = list.reduce((prev, cur) => {
    //   prev = prev.concat(cur.buildingImgList)
    //   return prev
    // }, [])


    const listimg = list.filter(item => item.buildingImgList.length > 0)

    return (
      <Block>
        {listimg.length > 0 &&
          (
            <View className='photos__type'>
              <View className='photos__type__title'>高清大图</View>
              <ScrollView scrollX>
                <View className='photos__type__content' >

                  <View className="around-tab" style="display:flex">
                    {listimg.map((item, index) => {
                      const { apartmentName } = item
                      const buildingImgList = item.buildingImgList
                      const buildingImgUrl = buildingImgList.length > 0 ? buildingImgList[0].url : null

                      // console.log(buildingImgUrl, 'buildingImgUrl')

                      // if (buildingImgUrl != null) {
                      return (<View key={index + "listimg"}>
                        {buildingImgUrl != null && (<View
                          style={{ marginRight: '8px' }}

                        >

                          <View>
                            <Image className='albumimg' src={transferImage(buildingImgList[0].url)} onClick={() => this.toViewAlbum(index)}></Image>
                            <View style={{ width: '218rpx', display: 'flex', justifyContent: 'center' }} >
                              <View style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> {apartmentName}  </View>
                              <View> ({buildingImgList.length})</View>
                            </View>
                          </View>
                        </View>)}
                      </View>
                      )
                      // }

                    })
                    }
                  </View>
                </View>
              </ScrollView>
            </View>
          )
        }
      </Block>
    )
  }
  tomapDetail(e) {
    const { buildingId } = this.state
    Taro.navigateTo({
      url: `/pages/project/detail/map?id=` + buildingId
    })
  }
  rendercircum() {
    const building = {
      ...this.props.projectDetail
    }

    return (
      <View onClick={this.tomapDetail}>
        <View className="section circum">
          <View className="section-head">
            <Text className="section-head__title">楼盘位置及配套</Text>
            <View className="section-head__more">
              更多<Text className="iconfont icon-more"></Text>
            </View>
          </View>
        </View>
        <Around building={building} buildingId={this.state.buildingId} ></Around>
      </View>
    )
  }

  renderConsuler() {
    const { userInfo: { person: { phone } } } = this.props
    const { projectDetail: { consultants = [] } } = this.props
    return (
      <Block>
        {
          consultants.length > 0 && (
            <View className="section counselor">
              <View className="section-head">
                <Text className="section-head__title">咨询置业顾问</Text>
                <View className="section-head__more" onClick={() => { this.handleMoreClick() }}>
                  更多<Text className="iconfont icon-more"></Text>
                </View>
              </View>
              <View style="display:flex;align-items:center;justify-content:space-between;margin-top:30rpx">

                <View style="display:flex;align-items:center;font-size: 26rpx;color: #999;">
                  <Image style="width:30rpx;height:30rpx;margin-right:10rpx" src={require('@/assets/icons/baozhang.png')} />
                  官方保障
                </View>
                <View style="display:flex;align-items:center;font-size: 26rpx;color: #999;">
                  <Image style="width:30rpx;height:30rpx;margin-right:10rpx" src={require('@/assets/icons/zixun.png')} />
                  免费咨询
                </View>
                <View style="display:flex;align-items:center;font-size: 26rpx;color: #999;">
                  <Image style="width:30rpx;height:30rpx;margin-right:10rpx" src={require('@/assets/icons/jiedu.png')} />
                  户型解读
                </View>
                <View style="display:flex;align-items:center;font-size: 26rpx;color: #999;">
                  <Image style="width:30rpx;height:30rpx;margin-right:10rpx" src={require('@/assets/icons/fuwu.png')} />
                  贴心服务
                </View>
              </View>
              <View className="section-content">
                {
                  consultants.slice(0, 3).map((item, index) => (
                    <View className="item" key={index + 'detailId'} >
                      <View className="flex">
                        <Image className="avatar" mode="aspectFill" onClick={this.handleConsuItemClick.bind(this, item)} src={transferImage(item.photo || item.avatar)}></Image>
                        <View className='name-txt' onClick={this.handleConsuItemClick.bind(this, item)}>
                          <Text className="name">{item.userName}</Text>
                          <Text className='txt'>{item.description || ' '}</Text>
                        </View>
                      </View>
                      <View className="flex item-btn__box">

                        {
                          phone ? (
                            <Button className="item-btn chat" onClick={this.handleChatClick.bind(this, item)}>
                              <Image className='chat-img' src={require('@/assets/person/zixun.png')}></Image>
                            </Button>
                          ) : (
                              <Button className="item-btn chat" onClick={this.handleStopPropagation} open-type="getPhoneNumber" onGetphonenumber={(e) => { this.getPhoneNumber(e, item) }}>
                                <Image className='chat-img' src={require('@/assets/person/zixun.png')}></Image>
                              </Button>
                            )
                        }
                        <Button className="item-btn tel" onClick={this.handleTelClick.bind(this, item)}>
                          <Image className='dianhua1-img' src={require('@/assets/person/dianhua.png')}></Image>
                        </Button>
                      </View>
                    </View>
                  ))
                }
              </View>
            </View>
          )
        }
      </Block>
    )
  }

  renderStatement() {
    return (
      <View className='statement'>
        免责条款：以上价格仅供参考，具体一房一价的信息以售楼处展示为准。本网显示房屋位置、交通、医疗、教育、商业等配套信息，来源于第三方网络数据，不作为要约，仅供参考，双方具体权利义务应以法律规定及买卖合同约定为准。<br></br>本平台对项目周边文化教育的介绍旨在提供相关信息，并不意味着信息发布方对就学安排作出承诺。相关教育资源就学信息存在调整的可能，应以政府教育主管部门及办学颁布的政策规定为准。
      </View>
    )
  }


  renderHelp() {
    const { helpList } = this.state
    return (
      <Block>
        {helpList.length > 0 &&
          <View className="activity">
            <View className="title">助力赢好礼</View>
            <View style={{ position: 'relative' }}>
              <HelpGroupBanner
                style={{ height: '250rpx' }}
                indicatorDots={helpList.length > 1}
                list={helpList}
                onClick={this.handleHelpClick}>
              </HelpGroupBanner>
            </View>
          </View>
        }
      </Block>
    )
  }
  pointItemCilck() {
    const { projectDetail } = this.props
    if ((projectDetail.highlightsType == 'link' && projectDetail.highlightsLink) || (projectDetail.highlightsType == 'rich' && projectDetail.highlights && projectDetail.highlights != "<p><br></p>")) {
      Taro.navigateTo({
        url: `/pages/project/detail/highLight?type=${projectDetail.highlightsType}&link=${encodeURIComponent(projectDetail.highlightsLink)}&content=${encodeURIComponent(projectDetail.highlights)}`
      })
    } else {
      return
    }
  }

  renderPoints() {
    const { projectDetail: { highlightsCover } } = this.props
    return (
      <Block>
        <View className="activity">
          <View className="title">项目亮点</View>
          <View style={{ position: 'relative', padding: '0 30rpx' }} onClick={() => this.pointItemCilck()}>
            <Image style="height:230rpx;width:100%;border-radius: 24rpx;" src={transferImage(highlightsCover || require('@/assets/empty.png'))} mode="aspectFill"></Image>
          </View>
        </View>
      </Block>
    )
  }
  toHouseList(id) {
    const { projectDetail: { buildingId } } = this.props
    Taro.navigateTo({
      url: `/onlineSelling/pages/houseList/index?id=${id}&buildingId=${buildingId}`
    })
  }
  renderChooseHouse() {
    console.log('----------------renderChooseHouse----------------')
    const { projectDetail: { salesBatch = [] } } = this.props
    return (
      <Block>
        {salesBatch.length && <View className="activity" style="padding:40rpx 0 20rpx 0 ">
          <View className="title">在线选房</View>
          {salesBatch.map((item, index) => (
            <View style={{ position: 'relative', padding: '0 30rpx' }} key={index + 'salesBatch'} >
              <Image style="height:388rpx;width:100%;border-radius: 24rpx;margin-bottom:20rpx" onClick={() => { this.toHouseList(item.salesBatchId) }} src={transferImage(item.aerialViewImg || require('@/assets/empty.png'))} mode="aspectFill"></Image>
            </View>
          ))}

        </View>}

      </Block>
    )
  }

  handleHelpClick(item) {
    Taro.navigateTo({
      url: '/pages/activity/detail/assistance?id=' + item.activityId
    })
  }
  handleGroupClick(item) {
    Taro.navigateTo({
      url: '/pages/activity/detail/assemble?id=' + item.activityId
    })
  }

  handleHouseTypePosterClick(apartment, imgList) {
    if (apartment.panoramaArr) {
      this.goToPanorama(apartment.panoramaArr[0])
    } else {
      this.handlePreviewHxImage(apartment.buildingImgList[0].url, imgList)
    }
  }

  renderGroup() {
    const { groupList } = this.state
    return (
      <Block>
        {groupList.length > 0 &&
          <View className="activity">
            <View className="title">发起拼单</View>
            <View
              style={{ position: 'relative' }}>
              <HelpGroupBanner
                style={{ height: '250rpx' }}
                indicatorDots={groupList.length > 1}
                list={groupList}
                onClick={this.handleGroupClick}>
              </HelpGroupBanner>
            </View>
          </View>
        }
      </Block>
    )
  }
  handleLiveClick(item) {
    Taro.navigateTo({
      url: '/onlineSelling/pages/live/index?id=' + item.liveActivityId
    })
  }
  renderLive() {
    const { liveList } = this.state
    return (
      <Block>
        {liveList.length > 0 &&
          <View className="activity">
            <View className="title">直播活动</View>
            <View
              style={{ position: 'relative' }}>
              <HelpGroupBanner
                style={{ height: '255rpx' }}
                indicatorDots={liveList.length > 1}
                list={liveList}
                onClick={this.handleLiveClick}>
              </HelpGroupBanner>
            </View>
          </View>
        }
      </Block>
    )
  }

  renderHouseTypeList() {
    const { statusOpts, statusBgColors } = this.state
    const { projectDetail: { buildingApartment, panoramaList } } = this.props
    const list = buildingApartment.filter(item => item.apartmentType === 'apart')

    // 挂载全景图设置
    list.forEach(apartment => {
      const panoramaArr = (panoramaList || []).filter(x => x.buildingId === apartment.buildingId && x.apartmentId === apartment.apartmentId)
      if (panoramaArr.length) {
        apartment.panoramaArr = panoramaArr
      }
    })

    let imgUrls = list.reduce((prev, cur) => {
      prev = prev.concat(cur.buildingImgList)
      return prev
    }, [])
    imgUrls = imgUrls.map(item => item.url)

    return (
      <Block>
        {
          list.length > 0 && (
            <View className='house-type'>
              <View className='house-type__title'>看户型({list.length})</View>
              <ScrollView scrollX>

                <View className='house-type__list'>
                  {list.map(item => (
                    <View className='item' key={item.apartmentId}>
                      {
                        item && (
                          <Block>
                            <View className='house-type__state' style={`background-color: ${statusBgColors[item.marketStatus - 1]}`}>{statusOpts[item.marketStatus - 1]}</View>
                            <View className='house__img-info'>
                              <Image className='house__img' src={transferImage(item.buildingImgList[0].url)} mode="aspectFill" onClick={this.handleHouseTypePosterClick.bind(this, item, imgUrls)}></Image>
                              {item.panoramaArr && (
                                <View className='house-type__panorama'>
                                  <Image mode="aspectFill" src={vrLogo} style={{ width: '100%', height: '100%' }} />
                                </View>
                              )}
                            </View>
                          </Block>
                        )
                      }
                      <View className="rest-info">
                        <View className='house-type__name'>{item.apartmentName || ''}</View>
                        <View className='construction__area'>
                          <Text>{item.buildingArea ? '建筑面积约' + item.buildingArea + 'm²' : '建筑面积待定'}</Text>
                          {
                            item.insideArea ? <Text>使用面积约{item.insideArea}m²</Text> : <Text>使用面积待定</Text>
                          }
                        </View>
                      </View>
                    </View>
                  ))}
                </View>
              </ScrollView>
            </View>
          )
        }
      </Block>

    )
  }
  renderActivities() {
    const { activityList } = this.state
    return (
      <Block>
        {
          activityList.length > 0 && (
            <View className="activity" >
              <View className="section-head">
                <Text className="section-head__title" style={{ margin: '10rpx 0 40rpx 35rpx' }}>参加活动</Text>
                <View className="section-head__more" style={{ marginRight: '20rpx' }} onClick={this.handleActivityMoreClick}>
                  更多活动<Text className="iconfont icon-more"></Text>
                </View>
              </View>
              <View
                style={{ position: 'relative' }}>
                <HelpGroupBanner
                  style={{ height: '250rpx' }}
                  activityStyle={{ height: '334rpx' }}
                  indicatorDots={false}
                  list={activityList}
                  type='activity'
                  onClick={this.handActivityItemClick}
                >
                </HelpGroupBanner>
              </View>
            </View>
          )
        }
      </Block>
    )
  }
  renderNews() {
    const { newsList } = this.state
    return (
      <Block>
        {
          newsList.length > 0 && (
            <View className="house-type">
              <View className="section-head">
                <Text className="section-head__title">新鲜资讯</Text>
                <View className="section-head__more" onClick={this.handleNewsMoreClick}>
                  更多资讯<Text className="iconfont icon-more"></Text>
                </View>
              </View>
              <ScrollView scrollX>
                <View className="house-type__list" style="margin-top:10px">
                  {
                    newsList.map(item => (
                      <View className="news-item" key={item.newsId} onClick={this.handNewsItemClick.bind(this, item.newsId)}>
                        <Image src={transferImage(item.newsImg)} mode="aspectFill" className="news-item__pic"></Image>
                        <View className="news-item__title">{item.newsName}</View>
                      </View>
                    ))
                  }
                </View>
              </ScrollView>
            </View>
          )
        }
      </Block>
    )
  }
  // 开始播放
  plagVideo() {
    let videoContext = wx.createVideoContext('myVideo')
    console.log()
    // this.setState({
    //   videoPlayShow: 'none'
    // })
    videoContext.play()
  }
  bindended() {
    let videoContext = wx.createVideoContext('myVideo')
    console.log('111111')
    // videoContext.stop()//停止
    // videoContext.seek(1)//跳转
    VideoContext.pause()//暂停
  }
  bindfullscreenchange = (e) => {

    const { projectDetail } = this.props
    const { videoImage } = projectDetail
    const imgSrc = videoImage[0].url
    console.log(e, '111111')

    let videoContext = wx.createVideoContext('myVideo')
    if (e.detail.fullScreen) {
      console.log(videoContext, '22222')
      videoContext.poster = undefined
      console.log(videoContext, '22222')
    }
    else {
      console.log(videoContext, '33333')
      console.log(imgSrc, 'imgSrc')
      videoContext.poster = imgSrc
      console.log(videoContext, '33333')
    }
    // VideoContext.pause()
  }
  onPlay = (e) => {
    let videoContext = wx.createVideoContext('myVideo')
    videoContext.poster = undefined
    console.log(videoContext, '4444')
  }

  // onPause() {
  //   this.setState({
  //     videoPlayShow: 'flex'
  //   })
  // }
  renderVideo() {
    const { videoPlayShow } = this.state
    const { projectDetail } = this.props
    const { videoImage } = projectDetail
    const imgSrc = videoImage ? videoImage[0].url : ''

    return (
      <View
        className="pro__banner"
      >
        <Video
          src={projectDetail.videoUrl}
          // src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
          poster={transferImage(imgSrc)}
          // poster='http://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
          style={{
            height: '600rpx',
            width: '750rpx'
          }}
          // initialTime='1'
          id='myVideo'
          controls={true}
          // bindended={this.bindended}
          onFullScreenChange={this.bindfullscreenchange}
          // autoplay={false}
          // initialTime='0'
          // loop={true}
          // muted={false}

          showMuteBtn='true'
          onPlay={this.onPlay}
        // show-center-play-btn='false'
        // onPause= {this.onPause}

        ></Video>
        {/* <Button className='pro__banner-btn' onClick={this.plagVideo} style={{ display: videoPlayShow  }}>
          <Image src={require('@/assets/play.png')} mode='scaleToFill' className='pro__banner-btn-img'></Image>
        </Button> */}

        {/* <View className='pro__banner-voice' onClick={this.plagVideo} >
          <Image src={require('@/assets/voice.png')} mode='scaleToFill	' className='pro__banner-voice-img'></Image>
        </View> */}
        {/* 
        <View className='pro__banner-extend' onClick={this.fullScreen} >
          <Image src={require('@/assets/extend.png')} mode='scaleToFill	' className='pro__banner-extend-img'></Image>
        </View> */}

      </View>
    )
  }

  changeCurrent(current) {
    // console.log(current, 'current')
    this.setState({
      current: current + 1
    })
  }

  handleBannerBtnClick(btnstate) {
    this.setState({ btnstate, current: 1 })
  }

  goToPanorama(panorama) {
    const url = (panorama || {}).panoramaLink

    if (!url) return;

    this.navigateTo(`/pages/project/panorama/index?url=${encodeURIComponent(url)}`)
  }

  handlePanoramaClick(panorama) {
    this.goToPanorama(panorama)
  }

  renderBannerImages() {
    const { projectDetail } = this.props
    const { current = 1 } = this.state

    return (
      <View
        className="pro__banner"
        onClick={this.previewImage.bind(this, projectDetail.buildingImg)}>
        <Banner
          list={projectDetail.buildingImg}
          indicatorDots={false}
          // current
          // isChange = {true}
          onChange={this.changeCurrent.bind(this)}
          style={{
            height: '600rpx'
          }}

        ></Banner>
        <Text className="pro__banner-text">{current}/{(projectDetail.buildingImg && projectDetail.buildingImg.length) || 0}</Text>
      </View>
    );
  }

  renderBannerPanorama() {
    const { projectDetail } = this.props
    const { current = 1 } = this.state

    return (
      <View className="pro__banner">
        <Banner
          list={projectDetail.panoramaList || []}
          indicatorDots={false}
          // current
          // isChange = {true}
          onChange={this.changeCurrent.bind(this)}
          onClick={this.handlePanoramaClick.bind(this)}
          style={{
            height: '600rpx'
          }}
          logo={vrLogo}
        ></Banner>
        <Text className="pro__banner-text">{current}/{(projectDetail.panoramaList && projectDetail.panoramaList.length) || 0}</Text>
      </View>
    );
  }
  handleMaskBannerClick(data) {
    this.redirectTo(data)
  }
  redirectTo({ targetId, contentType, buildingId } = {}) {
    switch (contentType) {
      // 项目
      case 'project':
        Taro.navigateTo({
          url: '/pages/project/detail/index?id=' + buildingId
        })
        this.handleMaskClose()
        return;

      // 活动
      case 'activity':
        Taro.navigateTo({
          url: '/pages/activity/detail/index?id=' + targetId
        })
        this.handleMaskClose()
        return;

      // 助力
      case 'help':
        Taro.navigateTo({
          url: '/pages/activity/detail/assistance?id=' + targetId
        })
        this.handleMaskClose()
        return;

      // 拼团
      case 'group':
        Taro.navigateTo({
          url: '/pages/activity/detail/assemble?id=' + targetId
        })
        this.handleMaskClose()
        return;

      // 资讯
      case 'news':
        Taro.navigateTo({
          url: '/pages/news/detail/index?id=' + targetId
        })
        this.handleMaskClose()
        return;
      // h5
      case 'h5':
        Taro.navigateTo({
          url: '/pages/project/h5Page?id=' + targetId
        })
        this.handleMaskClose()
        return;
      // live
      case 'live':
        Taro.navigateTo({
          url: '/onlineSelling/pages/live/index?id=' + targetId
        })
        this.handleMaskClose()
        return;
      // salesBatch
      case 'salesBatch':
        Taro.navigateTo({
          url: `/onlineSelling/pages/houseList/index?id=${targetId}`
        })
        this.handleMaskClose()
        return;

      // 其他
      case 'others':
      default:
        this.handleMaskClose()
        return;
    }
  }
  handleMaskClose() {
    this.setState({
      maskVisible: false
    })
  }
  renderMaskBanner() {

    const { extendContent = {} } = this.state
    return (
      <View className="mask-banner">
        <View className="content">
          <Image
            mode="widthFix"
            className="img"
            src={transferImage(extendContent.image)}
            onClick={this.handleMaskBannerClick.bind(this, extendContent)}>
          </Image>
          <Icon className="iconfont close icon-buoumaotubiao20" onClick={this.handleMaskClose}></Icon>
        </View>
      </View>
    )
  }
  render() {
    const { grantPhoneVisible, grantAvatarVisible, maskVisible, queryInfo, posterStatus, posterData, loaded, btnstate, consultData, consultShow } = this.state
    const { projectDetail, userInfo = { person: {} } } = this.props
    const { uvList = {} } = projectDetail
    const { total = 0, records = [] } = uvList
    const openDate = projectDetail.openingDate ? dayjs(projectDetail.openingDate).locale('zh-cn').format('YYYY年M月D日') : '暂无'
    const showBuildingImgs = projectDetail.buildingImg && projectDetail.buildingImg.length > 0
    const showBuildingVRs = projectDetail.panoramaList && projectDetail.panoramaList.length > 0
    const shwoBuildingVideo = projectDetail.videoUrl ? true : false
    const showMediaBtn = showBuildingImgs + showBuildingVRs + shwoBuildingVideo > 1 // 满足2个就展示

    const achieveParams = {
      buildingId: projectDetail.buildingId || '',
      targetName: projectDetail.buildingName || '',
      targetType: 'building',
      targetId: projectDetail.buildingId || '',
      ...queryInfo
    }
    console.log(achieveParams, "achieveParamsachieveParamsachieveParamsachieveParams")
    return (
      <Block>
        {
          grantPhoneVisible &&
          <AchievePhone user={userInfo.person} onSuccess={this.toggleGrantAvatar} achieveParams={achieveParams}></AchievePhone>
        }
        {
          grantAvatarVisible &&
          <AchieveAvatar user={userInfo.person} onSuccess={() => { this.setState({ grantAvatarVisible: false }) }} ></AchieveAvatar>
        }

        {maskVisible && this.renderMaskBanner()}

        {
          loaded && (
            <View className='detail'>
              <Notice></Notice>

              {!btnstate && this.renderBannerImages()}

              {btnstate === 1 && this.renderVideo()}

              {btnstate === 2 && this.renderBannerPanorama()}

              {
                showMediaBtn &&
                (
                  <View className="media-btn">
                    {shwoBuildingVideo && <View className={`btn ${btnstate === 1 && 'active'}`} onClick={this.handleBannerBtnClick.bind(this, 1)}>视频</View>}
                    {showBuildingVRs && <View className={`btn ${btnstate === 2 && 'active'}`} onClick={this.handleBannerBtnClick.bind(this, 2)}>全景</View>}
                    {showBuildingImgs && <View className={`btn ${!btnstate && 'active'}`} onClick={this.handleBannerBtnClick.bind(this, 0)}>图片</View>}
                  </View>
                )
              }

              <ScrollView
                enableBackToTop
                className="wrap"
                scrollY>
                <View className='detail__main'>
                  {/* 详情 */}
                  <View className='base-info'>
                    <View className='project__infor'>
                      <View className='row project__title'>
                        <Text className="bold">{projectDetail.buildingName}</Text>
                        <View className="favor-btn" onClick={this.handleFavor}>
                          <Text className={`iconfont ${isSaved ? 'icon-shoucang saved' : 'icon-shoucang1'}`}></Text>
                          <Text className="txt">收藏</Text>
                        </View>
                      </View>
                      {/* <View className='row project__price'><Text style={{ paddingRight: '20px' }}>均价</Text><Text className="num">{projectDetail.price}</Text></View> */}
                      <View className='row project__tags'>
                        {projectDetail.buildingTag.map(item => <Text className='tag' key={item.tagId}>{item.tagName}</Text>)}
                      </View>
                      {/* 产品类型介绍 */}

                      {this.renderBuildingProjectTypeList()}

                      <View className='row project__addr'>
                        <Text className="label">楼盘地址：</Text>
                        <View className='address'>
                          <Text className="address__text">{projectDetail.address || '暂无'}</Text>
                          {/* <Text className='iconfont icon-jingzhundaohang-copy' onClick={this.openMap.bind(this)}></Text> */}
                        </View>
                      </View>

                      <View className='row project__time'>
                        <Text className="label">开盘时间：</Text>
                        {/* <Text>{openDate}</Text> */}
                        <Text>{projectDetail.openingDate || '待定'}</Text>
                      </View>
                      <View className='row project__time'>
                        <Text className="label">物业：</Text>
                        <Text>{projectDetail.serviceCompany || '暂无'}</Text>
                      </View>
                      <View className='row-info'>
                        <View className='row'>
                          <Text className="label">车位比率：</Text>{projectDetail.parkingRate || '暂无'}</View>
                        <View className='row'>
                          <Text className="label">容积率：</Text>{projectDetail.volumeRate || '暂无'}</View>
                      </View>
                      <View className='row-info'>

                        <View className='row'>
                          <Text className="label">规划户数：</Text>{projectDetail.familyNum || '暂无'}</View>
                        <View className='row'>
                          <Text className="label">绿化率：</Text>{projectDetail.greeningRate || '暂无'}</View>
                      </View>
                      <View className='row-info'>
                        <View className='row'>
                          <Text className="label">物业费：</Text>{projectDetail.serviceFee || '暂无'}</View>
                      </View>

                      {/* 围观人数 */}
                      <View className='watch__people__num'>
                        <View className='top__txt'>{projectDetail.pvNum || 0}人围观</View>
                        <View className='bottom__img' onClick={this.onViewFans.bind(this)}>
                          <View className="records">
                            {records.slice(0, 8).map(item => <Image src={transferImage(item.photoOravatar)} className='user__img' key={item.personId} />)}
                            {records.length > 8 && <Image className="dot-img" src={transferImage(dotImg)}></Image>}
                          </View>
                          <Text className="iconfont icon-more"></Text>
                        </View>
                      </View>
                      <View className='more-btn' onClick={this.moreFloor}>更多楼盘信息</View>
                    </View>
                  </View>
                  {/* 项目亮点 */}
                  {projectDetail.highlightsCover && this.renderPoints()}
                  {/* 项目顾问 */}
                  {!consultShow && this.renderConsuler()}
                  {/* 周边 */}
                  {this.rendercircum()}
                  {/* 户型介绍 */}
                  {this.renderHouseTypeList()}
                  {/* 在线选房 */}
                  {this.renderChooseHouse()}
                  {/* 助力活动 */}
                  {this.renderHelp()}
                  {/* 拼团活动 */}
                  {this.renderGroup()}
                  {/* 直播活动 */}
                  {this.renderLive()}
                  {/* 新鲜资讯 */}
                  {this.renderNews()}
                  {/* 参加活动 */}
                  {this.renderActivities()}
                  {/* 相册 */}
                  {this.renderPhotoAlbum()}
                  {/* 免责声明 */}
                  {this.renderStatement()}
                </View>
              </ScrollView>
              {/* 生成海报 */}
              {
                posterStatus && (<Poster data={posterData} onCancel={() => this.setState({ posterStatus: false })} toggle={this.togglePosterStatus}></Poster>)
              }
              {/* 底部菜单 */}
              {this.renderBottomMenu()}
              {/* <View className="tel-entrance" onClick={this.makePhoneCall}>
                <Text className="iconfont icon-dianhua2"></Text>
                <Text className="text">电话</Text>
              </View> */}
              {/* <View className="home-entrance" onClick={this.toHome}>
                <Text className="iconfont icon-shouyeshouye"></Text>
                <Text className="text">首页</Text>
              </View> */}
              <BackHomeBtn style={consultShow ? "bottom:320rpx" : ''}></BackHomeBtn>
              {
                consultShow && <Consultant style="bottom:160rpx" smallStyle="bottom:188rpx" personId={userInfo.person.personId} name={userInfo.person.name || userInfo.person.nickname} data={consultData}></Consultant>
              }
            </View>
          )
        }
      </Block>
    );
  }
}
