import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import { deepClone } from '@utils/tools'
import { queryItemTypeList } from '@services/item'

import { connect } from '@tarojs/redux'
@connect(state => ({ ...state.city }))
export default class Index extends Component {
  static options = {
    addGlobalClass: true
  }

  state = {
    keywords: '',
    visible: false,
    tabIndex: null,
    priceTypeIndex: 0,
    selectedIndex: new Array(4).fill([0]),
    tabs: [
      {
        name: '户型',
        id: 'huxing',
        list: ['不限', '一室', '两室', '三室', '四室', '五室以上']
      },
      {
        name: '价格',
        id: 'price',
        list: ['不限', '10000元/㎡以下', '10000-20000元/㎡', '20000-30000元/㎡', '30000-50000元/㎡', '50000-70000元/㎡', '70000-100000元/㎡', '100000元/㎡以上']
        // list: [
        //   {
        //     name: '总价',
        //     id: 'totalPrice',
        //     list: ['不限', '100万以下', '100-150万', '150-200万', '200-500万', '500-1000万', '1000万以上']
        //   },
        //   {
        //     name: '单价',
        //     id: 'unitPrice ',
        //     list: ['不限', '10000/㎡以下', '10000-20000元/㎡', '20000-30000元/㎡', '30000-50000元/㎡', '50000-70000元/㎡', '70000-100000元/㎡', '100000元/㎡以上']
        //   }
        // ]
      },
      {
        name: '面积',
        id: 'area',
        list: ['不限', '50㎡以下', '50-70㎡', '70-90㎡', '90-110㎡', '110-130㎡', '130-150㎡', '150-200㎡', '200㎡以上']
      },
      {
        name: '类型',
        id: 'type',
        list: [

        ]
      }
    ]
  }

  componentWillMount() {
    const { tabs } = this.state
    queryItemTypeList().then(res => {
      let houseTypeList = res.records
      houseTypeList.unshift('不限')
      tabs[3].list = houseTypeList
      this.setState({ tabs })
    })
  }

  handlePriceTypeChange(index) {
    let { selectedIndex, tabIndex } = this.state
    selectedIndex[tabIndex] = [0]
    this.setState({
      selectedIndex,
      priceTypeIndex: index
    })
  }

  handleFilterItemClick(index) {
    let { selectedIndex, tabIndex } = this.state
    let _selectedIndex = deepClone(selectedIndex)
    let list = deepClone(selectedIndex[tabIndex])

    if (index === 0) {
      list.splice(0, 100, 0)
    } else {
      if (list.includes(0)) {
        list.splice(0, 1)
      }

      if (list.includes(index)) {
        list.splice(list.indexOf(index), 1)
      } else {
        list.splice(index, 0, index)
      }
    }

    _selectedIndex[tabIndex] = list

    this.setState({
      selectedIndex: _selectedIndex
    })
  }

  handleTabClick(tabIndex) {
    this.setState({
      tabIndex
    }, () => {
      if (!this.state.visible) {
        this.setState({
          visible: true
        })
      }
    })
  }

  handleLocationClick() {
    Taro.navigateTo({
      url: `/pages/city/index`
    })
  }

  handleFilter() {

    console.log("111")
    const { tabs, keywords, selectedIndex } = this.state
    console.log(this.state)
    let values = selectedIndex.map((selectedList, tabIndex) => {
      let curTab = tabs[tabIndex]
      let curTabList = curTab.list || []

      if (selectedList.length === 1 && selectedList[0] === 0) {
        return ''
      }

      // 类型
      if (tabIndex === 0) {
        let val = selectedList.map(index => curTabList[index])
        return val.join(',')
      }

      // 价格 面积
      if (tabIndex === 1 || tabIndex === 2) {
        let val = selectedList.map(index => {
          let value = curTabList[index]
          let regVal = value.match(/\d*([-\d]*)?/)
          value = regVal ? regVal[0] : ''

          // 最小值
          if (index === 1) {
            return '-' + value
          }

          // 最大值
          if (index === curTabList.length - 1) {
            return value + '-'
          }

          return value
        })

        return val.join(',')
      }

      // 类型
      if (tabIndex === 3) {
        let val = selectedList.map(index => curTabList[index].buildingTypeId)
        return val.join(',')
      }
    })
    console.log(values)
    let params = {
      name: keywords,
      houseType: values[0],
      price: values[1],
      area: values[2],
      buildingType: values[3],
    }
    console.log(params)
    this.props.onFilter(params, () => {
      this.hideFilter()
    })

  }

