import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Block } from '@tarojs/components'
import './index.scss'
import Blank from '../../components/Blank'
import HouseCard from '../../components/HouseCard'
import ready from '@/utils/ready'
import { connect } from '@tarojs/redux'
import * as houseActions from '@/actions/house'

function noop() { }

@connect(
  ({ user, house }) => ({ ...user, house }),
  { ...houseActions }
)
export default class extends Component {
  config = {
    navigationBarTitleText: '添加预选房源',
  }

  state = {
    chooseList: [],
  }

  componentWillMount() {
    ready.queue(() => {
      const { userInfo, house } = this.props
      const { id: salesBatchId } = this.$router.params

      this.props.dispatchGetMySelection({
        source: 'raiseChoose',
        salesBatchId,
        personId: userInfo.person.personId,
      })

      if (house.raiseCart && house.raiseCart.length) {
        this.setState({ chooseList: house.raiseCart })
      }
    })
  }

  handleCheckboxChange = (e) => {
    const { house } = this.props
    const houseIdList = e.detail.value.map(x => x - 0)
    const chooseList = (house.mySelectHouses || []).filter(x => houseIdList.indexOf(x.houseId) > -1).map(x => ({
      ...x.housingInfo,
      buildingImgList: x.buildingImgList,
      displayHousePrice: x.displayHousePrice,
      displayHousePrice: x.displayHousePrice
    }))

    this.setState({ chooseList })
  }

  handleSubmit = () => {
    const { chooseList } = this.state
    const { house } = this.props

    if (!chooseList.length) {
      Taro.showModal({
        title: '提示',
        content: '您未选择房源, 确认离开?',
        success: (res) => {
          if (res.confirm) {
            const leftHouses = house.raiseCart.filter(x => !(house.mySelectHouses || []).filter(it => it.houseId == x.houseId)[0])

            this.props.dispatchFlush2Cart(leftHouses)
            Taro.navigateBack({ delta: 1 })
          }
        }
      })
    } else {
      const notInPreSelect = house.raiseCart.filter(x => !chooseList.filter(it => it.houseId == x.houseId)[0])

      this.props.dispatchFlush2Cart(notInPreSelect.concat(chooseList))
      Taro.navigateBack({ delta: 1 })
    }
  }

  renderHead() {
    return (
      <View className="head">仅展示符合认筹条件的已预选房源,左侧勾选</View>
    );
  }

  renderHouses() {
    const { chooseList } = this.state
    const { house } = this.props

    // 从预选记录中过滤出来, 状态正常且未锁定的房源
    const houseList = (house.mySelectHouses || []).map(x => ({
      ...x.housingInfo,
      buildingImgList: x.buildingImgList,
      displayHousePrice: x.displayHousePrice,
      displayHousePrice: x.displayHousePrice
    })).filter(x => x.status == 1)

    return houseList.length && (
      <Block>
        <ScrollView scrollY className="container">
          <CheckboxGroup onChange={this.handleCheckboxChange}>
            {
              houseList.map((item) => {
                const checked = !!chooseList.filter(x => x.houseId == item.houseId)[0]

                return (
                  <Label class="checkbox" key={item.houseId}>
                    <Checkbox value={item.houseId} checked={checked} >
                      <View className="carditem" >
                        <HouseCard summary={item} onClick={noop} />
                      </View>
                    </Checkbox>
                  </Label>
                )
              })
            }
          </CheckboxGroup>
        </ScrollView >
        <View className="raise-box">
          <View className="raise-btn" onClick={this.handleSubmit}>确认以上选择</View>
        </View>
      </Block>
    )
  }


  renderBlank() {
    const { house } = this.props
    const hasData = house.mySelectHouses && house.mySelectHouses.length

    return !hasData && (
      <Blank tips="没有符合认筹条件的预选房源" />
    )
  }

  render() {
    return (
      <View className="add-house">
        {this.renderHead()}
        {this.renderBlank()}
        {this.renderHouses()}
      </View>
    )
  }
}