import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import { connect } from '@tarojs/redux'
import ready from '@/utils/ready'
import { queryApartmentType } from '@/services/project'

@connect(
  ({ user }) => ({ ...user })
)

export default class Index extends Component {
  config = {
    navigationBarTitleText: '筛选房源',
  }

  state = {
    current: 0,
    priceCurrent: 0,
    startPrice: '100',
    endPrice: null,
    apartmentList: []
  }

  componentWillMount() {

    ready.queue(() => {
      const id = this.$router.params.id
      queryApartmentType({ salesBatchId: id }).then(res => {
        this.setState({
          apartmentList: res || []
        })
      })

    })
  }
  handleCondition(value) {
    this.setState({
      current: value,
    })
  }
  handlePriceItem(item) {
    this.setState({
      priceCurrent: item.value,
      startPrice: item.startPrice,
      endPrice: item.endPrice,
    })
  }
  renderPrice() {
    const { priceCurrent, startPrice, endPrice } = this.state
    const priceList = [
      { startPrice: null, endPrice: '100', value: 0 },
      { startPrice: '100', endPrice: '150', value: 1 },
      { startPrice: '150', endPrice: '200', value: 2 },
      { startPrice: '200', endPrice: '250', value: 3 },
      { startPrice: '250', endPrice: '300', value: 4 },
      { startPrice: '300', endPrice: '400', value: 5 },
      { startPrice: '400', endPrice: '500', value: 6 },
      { startPrice: '500', endPrice: '600', value: 7 },
      { startPrice: '600', endPrice: null, value: 8 },
    ]
    return (
      <View>
        <View className="price-con">
          {priceList.map(priceItem => (
            <View key={priceItem.value} className={priceCurrent == priceItem.value ? 'active-item' : 'price-item'} onClick={() => { this.handlePriceItem(priceItem) }}>
              {!priceItem.startPrice && <View className="item-con">{priceItem.endPrice}万以下</View>}
              {priceItem.startPrice && priceItem.endPrice && <View className="item-con">{priceItem.startPrice}万-{priceItem.endPrice}万</View>}
              {!priceItem.endPrice && <View className="item-con">{priceItem.startPrice}万以上</View>}
            </View>
          ))}
        </View>
        <View style="color:#666;font-size:28rpx;margin-left:40rpx">
          填写价格（万元）
        </View>
        <View className="search">
          <Input
            type="number"
            placeholder="最低价"
            class="search-input"
            placeholder-style="color:#dcdcdc;font-size:28rpx"
            maxlength="6"
            value={startPrice}
            onInput={() => this.handleInput}
          />
          <Text style="margin:0 8rpx;color:#999;font-size:28rpx">-</Text>
          <Input
            type="number"
            placeholder="最低价"
            class="search-input"
            placeholder-style="color:#dcdcdc;font-size:28rpx"
            maxlength="6"
            value={endPrice}
            onInput={() => this.handleInput}
          />
          <View className="sure-btn">
            确定
              </View>
        </View>
      </View>
    )
  }
  renderApartment() {
    const { apartmentList } = this.state
    return (

      <View style="padding:40rpx 20rpx">
        {apartmentList.map((apartmentItem, index) => (
          <View className='item' key={index + 'apartment'}>
            <View className='house__img-info'>
              <Image className='house__img' src={apartmentItem.buildingImgList[0].url} mode="widthFix"></Image>
            </View>
            <View className="rest-info">
              <View className='house-type__name'>{apartmentItem.apartmentName || ''}</View>
              <View className='construction__area'>
                <Text>{apartmentItem.buildingArea ? '建筑面积约' + apartmentItem.buildingArea + 'm²' : '建筑面积待定'}</Text>
                {
                  apartmentItem.insideArea ? <Text>使用面积约{apartmentItem.insideArea}m²</Text> : <Text>使用面积待定</Text>
                }
              </View>
            </View>
          </View>
        ))}
      </View>
    )
  }

  render() {
    const { current } = this.state
    const condition = [{ title: '按价格', value: 0 }, { title: '按户型', value: 1 }]
    return (
      <View className="screen-page">
        <View className="screen-top">
          筛选房源
            {condition.map(item => (
            <View key={item.value} onClick={() => this.handleCondition(item.value)} className={current == item.value ? 'top-item active' : 'top-item'}>
              {item.title}
            </View>
          ))}
        </View>
        {current == 0 && this.renderPrice()
        }
        {current == 1 && this.renderApartment()}

      </View>

    );
  }
}
