import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Navigator } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
import ListMore from '@/c/pageDataList/listMore'
import './estateTrendRecord.scss'
import { arrToObj } from '@utils'

class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      searchKey: '',
      page_size: 10,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
      curNav: 1,
      isDShow: false,
      curObj: {},
    }
  }

  config = {
    navigationBarTitleText: '动态趋势记录',
  }

  componentWillMount () {
    Taro.$AHU(this)
    const { t } = this.$router.params
    Taro.setNavigationBarTitle({
      title: t
    })
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }



  renderSearch () {
    const { searchKey } = this.state
    let placeholderText = '模糊搜索楼盘名称'
    return (
      <View>
        <AtSearchBar
          fixed={true}
          value={searchKey}
          placeholder={placeholderText}
          onChange={this.onSeachChange.bind(this)}
          onClear={this.onClearHandle.bind(this)}
          onActionClick={this.onSelectActionClick.bind(this)}
        />
      </View>
    )
  }
  onSeachChange (value) {
    this.setState({
      searchKey: value
    })
  }
  onClearHandle () {
    this.setState({
      searchKey: '',
      page: 1
    }, () => {
      this.getDataList()
    })
  }
  onSelectActionClick () {
    this.setState({
      page: 1,
    }, () => {
      this.getDataList()
    })
  }



  getDataList () {
    const { id } = this.$router.params
    let { page_size, page, dataList, isListEmpty, searchKey } = this.state
    Taro.api.other.apiestatehousedynamiclog({
      id,
      page,
      page_size,
    }).then(res => {
      const curData = res.list || []
      let isListEnd = false
      if (curData.length > 0) {
        if (page === 1) {
          dataList = curData
        } else {
          dataList = dataList.concat(curData)
        }
        if (curData.length === page_size && res.total !== curData.length) {
          isListEnd = false
        } else {
          isListEnd = true
        }
      }
      if (curData.length === 0 && page === 1) {
        isListEmpty = true
        dataList = []
      } else {
        isListEmpty = false
      }
      this.setState({
        dataList,
        isListEnd,
        isListEmpty,
        isListLoading: false
      })
    })
  }
  onScrollToLower (e) {
    let { isListEnd, isListLoading, page } = this.state
    if (!isListEnd && !isListLoading) {
      page++
      this.setState({
        page,
        isListLoading: true
      }, () => {
        this.getDataList()
      })
    }
  }

  renderList () {
    const dictData = Taro.getStorageSync('dictData')
    const ptObj = arrToObj(dictData.product_type)
    const { dataList, isListEnd, isListLoading, isListEmpty } = this.state
    const itemsList = dataList.map((item, index) => {
      return (
        <View className="sl-item" key={index}>
          <View>
            <View className="p1">[{item.create_by}]{item.create_at}</View>
            <View className="p-one">
              <View className="po-l">价格区间:</View>
              <View className="po-r t1">{item.price_min}元-{item.price_max}元</View>
            </View>
            <View className="p-one">
              <View className="po-l">最新动态:</View>
              <View className="po-r">
                {
                  item.dynamic_img
                  ? <Image src={item.dynamic_img} onClick={this.previewImageHandle.bind(this, item.dynamic_img)} className="img"/>
                  : ''
                }
                {item.dynamic || '未知'}
                {
                  item.isMoreShow
                  ? <View className="por-btn" onClick={this.moreShowHideHandle.bind(this, index)}>收起</View>
                  : <View className="por-btn" onClick={this.moreShowHideHandle.bind(this, index)}>展开</View>
                }
              </View>
            </View>
            {
              item.isMoreShow
              ?
              <View className="more">
                <View className="p-one">
                  <View className="po-l">现场折扣:</View>
                  <View className="po-r">{item.scene_discount || '未知'}</View>
                </View>
                <View className="p-one">
                  <View className="po-l">实际折扣:</View>
                  <View className="po-r">{item.actual_discount || '未知'}</View>
                </View>
                <View className="p-one">
                  <View className="po-l">在售楼栋:</View>
                  <View className="po-r">{item.on_sale || '未知'}</View>
                </View>
                <View className="p-one">
                  <View className="po-l">待售楼栋:</View>
                  <View className="po-r">{item.for_sale || '未知'}</View>
                </View>
                <View className="p-one">
                  <View className="po-l">推荐房源:</View>
                  <View className="po-r">{item.recommend || '未知'}</View>
                </View>
              </View>
              : ''
            }
          </View>
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="scoped-list">
          {itemsList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }
  

  linkUpdate (item) {
    const dictData = Taro.getStorageSync('dictData')
    const ptObj = arrToObj(dictData.product_type)
    Taro.navigateTo({
      url: `/pagesRoom/estateTrendUpdate?id=${item.id}&t=${item.house_square}㎡-${item.estate_name}[${ptObj[item.product_type]}]`
    })
  }
  
  moreShowHideHandle (index) {
    let { dataList } = this.state
    dataList[index].isMoreShow = !dataList[index].isMoreShow
    this.setState({
      dataList
    })
  }
  previewImageHandle (url) {
    const imgUrl = url
    Taro.previewImage({
      current: imgUrl,
      urls: [imgUrl]
    })
  }

  callHandle (phoneNumber) {
    Taro.makePhoneCall({
      phoneNumber
    })
  }

  render () {
    return (
      <View className="l-box">
        {this.renderList()}
      </View>
    )
  }
}

export default Index