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 RadioSelect from '@/c/lform/RadioSelect'
import './list.scss'
import { arrToObj } from '@utils'

class Index extends Component {
  onShareAppMessage(res) {
    let rObj = {
      title: '洪楼Plus-南昌楼市测评-动态资讯-学区地铁',
    }
    const exImg = require('@img/images/share_img.jpg')
    const target = res.target || {}
    if (res.from === 'button') {
      const cItem = target.dataset.value || {}
      rObj = {
        title: cItem.title || '推荐这篇文章给你看看',
        path: `/pagesMore/news/indexDtl?id=${cItem.id}`,
        imageUrl: exImg
      }
    }
    return rObj
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }

  constructor (props) {
    super(props)
    this.state = {
      searchKey: '',          
      page_size: 10,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
      curNav: 1,
      curObj: {},
      searchText: '',
      curVal: '',
      isRSShow: false,
    }
  }

  config = {
    navigationBarTitleText: '洪楼Plus',
    // navigationStyle: 'custom',
    // navigationBarTextStyle: 'white'
  }

  componentWillMount () {
    const { name } = this.$router.params
    Taro.setNavigationBarTitle({
      title: name || '洪楼Plus'
    })
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }

  renderSearch () {
    const { searchKey } = this.state
    return (
      <AtSearchBar
        className="scoped-fixed"
        value={searchKey}
        placeholder="请输入文章标题"
        onChange={this.onSeachChange.bind(this)}
        onClear={this.onClearHandle.bind(this)}
        onActionClick={this.onSelectActionClick.bind(this)}
      />
    )
  }
  onSeachChange (value) {
    this.setState({
      searchKey: value
    })
  }
  onClearHandle () {
    this.setState({
      searchKey: '',
      page: 1
    }, () => {
      this.getDataList()
    })
  }
  onSelectActionClick () {
    this.setState({
      page: 1,
    }, () => {
      this.getDataList()
    })
  }

  renderOtherTop () {
    const { type } = this.$router.params
    const { searchText } = this.state
    return (
      <View className="scoped-top">
        {
          type === 'bkfx'
          &&
          <View onClick={this.openRSPopup.bind(this)} className={searchText ? 'st-input' : 'st-input un'}>{searchText || '请选择搜索的板块>>'}</View>
        }
        {
          type === 'lppc'
          &&
          <View onClick={this.openRSPopup.bind(this)} className={searchText ? 'st-input' : 'st-input un'}>{searchText || '请选择搜索的楼盘>>'}</View>
        }
      </View>
    )
  }


  getDataList () {
    let { page_size, page, dataList, isListEmpty } = this.state
    const { 
      searchKey,
      curVal
    } = this.state
    const { type } = this.$router.params
    let params = {
      page,
      page_size,
      title: searchKey,
      information_category: type,
      hide_status: '1',
    }
    if (type === 'bkfx') params.area_type = curVal
    if (type === 'lppc') params.estate_id = curVal
    Taro.api.news.adminformationlist(params).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 { dataList, isListEnd, isListLoading, isListEmpty } = this.state
    const exImg = require('@img/images/ex_banner.jpg')
    const btnShare = require('./img/btn_share.png')
    const itemsList = dataList.map((item, index) => {
      const curImg = item.pri_image ? `${item.pri_image}_xs` : exImg
      return (
        <View className="lb-item" key={index}>
          <Navigator url={'/pagesMore/news/indexDtl?id=' + item.id} className="lb-img">
            <Image className="img" src={curImg} />
          </Navigator>
          <View className="lb-info">
            <Navigator url={'/pagesMore/news/indexDtl?id=' + item.id} className="lb-p1">{item.title}</Navigator>
            <View className="lb-p2">{item.create_at.substring(0, 10)}  {item.author || '洪楼News'}
            <Button className="scoped-share-btn btn-to-div" openType="share" id={item.id} data-value={item}>
              <Image className="img" src={btnShare} />
            </Button>
            </View>
          </View>
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="l-list-box tnews">
          {itemsList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }

  openRSPopup (e) {
    this.setState({
      isRSShow: true
    })
  }
  dealRSPopup (curVal, curRadioObj) {
    this.closeRSPopup()
    if (curVal && curRadioObj) {
      this.setState({
        curVal,
        page: 1,
        searchText: curRadioObj.label,
      }, () => {
        this.getDataList()
      })
    } else {
      this.setState({
        curVal: '',
        page: 1,
        searchText: '',
      }, () => {
        this.getDataList()
      })
    }
  }
  closeRSPopup () {
    this.setState({
      isRSShow: false
    })
  }

  render () {
    const dictData = Taro.getStorageSync('dictData')
    const { type } = this.$router.params
    let comMoreOptions = {arr: []}
    if (type === 'bkfx') {
      comMoreOptions = JSON.parse(JSON.stringify({arr: dictData.area_type}))
    }
    if (type === 'lppc') {
      comMoreOptions = JSON.parse(JSON.stringify({skey: 'estate_name', api: `house.admestatelist?page_size=20`, opKey: 'estate_name', opVal: 'id'}))
    }
    const { curVal, isRSShow } = this.state
    const banner01 = require('./img/banner/fx_banner01.jpg')
    const banner02 = require('./img/banner/fx_banner02.jpg')
    const banner03 = require('./img/banner/fx_banner03.jpg')
    const banner04 = require('./img/banner/fx_banner04.jpg')
    const banner05 = require('./img/banner/fx_banner05.jpg')
    const b1 = require('./img/banner/fx_b1.jpg')
    const b2 = require('./img/banner/fx_b2.jpg')
    const b3 = require('./img/banner/fx_b3.jpg')
    const b4 = require('./img/banner/fx_b4.jpg')
    const b5 = require('./img/banner/fx_b5.jpg')
    const b6 = require('./img/banner/fx_b6.jpg')
    const b7 = require('./img/banner/fx_b7.jpg')
    let curImg = banner01
    // if (type === 'lppc') curImg = banner01
    if (type === 'lpwd') curImg = banner02
    if (type === 'hlzt') curImg = banner03
    if (type === 'bkfx') curImg = banner04
    if (type === 'hljy' || type === 'xqsc') curImg = banner05
    if (type === 'lppc') curImg = b1
    if (type === 'hlpd') curImg = b2
    if (type === 'lszt') curImg = b3
    if (type === 'zcjd') curImg = b4
    if (type === 'esf') curImg = b5
    if (type === 'lsdt') curImg = b6
    if (type === 'scfx') curImg = b7
    return (
      <View className="l-box">
        <Image className="scoped-top-img" src={curImg} />
        {
          type === 'bkfx' || type === 'lppc'
          ? this.renderOtherTop()
          : this.renderSearch()
        }
        <RadioSelect val={curVal} moreOptions={comMoreOptions} isShow={isRSShow} bc={this.dealRSPopup.bind(this)} close={this.closeRSPopup.bind(this)}/>
        {this.renderList()}
      </View>
    )
  }
}

export default Index
