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

import { getItemList } from '@services/item'
import { getCardList } from '@services/card'
import { queryNewsList } from '@services/news'
import { buildingDynamiceList } from '@services/activity'
import ProjectItem from '../../project/item'
import NewsItem from '../../news/item'

import ActivityItem from '../../activity/item'

export default class Index extends Component {
  config = {
    navigationBarTitleText: '我的收藏'
  }

  state = {
    current: 1,
    typeList: [
      {
        name: '楼盘',
        id: 1
      },
      // {
      //   name: '置业顾问',
      //   id: 2
      // },
      {
        name: '资讯',
        id: 3
      },
      {
        name: '活动',
        id: 4
      }
    ],
    houseList: [],
    cardList: [],
    newsList: [],
    activityList: []
  }

  componentDidShow() {
    this.loadData()
  }

  loadData() {
    const payload = {
      pageNumber: 1,
      pageSize: 20,
      mine: true
    }
    Promise.all([
      getItemList(payload),
      // getCardList(payload),
      queryNewsList(payload),
      buildingDynamiceList(payload),
    ]).then(res => {
      this.setState({
        houseList: (res[0] && res[0].records) || [],
        // cardList: (res[1] && res[1].records) || [],
        newsList: (res[1] && res[1].records) || [],
        activityList: (res[2] && res[2].records) || [],
      })
    })
  }

  handdleToggleClick(type) {
    this.setState({
      current: type
    })
  }

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

  handleProItemClick(item) {
    Taro.navigateTo({
      url: `/pages/project/detail/index?id=${item.buildingId}`
    })
  }

  renderHouseList() {
    const { houseList } = this.state
    return (
      <Block>
        {
          houseList.length > 0 ? houseList.map(item => (
            <ProjectItem
              key={item.id}
              data={item}
              onClick={this.handleProItemClick.bind(this, item)}>
            </ProjectItem>
          )) : <View className="empty">暂无楼盘收藏</View>
        }
      </Block>
    )
  }

  handleActivityItemClick = (item) => {
    if(item.status==0){
      Taro.showToast({
        title: '当前活动已失效',
        icon: 'none'
      })
    }else{
      Taro.navigateTo({
        url: '/pages/activity/detail/index?id=' + item.dynamicId
      })
    }
   
  }

  handleNewsItemClick = (item) => {
    Taro.navigateTo({
      url: '/pages/news/detail/index?id=' + item.newsId
    })
  }

  renderCardList() {
    const { cardList } = this.state
    return (
      <Block>
        {cardList.map(item => (
          <View className="card-item" key={item.id} onClick={this.navigateTo.bind(this, '/pages/card/index?id=' + item.id)}>
            <View className="flex">
              <Image className="avatar" mode="aspectFill" src={item.avatar || item.photo}></Image>
              <Text className="name">{item.name}</Text>
            </View>
            <View className="flex item-btn__box">
              <Button className="item-btn tel" onClick={this.handleTelClick.bind(this, item)}>
                <Text className="iconfont icon-dianhua1"></Text>
              </Button>
              <Button className="item-btn chat" onClick={this.handleChatClick.bind(this, item)}>
                <Text className="iconfont icon-chat"></Text>
              </Button>
            </View>
          </View>
        ))}
      </Block>
    )
  }

  renderActivityList() {
    const { activityList } = this.state

    return (
      <Block>
        {
          activityList.length > 0 ? activityList.map(item => (
            <ActivityItem
              data={item}
              key={item.dynamicId}
              onClick={this.handleActivityItemClick}>
            </ActivityItem>
          )) : <View className="empty">暂无活动收藏</View>
        }
      </Block>
    )
  }

  renderNewsList() {
    const { newsList } = this.state
    return (
      <Block>
        {
          newsList.length > 0 ? newsList.map(item => (
            <NewsItem
              key={item.newsId}
              data={item}
              onClick={this.handleNewsItemClick}
            ></NewsItem>
          )) : <View className="empty">暂无资讯收藏</View>
        }
      </Block>
    )
  }

  render() {
    const { typeList, current } = this.state
    return (
      <View className="page">
        <View className="filter">
          {
            typeList.map(item => (
              <Text key={item.id} className={current === item.id ? 'item selected' : 'item'} onClick={this.handdleToggleClick.bind(this, item.id)}>{item.name}</Text>
            ))
          }
        </View>
        <ScrollView
          scrollY
          className="body"
          style={{
            height: '86vh'
          }}
        >
          <View className="wrap">
            {current === 1 && this.renderHouseList()}
            {current === 2 && this.renderCardList()}
            {current === 3 && this.renderNewsList()}
            {current === 4 && this.renderActivityList()}
          </View>
        </ScrollView>

      </View>
    );
  }
}