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 PoiAround from '@components/amap/PoiAround'
import Around from './Around'
import BackHomeBtn from '@components/BackHomeBtn'
import {
  addItemUv,
  addItemShareNum,
  favorProject,
  cancelFavorProject
} 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, getThumbnail } from '@utils/tools'
import { connect } from '@tarojs/redux'
import { dispatchProjectDetail } from '@actions/project'
import getUserPhone from '@utils/getUserPhone'
import { ROLE_CODE } from '@constants/user'
const buildBg = require('@assets/buildbg.png')

@connect(
  ({ user, project }) => ({ ...user, ...project }),
  { dispatchProjectDetail }
)
export default class Index extends Component {
  config = {
    navigationBarTitleText: '项目详情',
  }

  state = {
    buildingId: null,
    isSaved: false,
    loaded: false,
    posterStatus: false,
    buildingProjectType: [],
    posterData: {},
    newsList: [],
    activityList: [],
    helpList: [],
    groupList: [],
    statusOpts: ['待定', '在建', '在售'],
    // circumOpts: [],
    curTab: 'Transport',
    recordId: null,
    posterShow: 'none',
    current: 1,
    btnstate: 1,// 1显示视频 0显示图片
    albumCurrent: 0,
    videoPlayShow: 'flex',
  }

  componentWillMount() {
    // const { id = '78c3dd489791dc1d29472fa344b08c45' } = this.$router.params

    ready.queue(() => {
      const router = Taro.getStorageSync('router')
      const id = this.$router.params.id || router.query.id
      // const id='82b54f4a1f5b981df572253792afbfa1' 
      this.setState({
        buildingId: id
      }, () => {
        this.loadDetail()
        this.loadNewsData()
        this.loadActivityData()
        this.loadHelpGroupList()

        addItemUv(id)
        // 埋点
        savePoint({
          event: 'detail',
          eventType: 'building',
          propertyName: '项目详情',
          targetId: id,
          buildingId: id,
          data: '{}'
        }).then(res => {
          this.setState({
            recordId: res.recordId
          })
          console.log('项目详情')
        })
      })
    })
  }

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

