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 './follow.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: {},
      searchIndex: -1,
      searchText1: '',
      searchText2: '',
      searchText3: '',
      searchText4: '',
      searchText5: '',
      curPos: 'metro_line',
      curMetroLine: '',
      curMetroType: [],
      curAreaType: [],
      curHousePriceRange: [],
      curHouseTypeRange: [],
      houseAreaCur: [],
      productTypeCur: [],
      parkTypeCur: [],
      highStreetCur: [],
      hospitalTypeCur: [],
    }
  }

  config = {
    navigationBarTitleText: '我关注的楼盘',
  }

  componentWillMount () {
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }

  renderSearch () {
    const { searchKey } = this.state
    return (
      <AtSearchBar
        value={searchKey}
        fixed={true}
        placeholder="请输入楼盘名称"
        onChange={this.onSeachChange.bind(this)}
        onActionClick={this.onSelectActionClick.bind(this)}
        onClear={this.onClearHandle.bind(this)}
      />
    )
  }
  onSeachChange (value) {
    this.setState({
      searchKey: value
    })
  }
  onClearHandle () {
    this.setState({
      searchKey: '',
      page: 1
    }, () => {
      this.getDataList()
    })
  }
  onSelectActionClick () {
    this.setState({
      page: 1,
    }, () => {
      this.getDataList()
    })
  }

  searchIndex1Render () {
    const { curPos, curMetroLine, curMetroType, curAreaType } = this.state
    const dictData = Taro.getStorageSync('dictData')
    let metroLineViews = dictData.metro_line.map(item => {
      return (
        <View key={item.val} className={curMetroLine === item.val ? 'stc-op cur' : 'stc-op'} onClick={this.metroLineHandle.bind(this, item)}>{item.key}</View>
      )
    })
    const edIcon = require('@img/images/icon_g_ed.png')
    let curMetroTypeViews = null
    if (curMetroLine) {
      let curMetroTypeArr = []
      dictData.metro_type.forEach(item => {
        if (item.option1 === String(curMetroLine)) {
          curMetroTypeArr.push(item)
        }
      })
      curMetroTypeViews = curMetroTypeArr.map(item => {
        let curClassName = "stc-op"
        curMetroType.forEach(curVal =>{
          if (curVal === item.val) {
            curClassName = "stc-op cur"
          }
        })
        return (
          <View key={item.val} className={curClassName} onClick={this.metroTypeHandle.bind(this, item)}>{item.key}
            <Image className="img" src={edIcon} />
          </View>
        )
      })
    }
    let metroTypeAllClassName = curMetroType.length === 0 ? 'stc-op cur' : 'stc-op'
    const areaTypeViews = dictData.area_type.map(item =>{
      let curClassName = "op"
      curAreaType.forEach(curVal =>{
        if (curVal === item.val) {
          curClassName = "op cur"
        }
      })
      return (
        <View className={curClassName} key={item.val} onClick={this.areaTypeHandle.bind(this, item)}>{item.key}</View>
      )
    })
    let areaTypeAllClassName = curAreaType.length === 0 ? 'op cur' : 'op'
    return (
      <View className="stc-wrap">
        <View className="stc-item">
          <View className={curPos === 'metro_line' ? 'stc-op cur' : 'stc-op'} onClick={this.posHandle.bind(this, 'metro_line')}>地铁</View>
          <View className={curPos === 'area_type' ? 'stc-op cur' : 'stc-op'}  onClick={this.posHandle.bind(this, 'area_type')}>区域</View>
        </View>
        {
          curPos === 'metro_line'
          &&
          <View className="stc-item-sub">
            <View className="stc-item">
              {/* <View className={curMetroLine === '' ? 'stc-op cur' : 'stc-op'} onClick={this.metroLineHandle.bind(this, {val: ''})}>不限</View> */}
              {metroLineViews}
            </View>
            <View className="stc-item">
              {
                curMetroLine
                &&
                <View className={metroTypeAllClassName} onClick={this.metroTypeHandle.bind(this, 'all')}>不限</View>
              }
              {curMetroTypeViews}
            </View>
          </View>
        }
        {
          curPos === 'area_type'
          &&
          <View className="stc-pane">
            <View className={areaTypeAllClassName} onClick={this.areaTypeHandle.bind(this, 'all')}>不限</View>
            {areaTypeViews}
          </View>
        }
      </View>
    )
  }
  posHandle (str) {
    this.setState({
      curPos: str,
      curMetroLine: '',
      curMetroType: [],
      curAreaType: [],
    })
  }
  metroLineHandle (item) {
    this.setState({
      curMetroLine: item.val,
      curMetroType: [],
    })
  }
  metroTypeHandle (curOp) {
    if (curOp === 'all') {
      this.setState({
        curMetroType: []
      })
    } else {
      let { curMetroType } = this.state
      let ed = false
      let curI = 0
      curMetroType.forEach((item, index) => {
        if (curOp.val === item) {
          ed = true
          curI = index
        }
      })
      if (ed) {
        curMetroType.splice(curI, 1)
      } else {
        curMetroType.push(curOp.val)
      }
      this.setState({
        curMetroType
      })
    }
  }
  areaTypeHandle (curOp) {
    if (curOp === 'all') {
      this.setState({
        curAreaType: []
      })
    } else {
      let { curAreaType } = this.state
      let ed = false
      let curI = 0
      curAreaType.forEach((item, index) => {
        if (curOp.val === item) {
          ed = true
          curI = index
        }
      })
      if (ed) {
        curAreaType.splice(curI, 1)
      } else {
        curAreaType.push(curOp.val)
      }
      this.setState({
        curAreaType
      })
    }
  }



  searchIndex2Render () {
    const { curHousePriceRange } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const edIcon = require('@img/images/icon_g_ed.png')
    const rangeViews = dictData.house_price_range.map(item =>{
      let curClassName = "stc-op"
      curHousePriceRange.forEach(curVal =>{
        if (curVal === item.val) {
          curClassName = "stc-op cur"
        }
      })
      return (
        <View className={curClassName} key={item.val} onClick={this.housePriceRangeHandle.bind(this, item)}>{item.key}
          <Image className="img" src={edIcon} />
        </View>
      )
    })
    let allClassName = curHousePriceRange.length === 0 ? 'stc-op cur' : 'stc-op'
    return (
      <View className="stc-wrap">
        <View className="stc-item">
          <View className={allClassName} onClick={this.housePriceRangeHandle.bind(this, 'all')}>不限</View>
          {rangeViews}
        </View>
      </View>
    )
  }
  housePriceRangeHandle (curOp) {
    if (curOp === 'all') {
      this.setState({
        curHousePriceRange: []
      })
    } else {
      let { curHousePriceRange } = this.state
      let ed = false
      let curI = 0
      curHousePriceRange.forEach((item, index) => {
        if (curOp.val === item) {
          ed = true
          curI = index
        }
      })
      if (ed) {
        curHousePriceRange.splice(curI, 1)
      } else {
        curHousePriceRange.push(curOp.val)
      }
      this.setState({
        curHousePriceRange
      })
    }
  }

  searchIndex3Render () {
    const { curHouseTypeRange } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const edIcon = require('@img/images/icon_g_ed.png')
    const rangeViews = dictData.house_type.map(item =>{
      let curClassName = "stc-op"
      curHouseTypeRange.forEach(curVal =>{
        if (curVal === item.val) {
          curClassName = "stc-op cur"
        }
      })
      return (
        <View className={curClassName} key={item.val} onClick={this.houseTypeRangeHandle.bind(this, item)}>{item.key}
          <Image className="img" src={edIcon} />
        </View>
      )
    })
    let allClassName = curHouseTypeRange.length === 0 ? 'stc-op cur' : 'stc-op'
    return (
      <View className="stc-wrap">
        <View className="stc-item">
          <View className={allClassName} onClick={this.houseTypeRangeHandle.bind(this, 'all')}>不限</View>
          {rangeViews}
        </View>
      </View>
    )
  }
  houseTypeRangeHandle (curOp) {
    if (curOp === 'all') {
      this.setState({
        curHouseTypeRange: []
      })
    } else {
      let { curHouseTypeRange } = this.state
      let ed = false
      let curI = 0
      curHouseTypeRange.forEach((item, index) => {
        if (curOp.val === item) {
          ed = true
          curI = index
        }
      })
      if (ed) {
        curHouseTypeRange.splice(curI, 1)
      } else {
        curHouseTypeRange.push(curOp.val)
      }
      this.setState({
        curHouseTypeRange
      })
    }
  }


  searchIndex4Render () {
    const dictData = Taro.getStorageSync('dictData')
    // 房屋面积
    const { houseAreaCur } = this.state
    const house_area = dictData.house_area || []
    const houseAreaViews = house_area.map(item =>{
      let curClassName = "mp-op"
      houseAreaCur.forEach(curVal =>{
        if (curVal === item.val) {
          curClassName = "mp-op cur"
        }
      })
      return (
        <View className={curClassName} key={item.val} onClick={this.comSelectHandle.bind(this, item, 'houseAreaCur')}>{item.key}</View>
      )
    })
    const houseAreaAllClassName = houseAreaCur.length === 0 ? 'mp-op cur' : 'mp-op'
    // 产品类型
    const { productTypeCur } = this.state
    const product_type = dictData.product_type || []
    const productTypeViews = product_type.map(item =>{
      let curClassName = "mp-op"
      productTypeCur.forEach(curVal =>{
        if (curVal === item.val) {
          curClassName = "mp-op cur"
        }
      })
      return (
        <View className={curClassName} key={item.val} onClick={this.comSelectHandle.bind(this, item, 'productTypeCur')}>{item.key}</View>
      )
    })
    const productTypeAllClassName = productTypeCur.length === 0 ? 'mp-op cur' : 'mp-op'
    return (
      <View className="more-pane">
        <View className="mp-item">
          <View className="mp-title">房屋面积</View>
          <View className="mp-content">
            <View className={houseAreaAllClassName} onClick={this.comSelectHandle.bind(this, 'all', 'houseAreaCur')}>不限</View>
            {houseAreaViews}
          </View>
        </View>
        <View className="mp-item">
          <View className="mp-title">产品类型</View>
          <View className="mp-content">
            <View className={productTypeAllClassName} onClick={this.comSelectHandle.bind(this, 'all', 'productTypeCur')}>不限</View>
            {productTypeViews}
          </View>
        </View>
      </View>
    )
  }
  comSelectHandle (curOp, str) {
    if (curOp === 'all') {
      this.setState({
        [str]: []
      })
    } else {
      const state = this.state
      let curStr = state[str]
      let ed = false
      let curI = 0
      curStr.forEach((item, index) => {
        if (curOp.val === item) {
          ed = true
          curI = index
        }
      })
      if (ed) {
        curStr.splice(curI, 1)
      } else {
        curStr.push(curOp.val)
      }
      this.setState({
        [str]: curStr
      })
    }
  }


  renderTop () {
    const { searchIndex, searchText1, searchText2, searchText3, searchText4 } = this.state
    return (
      <View className="l-search-top t2">
        <View className="st-nav">
          <View className={(searchIndex === 1 || searchText1) ? 'stn-op col-4 cur' : 'stn-op col-4'} onClick={this.searchNavHandle.bind(this, 1)}>
            <View className="stn-label">{searchText1 || '位置'}</View>
            <View className="stn-sign"></View>
          </View>
          <View className={(searchIndex === 2 || searchText2) ? 'stn-op col-4 cur' : 'stn-op col-4'} onClick={this.searchNavHandle.bind(this, 2)}>
            <View className="stn-label">{searchText2 || '均价'}</View>
            <View className="stn-sign"></View>
          </View>
          <View className={(searchIndex === 3 || searchText3) ? 'stn-op col-4 cur' : 'stn-op col-4'} onClick={this.searchNavHandle.bind(this, 3)}>
            <View className="stn-label">{searchText3 || '户型'}</View>
            <View className="stn-sign"></View>
          </View>
          <View className={(searchIndex === 4 || searchText4) ? 'stn-op col-4 cur' : 'stn-op col-4'} onClick={this.searchNavHandle.bind(this, 4)}>
            <View className="stn-label">{searchText4 || '更多'}</View>
            <View className="stn-sign"></View>
          </View>
        </View>
        <View className={searchIndex > 0 ? searchIndex === 4 ? 'st-content show more' : 'st-content show' : 'st-content'}>
          {
            searchIndex === 1
            &&
            this.searchIndex1Render()
          }
          {
            searchIndex === 2
            &&
            this.searchIndex2Render()
          }
          {
            searchIndex === 3
            &&
            this.searchIndex3Render()
          }
          {
            searchIndex === 4
            &&
            this.searchIndex4Render()
          }
          <View className="l-floor-footer t2">
            <View className="lff-flex">
              <View className="lff-btn t3" onClick={this.resetHandle.bind(this)} >重置</View>
              <View className="lff-btn" onClick={this.saveHandle.bind(this)}>搜索</View>
            </View>
          </View>
        </View>
      </View>
    )
  }
  searchNavHandle (index) {
    let { searchIndex } = this.state
    searchIndex = index === searchIndex ? -1 : index
    this.setState({
      searchIndex
    })
  }
  resetHandle () {
    const { searchIndex } = this.state
    // this.setState({
    //   searchIndex: -1
    // })
    if (searchIndex === 1) {
      this.setState({
        searchText1: '',
        curPos: 'metro_line',
        curMetroLine: '',
        curMetroType: [],
        curAreaType: [],
      })
    }
    if (searchIndex === 2) {
      this.setState({
        searchText2: '',
        curHousePriceRange: [],
      })
    }
    if (searchIndex === 3) {
      this.setState({
        searchText3: '',
        curHouseTypeRange: [],
      })
    }
    if (searchIndex === 4) {
      this.setState({
        searchText4: '',
        houseAreaCur: [],
        productTypeCur: [],
        parkTypeCur: [],
        highStreetCur: [],
        hospitalTypeCur: [],
      })
    }
  }
  saveHandle () {
    const dictData = Taro.getStorageSync('dictData')
    const {
      searchIndex,
      curMetroLine,
      curMetroType,
      curAreaType,
      curHousePriceRange,
      curHouseTypeRange,
      houseAreaCur,
      productTypeCur,
      parkTypeCur,
      highStreetCur,
      hospitalTypeCur,
    } = this.state
    if (searchIndex === 1) {
      let tagArr = []
      if (curMetroLine) tagArr.push(arrToObj(dictData.metro_line)[curMetroLine])
      curMetroType.forEach(v => {
        tagArr.push(arrToObj(dictData.metro_type)[v])
      })
      curAreaType.forEach(v => {
        tagArr.push(arrToObj(dictData.area_type)[v])
      })
      if (tagArr) {
        this.setState({
          searchText1: tagArr.join(',')
        })
      }
    }
    if (searchIndex === 2) {
      let tagArr = []
      curHousePriceRange.forEach(v => {
        tagArr.push(arrToObj(dictData.house_price_range)[v])
      })
      if (tagArr) {
        this.setState({
          searchText2: tagArr.join(',')
        })
      }
    }
    if (searchIndex === 3) {
      let tagArr = []
      curHouseTypeRange.forEach(v => {
        tagArr.push(arrToObj(dictData.house_type)[v])
      })
      if (tagArr) {
        this.setState({
          searchText3: tagArr.join(',')
        })
      }
    }
    if (searchIndex === 4) {
      let tagArr = []
      houseAreaCur.forEach(v => {
        tagArr.push(arrToObj(dictData.house_area)[v])
      })
      productTypeCur.forEach(v => {
        tagArr.push(arrToObj(dictData.product_type)[v])
      })
      parkTypeCur.forEach(v => {
        tagArr.push(arrToObj(dictData.park_type)[v])
      })
      highStreetCur.forEach(v => {
        tagArr.push(arrToObj(dictData.high_street)[v])
      })
      hospitalTypeCur.forEach(v => {
        tagArr.push(arrToObj(dictData.hospital_type)[v])
      })
      if (tagArr) {
        this.setState({
          searchText4: tagArr.join(',')
        })
      }
    }
    this.setState({
      page: 1,
      searchIndex: -1,
    }, () => {
      this.getDataList()
    })
  }

  getDataList () {
    let { page_size, page, dataList, isListEmpty } = this.state
    const { type: module_type } = this.$router.params
    const { searchKey } = this.state
    const {
      curMetroLine,
      curMetroType,
      curAreaType,
      curHousePriceRange,
      curHouseTypeRange,
      houseAreaCur,
      productTypeCur,
      parkTypeCur,
      highStreetCur,
      hospitalTypeCur,
    } = this.state
    Taro.api.house.apiestatefollowlist({
      page,
      page_size,
      // estate_name: searchKey,
      // metro_line: curMetroLine,
      // metro_type: curMetroType.join(','),
      // area_type: curAreaType.join(','),
      // price_range: curHousePriceRange.join(','),
      // house_type: curHouseTypeRange.join(','),
      // house_area: houseAreaCur.join(','),
      // product_type: productTypeCur.join(','),
      // park_type: parkTypeCur.join(','),
      // high_street: highStreetCur.join(','),
      // hospital_type: hospitalTypeCur.join(','),
      // module_type,
    }).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 dictData = Taro.getStorageSync('dictData')
    const itemsList = dataList.map((item, index) => {
      const product_type = item.product_type || ''
      const productTypeArr = product_type.split(',').map(v => {
        return arrToObj(dictData.product_type)[v]
      })
      const cTagStr = item.custom_tag || ''
      const tagViews = cTagStr.split(',').map((tag, tagIndex) => {
        return (
          <View className="s" key={tagIndex}>{tag}</View>
        )
      })
      return (
        <Navigator url={'/pagesHouse/indexDtl?id=' + item.id} className="lhl-item col-1" key={index}>
          <View className="lhl-img">
            <Image src={item.pri_image + '_xs'} className="img" />
          </View>
          <View className="lhl-info">
            <View className="lhl-p1">{item.estate_name}</View>
            <View className="lhl-p2">{item.price_range || "未知"}/㎡</View>
            <View className="lhl-p3">{arrToObj(dictData.area_type)[item.area_type]}  {productTypeArr.length > 0 ? `-${productTypeArr.join('/')}` : ''}</View>
            <View className="lhl-sign">
              {
                item.estate_tag === '售罄'
                ? <View className="s t4">{item.estate_tag}</View>
                : item.estate_tag === '待售'
                ? <View className="s t3">{item.estate_tag}</View>
                : <View className="s t2">{item.estate_tag}</View>
              }
              {tagViews}
            </View>
          </View>
        </Navigator>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="l-house-list">
          {itemsList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }


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

export default Index
