import Taro, { Component } from '@tarojs/taro'
import { View } from "@tarojs/components";
import HotBlock from "../HotBlock";
import './room.scss'
import lockImg from '../../assets/lock.png'
import preselectionImg from '../../assets/preselection.png'
import chipsImg from '../../assets/chips.png'

export default class Room extends Component {
  handleClick = () => {
    const { onClick, dataset } = this.props
    if (onClick) {
      onClick(dataset || {})
    }
  }

  handleActionClick = () => {
    const { onActionClick, showAction, dataset } = this.props

    if (showAction && onActionClick) {
      onActionClick(dataset || {})
    }
  }

  render() {
    const { dataset, showAction, chooseList, showDataType = 1 } = this.props

    const {
      houseId,
      roomName,
      heat,
      realHeat,
      raiseHeat,
      raiseRealHeat,
      houseLockingStatus,
      mineLocked,
      minePreselection,
      mineRaise
    } = dataset || {}

    // const personNum = `(${realHeat + heat + 0}人)`
    const personNum = realHeat + heat + 0
    const raisePersonNum = raiseHeat + raiseRealHeat + 0
    
    const actionIcon = (chooseList || []).filter(x => x.houseId == houseId)[0] ? 'subtract-circle' : 'add-circle'
    
    return (
      <HotBlock number={showDataType === 1 ? personNum : raisePersonNum}>
        <View className="room">
          <View onClick={this.handleClick.bind(this)}>
            <View className="roomname">{roomName || ''}</View>
            <View className="yuxuan">{personNum}预选</View>
            <View className="yuxuan">{raisePersonNum}认筹</View>
            {!showAction && minePreselection && <Image src={preselectionImg} className="preselection-img"></Image>}
            {!showAction && mineRaise && <Image src={chipsImg} className="chips-img"></Image>}
            {!showAction && houseLockingStatus == 'locked' && <Image src={lockImg} style={mineLocked ? 'position: absolute; right: 2px;bottom: 3px;' : ''} className="lock-img"></Image>}
          </View>
          {
            showAction && (
              <View className="action" onClick={this.handleActionClick.bind(this)}>
                <View className={`at-icon at-icon-${actionIcon}`}></View>
              </View>
            )
          }
        </View>
      </HotBlock>
    )
  }
}