  hideFilter() {
    this.setState({
      visible: false
    })
  }

  handleMinPriceChange(e) {
    this.setState({
      minPrice: e.detail.value
    })
  }

  handleMaxPriceChange(e) {
    this.setState({
      maxPrice: e.detail.value
    })
  }
  onInputText = e => {
    this.setState({
      keywords: e.detail.value
    })
  }

  // renderPanel() {
  //   const { tabIndex } = this.state
  //   return (
  //     <Block>
  //       {tabIndex === 1 ? this.renderPrice() : this.renderList()}
  //     </Block>)
  // }

  renderList() {
    const { tabs, tabIndex, selectedIndex } = this.state
    return (
      <Block>
        {
          tabs[tabIndex].list.map((item, index) => (
            <View
              key={index}
              className={`row ${selectedIndex[tabIndex].includes(index) ? 'active' : ''}`}
              onClick={this.handleFilterItemClick.bind(this, index)}>
              {item.name || item.buildingTypeName || item}
              {
                (selectedIndex[tabIndex].includes(index)) && (
                  <Text className="icon-Paid iconfont"></Text>
                )
              }
            </View>
          ))
        }
      </Block>
    )
  }

  renderPrice() {
    const { priceTypeIndex, tabs, tabIndex, selectedIndex } = this.state
    const priceArr = tabs[1].list
    const list = priceArr[priceTypeIndex].list
    return (
      <View className="price">
        <View className="menu">
          {
            priceArr.map((item, index) => (
              <View
                key={item.id}
                className={`menu-item ${priceTypeIndex === index ? 'selected' : ''}`}
                onClick={this.handlePriceTypeChange.bind(this, index)}>{item.name}
              </View>
            ))
          }
        </View>
        <ScrollView scrollY className="content">
          {
            list.map((text, index) => (
              <View
                key={index}
                className={`price-item ${selectedIndex[tabIndex].includes(index) ? 'selected' : ''}`}
                onClick={this.handleFilterItemClick.bind(this, index)}>
                {text}
                {
                  (selectedIndex[tabIndex].includes(index)) && (
                    <Text className="icon-Paid iconfont"></Text>
                  )
                }
              </View>
            ))
          }
        </ScrollView>
      </View>
    )
  }

  renderTabs() {
    const { tabs, tabIndex } = this.state
    return (
      <Block>
        {
          tabs.map((item, index) => (
            <View key={item.id} className={`tab-item ${tabIndex === index ? 'selected' : ''}`} onClick={this.handleTabClick.bind(this, index)}>
              <Text>{item.name}</Text>
              <Text className={`iconfont ${tabIndex === index ? 'icon-shaixuanjiantou3' : 'icon-shaixuanjiantou2'}`}></Text>
            </View>
          ))
        }
      </Block>
    )
  }

  render() {
    const { visible, keywords } = this.state
    const { curCity } = this.props
    return (
      <View className={`filter ${visible ? 'unfold' : 'fold'}`}>
        <View className="mask" onClick={this.hideFilter}></View>

        <View className="search-box">
          <View className="search">
            <Text className="search-icon icon-sousuo iconfont"></Text>
            <Input className="search-input" type="text" focus confirm-type="搜索" onConfirm={this.handleFilter} value={keywords} onInput={this.onInputText.bind(this)} placeholder="请输入你想查询的楼盘"></Input>
          </View>
          <View className="location" onClick={this.handleLocationClick}>
            <Text className="location-icon iconfont icon-daohangdizhi"></Text>
            <Text className="location-text">{curCity.id ? curCity.name : '正在定位'}</Text>
          </View>
        </View>
        <View className="tab">
          {this.renderTabs()}
        </View>
        {
          visible && (
            <Block>
              <ScrollView
                scrollY
                className="panel">
                {this.renderList()}
              </ScrollView>

              <View className="confirm">
                {/* {this.renderConfirm()} */}
                <Button className="confirm-btn normal" onClick={this.handleFilter}>确定</Button>
              </View>
            </Block>
          )
        }
      </View>
    );
  }
}