  loadHelpGroupList() {
    const { buildingId } = this.state

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

  loadDetail() {
    const { buildingId } = this.state
    const { dispatchProjectDetail } = this.props
    this.setState({
      loaded: false,
    })
    Taro.showToast({
      title: '正在加载数据',
      icon: 'loading'
    })

    dispatchProjectDetail(buildingId).then(res => {
      this.setState({
        loaded: true,
        // circumOpts: newCircumOpts,
        isSaved: res.isSave
      }, () => {
        if (res.posters && res.posters.length) {
          this.setState({
            posterShow: 'flex'
          })
        }
      })

      Taro.hideToast()
    })
  }

  loadActivityData() {
    const { buildingId } = this.state
    const payload = { pageSize: 999, pageNumber: 1, buildingId }
    queryActivityList(payload).then(res => {
      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() {
    const { buildingId } = this.state
    this.navigateTo(`/pages/project/album/index?id=${buildingId}`)
  }

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

  onShareAppMessage = () => {
    const {
      projectDetail: { shareContents, buildingName, buildingId, poster },
      userInfo: { person: { personId } }
    } = this.props
    // 分享埋点
    addItemShareNum(buildingId)

    savePoint({
      event: 'share',
      eventType: 'building',
      propertyName: '项目详情分享',
      data: '{}'
    }).then(res => {
      console.log('项目详情分享')
    })

    return {
      title: shareContents[0].shareContentTitle,//分享内容
      path: `/pages/project/detail/index?id=${buildingId}&from=building_share&recommender=${personId}`,//分享地址
      imageUrl: shareContents[0].shareContentImg
    }
  }

  getPhoneNumber(e, item) {
    getUserPhone(e, (phoneNumber) => {
      const { userInfo: { person: { personId, nickname, name } } } = this.props
      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 } },
        projectDetail: { posters, buildingId, poster, price, buildingRestaurant, createDate, buildingName, tel, buildingTag, uvList = {} }
      } = this.props
      const { total = 0 } = uvList
      const payload = {
        "scene": `id=${buildingId}&from=building_share&recommender=${personId}`,
        "page": 'pages/project/detail/index',
      }
      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//围观人数
        }
        resolve(data)
      })
    })
  }

  // 开始生成海报
  togglePosterStatus = (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
      })
    }
  }

  makePhoneCall = () => {
    const { tel: phoneNumber } = this.props.projectDetail
    Taro.makePhoneCall({
      phoneNumber
    })
  }

  handleTelClick(item, e) {
    e.stopPropagation()
    Taro.makePhoneCall({
      phoneNumber: item.phone
    })
  }

  handleChatClick(item, e) {
    e.stopPropagation()
    const { userInfo: { person: { personId, nickname, name } } } = this.props
    Taro.navigateTo({
      url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(name || nickname)}&receiverId=${item.id}&receiverName=${encodeURIComponent(item.userName)}`
    })
  }

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

  handleMoreClick() {
    // App.zhuge.track('查看置业顾问列表')
    Taro.navigateTo({
      url: `/pages/card/list/index?buildingId=${this.state.buildingId}`
    })
  }

  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: `/pages/agent/recommend/index`
      })
    }
  }

  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(id) {
    Taro.navigateTo({
      url: '/pages/activity/detail/index?id=' + id
    })
  }

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

  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: 'project',
      propertyName: '项目收藏',
      data: '{}'
    }).then(res => {
      console.log('活动项目收藏')
    })
  }
  handleToolsClick() {
    Taro.navigateTo({
      url: `/pages/toolKit/index`
    })
  }
  moreFloor() {
    Taro.navigateTo({
      url: `/pages/project/floor/index`
    })
  }

  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.handleMoreClick}>
          <Text className="text">在线聊</Text>
        </Button>
        <Button className='bt-nav__item  bt-nav__right bt-nav__right2' onClick={this.makePhoneCall}>
          <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 => (
                    <View className='type-intro__item' key={item.buildingId} style={`background: url(${getThumbnail(buildBg)}) no-repeat center;background-size: 100% 100%;`}>

                      <View >

                        {marketStatus &&
                          <Text className='item__status' className={marketStatus == '在售' ? 'item__status sale' : marketStatus == '售罄' ? 'item__status soldout' : 'item__status waitsale'}>{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.price ? <Text className='row-txt'>约{item.price}元/m²</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 { albumCurrent } = this.state



    return (


      <Block>
        {list.length > 0 &&
          (
            <View className='photos__type'>
              <View className='photos__type__title'>相册</View>
              <ScrollView scrollX>
                <View className='photos__type__content' onClick={this.toViewAlbum}>

                  <View className="around-tab">
                    {list.map((item, index) => {
                      const { apartmentName } = item || {}
                      const buildingImgList = item.buildingImgList


                      return (
                        <View
                          style={{ marginRight: '8px' }}
                        >
                          {/* {`${label}(${num})`} */}
                          <View>
                            <Image className='albumimg' src={getThumbnail(buildingImgList[0].url)} ></Image>
                            <View style={{ textAlign: 'center' }}>  {`${apartmentName}(${buildingImgList.length})`} </View>
                          </View>
                        </View>
                      )
                    })}
                  </View>
                </View>
              </ScrollView>
            </View>
          )
        }
      </Block>
    )
  }
  rendercircum() {
    const building = {
      ...this.props.projectDetail
    }

    return (
      <Block>
        <View className="section circum">
          <View className="section-head">
            <Text className="section-head__title">位置及周边配套</Text>
          </View>
        </View>
        <Around building={building} onAction={this.openMap.bind(this)}></Around>
      </Block>
    )
  }

  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 className="section-content">
                {
                  consultants.slice(0, 3).map(item => (
                    <View className="item" key={item.id} onClick={this.handleConsuItemClick.bind(this, item)}>
                      <View className="flex">
                        <Image className="avatar" mode="aspectFill" src={getThumbnail(item.photo || item.avatar)}></Image>
                        <View className='name-txt'>
                          <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={false}
                list={helpList}
                onClick={this.handleHelpClick}>
              </HelpGroupBanner>
            </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
    })
  }
  renderGroup() {
    const { groupList } = this.state
    return (
      <Block>
        {groupList.length > 0 &&
          <View className="activity">
            {console.log(groupList, '----groupList-----')}
            <View className="title">拼团活动</View>
            <View
              style={{ position: 'relative' }}>
              <HelpGroupBanner
                style={{ height: '250rpx' }}
                indicatorDots={false}
                list={groupList}
                onClick={this.handleGroupClick}>
              </HelpGroupBanner>
            </View>
          </View>
        }
      </Block>
    )
  }

  renderHouseTypeList() {
    const { statusOpts } = this.state
    const { projectDetail: { buildingApartment } } = this.props
    const list = buildingApartment.filter(item => item.apartmentType === 'apart')
    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 && (
                          <View className='house__img-info'>
                            <Image className='house__img' src={getThumbnail(item.buildingImgList[0].url)} mode="widthFix" onClick={this.handlePreviewHxImage.bind(this, item.buildingImgList[0].url, imgUrls)}></Image>
                            <View className='house-type__state'>{statusOpts[item.marketStatus - 1]}</View>
                          </View>
                        )
                      }
                      <View className="rest-info">
                        <View className='house-type__name'><Text style="color:#FA5431;margin-right:10px">{item.buildingArea || ''}</Text>{item.apartmentName || ''}</View>
                        <View className='construction__area'>
                          <Text>建面{item.buildingArea || ''}m²</Text>
                          {
                            item.insideArea ? <Text>套内{item.insideArea}m²</Text> : <Text>套内待定</Text>
                          }
                        </View>
                      </View>
                    </View>
                  ))}
                </View>
              </ScrollView>
            </View>
          )
        }
      </Block>

    )
  }
  renderActivities () {
    // 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={false}
    //               list={groupList}
    //               onClick={this.handleGroupClick}>
    //             </HelpGroupBanner>
    //           </View>
    //         </View>
    //       }
    //     </Block>
    //   )
    // }
    const { activityList } = this.state
    return (
      <Block>
        {
          activityList.length > 0 && (
            <View className="activity">
              {console.log(activityList, '----activityList-----')}
              <View className="title">热门活动</View>
              <View
                style={{ position: 'relative' }}>
                <HelpGroupBanner
                  style={{ height: '250rpx' }}
                  activityStyle={{ height: '334rpx' }}
                  indicatorDots={false}
                  list={activityList}
                  type='activity'
                // onClick={this.handleGroupClick}
                >
                </HelpGroupBanner>

              </View>
            </View>
            // <View className="house-type">
            //   <View className="section-head">
            //     <Text className="section-head__title">热门活动</Text>
            //     <View className="section-head__more" onClick={this.handleActivityMoreClick}>
            //       更多活动<Text className="iconfont icon-more"></Text>
            //     </View>
            //   </View>
            //   <ScrollView scrollX>
            //     <View className="house-type__list" style="margin-top:10px">
            //       {
            //         activityList.map(item => (
            //           <View className="news-item" key={item.dynamicId} onClick={this.handActivityItemClick.bind(this, item.dynamicId)}>
            //             <Image mode="widthFix" src={getThumbnail(item.imgUrl)} className="news-item__pic"></Image>
            //             <View className="news-item__title">{item.title}</View>
            //           </View>
            //         ))
            //       }
            //     </View>
            //   </ScrollView>
            // </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={getThumbnail(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()
  }

  onPlay () {
        console.log()
    this.setState({
      videoPlayShow: 'none'
    })
  }

  onPause () {
    this.setState({
      videoPlayShow: 'flex'
    })
  }


  renderVideo () {
    const {videoPlayShow}  = this.state
    const { projectDetail } = this.props
    const { videoImage } = projectDetail
    const imgSrc = videoImage[0].url

    return (
      <View
        className="pro__banner"
      >
        {console.log(projectDetail)}
        <Video
          src={projectDetail.videoUrl}
          // src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
          poster={getThumbnail(imgSrc)}
          // poster='http://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
          style={{
            height: '600rpx',
            width: '750rpx'
          }}
          id='myVideo'
          controls={false}
          // autoplay={false}
          // initialTime='0'
          // loop={false}
          // muted={false}
          
          show-mute-btn='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) {
    this.setState({
      current: current + 1
    })
  }

  render() {
    const { posterStatus, posterData, loaded, btnstate } = this.state
    const { projectDetail } = this.props
    const { uvList = {} } = projectDetail
    const { total = 0, records = [] } = uvList
    const openDate = projectDetail.openingDate ? dayjs(projectDetail.openingDate).locale('zh-cn').format('YYYY年M月D日') : '暂无'

    return (
      <Block>
        {
          loaded && (
            <View className='detail'>
              <Notice></Notice>
              {(projectDetail.videoUrl == null || btnstate === 0) && (
                <View
                  className="pro__banner"
                  onClick={this.previewImage.bind(this, projectDetail.buildingImg)}>
                  <Banner
                    list={projectDetail.buildingImg}
                    indicatorDots={false}
                    // current
                    onChange={this.changeCurrent.bind(this)}
                    style={{
                      height: '600rpx'
                    }}

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

              {btnstate === 1 && projectDetail.videoUrl != null && this.renderVideo()}

              {btnstate === 1 && projectDetail.videoUrl != null && (<View className='media-btn'>
                <View className='video-btn' style={{ background: ' rgba(187, 156, 121, 1)', color: 'rgba(255, 255, 255, 1)' }} >视频</View>
                <View className='img-btn' onClick={() => this.setState({ btnstate: 0 })}>图片</View>
              </View>)}

              {btnstate === 0 && projectDetail.videoUrl != null && (<View className='media-btn'>
                <View className='video-btn' onClick={() => this.setState({ btnstate: 1 })} >视频</View>
                <View className='img-btn' style={{ background: ' rgba(187, 156, 121, 1)', color: 'rgba(255, 255, 255, 1)' }}>图片</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>
                      </View>
                      <View className='row project__time'>
                        <Text className="label">物业：</Text>
                        <Text>{projectDetail.serviceCompany || '暂无'}</Text>
                      </View>

                      {/* <View className='row project__area'>
                        <Text className="label">销售状态：</Text>
                        <Text className="status">{projectDetail.marketStatus}</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='row'>
                        <Text className="label">装修标准：</Text>{projectDetail.decoration || '暂无'}
                      </View> */}

                      {/* 围观人数 */}
                      <View className='watch__people__num'>
                        <View className='top__txt'>{total}人围观</View>
                        <View className='bottom__img' onClick={this.onViewFans.bind(this)}>
                          <View className="records">
                            {records.slice(0, 9).map(item => <Image src={item.photoOravatar} className='user__img' key={item.personId} />)}
                            {records.length > 9 && <Text> ···</Text>}
                          </View>

                          <Text className="iconfont icon-more"></Text>
                        </View>
                      </View>
                      <View className='more-btn' onClick={this.moreFloor}>更多楼盘信息</View>
                    </View>
                  </View>

                  {/* 项目顾问 */}
                  {this.renderConsuler()}

                  {/* 周边 */}
                  {this.rendercircum()}

                  {/* 户型介绍 */}
                  {this.renderHouseTypeList()}

                  {/* 助力活动 */}
                  {this.renderHelp()}

                  {/* 拼团活动 */}
                  {this.renderGroup()}

                  {/* 新鲜资讯 */}
                  {this.renderNews()}

                  {/* 热门活动 */}
                  {this.renderActivities()}

                  {/* 相册 */}
                  {this.renderPhotoAlbum()}

                  {/* 免责声明 */}
                  {this.renderStatement()}
                </View>
              </ScrollView>

              {/* 生成海报 */}
              {
                posterStatus && (<Poster data={posterData} 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></BackHomeBtn>
            </View>
          )
        }
      </Block>
    );
  }
}
