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

import { connect } from '@tarojs/redux'
import * as actions from '@actions/project'
import { savePoint, updatePoint } from '@services/common'
import { getThumbnail } from '@utils/tools'


@connect(state => state.project, { ...actions })



export default class Index extends Component {

  config = {
    navigationBarTitleText: '相册信息'
  }

  state = {
    recordId: null,
    current: 0,
  }


  componentWillMount () {
    const { id = '369b7d7e5bc6e6b91f2e8f5e775035e2' } = this.$router.params
    const { projectDetail: { buildingId }, dispatchProjectDetail } = this.props

    if (!buildingId) {
      dispatchProjectDetail(id)
    }

    savePoint({
      event: 'album',
      eventType: 'building',
      propertyName: '相册信息',
      data: '{}'
    }).then(res => {
      this.setState({
        recordId: res.recordId
      })
      console.log('相册信息')
    })
  }
  componentWillUnmount () {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }
  // 图片预览
  previewImage (cur, urls) {
    wx.previewImage({
      current: cur, // 当前显示图片的http链接   
      urls: urls // 需要预览的图片http链接列表   
    })
  }

  render () {
    const { projectDetail: { buildingApartment } } = this.props
    const list = buildingApartment.filter(item => item.apartmentType === 'photo')
    const { current } = this.state
    const imgList = list[current].buildingImgList
    let _photosImgs = imgList.map(img => img.url)


    return (
      <View className='photos'>
        <ScrollView scrollX>
          <View className='photos__type__content'>
            {console.log(list, '2225555555')}
            <View className="around-tab">
              {list.map((item, index) => {
                const { apartmentName } = item || {}
                const buildingImgList = item.buildingImgList

                console.log(imgList, '22333333222')
                return (
                  <View
                    style={{ width: '100px' }}
                    key={current}
                    className={`around-tab__item ${current === index ? 'active' : ''}`}
                    onClick={() => this.setState({ current: index })}
                  >

                    <View>
                      <View style={{ width: '100px', textAlign: 'center' }}>  {`${apartmentName}(${buildingImgList.length})`} </View>
                    </View>
                  </View>
                )
              })}
            </View>
          </View>
        </ScrollView>
        <View className='photos__item'>
          {imgList.map((item, index) => {
            console.log(item, '299999933333222')
            return (
              <Image className='photos__item-img' src={getThumbnail(item.url)} mode='widthFix' onClick={this.previewImage.bind(this, item.url, _photosImgs)}></Image>
            )
          })}
        </View>
      </View>
    );
  }
}