import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Navigator } from '@tarojs/components'

import ListMore from '@/c/pageDataList/listMore'
import './message.scss'
import { arrToObj } from '@utils'

class Index extends Component {

  constructor (props) {
    super(props)
    this.state = {          
      page_size: 10,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
    }
  }

  config = {
    navigationBarTitleText: '我的消息',
  }

  componentWillMount () {
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }

  getDataList () {
    const HideMan = require('@img/icon_hide_man.png')
    let { page_size, page, dataList, isListEmpty } = this.state
    Taro.api.other.notifylist({
      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
      }
      // dataList.map(item => {
      //   if (item.is_anon === '1') {
      //     item.nickname = '匿名粉丝'
      //     item.avatar = HideMan
      //   }
      // })
      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 { dataList, isListEnd, isListLoading, isListEmpty } = this.state
    const itemList = dataList.map((item, index) => {
      let curTypeStr = ''
      if (item.action === 1 || item.action === 2) curTypeStr = '楼盘评论'
      if (item.action === 3 || item.action === 4) curTypeStr = '学校评论'
      if (item.action === 5 || item.action === 6) curTypeStr = '提问'
      const targetCont = item.target_cont.length > 11 ? item.target_cont.substring(0, 11) + '...' : item.target_cont
      return (
        <View className="sm-item" key={index} onClick={this.linkDtlMore.bind(this, item)}>
          <View className="sm-img">
            <Image className="img" src={item.avatar} />
          </View>
          <View className="sm-info">
            <View className="sm-p1">
              <View className="n">{item.nickname}</View>  
              {
                item.action === 1 || item.action === 3 || item.action === 5
                ? `回复了你的${curTypeStr}`
                : ''
              }
            </View>
            <View className="sm-p2">{item.content}{(item.action === 2 || item.action === 4 || item.action === 6)  ? `的${curTypeStr}` : ''}</View>
            <View className="sm-p3">{item.create_at}</View>
          </View>
          <View className="sm-right">{targetCont}</View>
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="scoped-message">
          {itemList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }

  linkDtlMore (item) {
    if (item.action === 1 || item.action === 2) {
      Taro.navigateTo({
        url: `/pagesMore/comment/dtl?id=${item.target_id}&estateId=${item.option_id}`
      })
    }
    if (item.action === 3 || item.action === 4) {
      Taro.navigateTo({
        url: `/pagesMore/comment/dtl?id=${item.target_id}&schoolId=${item.option_id}`
      })
    }
    if (item.action === 5 || item.action === 6) {
      Taro.navigateTo({
        // url: `/pagesMore/qa/dtl?id=${item.target_id}`
        url: `/pagesQa/dtl?id=${item.target_id}`
      })
    }
    if (item.action === 7 || item.action === 8) {
      Taro.navigateTo({
        url: `/pagesQa/dtl?id=${item.target_id}`
      })
    }
  }
  // pagesMore/comment/dtl
  render () {
    return (
      <View className="l-box">
        {this.renderList()}
      </View>
    )
  }
}

export default Index
