import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import './index.scss'
import SdFormid from '../sdFormid';

type PageOwnProps = {
  className?: string
  hidePrice?: boolean
  onImageClick?: any
  styleName?: any
  caseId?: any,
  area?: any,
  homeicName?: any,
  province?: any,
  price?: any,
  xiaoqu?: any,
  backgroudurl?: any,
  title?: any,
  city?: any,
  county?: any,
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {
  static options = {
    addGlobalClass: true
  }

  handleImageClick = (e) => {
    this.props.onImageClick(e)
  }

  render() {



    const {
      className,
      hidePrice,
      area,
      homeicName,
      province,
      price,
      xiaoqu,
      backgroudurl,
      title,
      county,
      city,
      styleName
    } = this.props
    const hasHouseInfo = area || styleName || homeicName || price
    const hasAddress = province || xiaoqu

    return (
      <View className={'sd-case-info ' + (className || '')}>
        {
          backgroudurl &&
          <SdFormid onClick={this.handleImageClick.bind(this, backgroudurl)}>
            <Image
              mode='widthFix'
              className='sd-case-info-img'
              src={backgroudurl} />
          </SdFormid>

        }

        {/* 标题 */}
        <View className='sd-case-info-title'>{title}</View>
        {/* 房屋信息和位置 */}
        {
          (hasHouseInfo || hasAddress) &&
          <View className='sd-case-info-house'>
            {/* 房屋信息 */}
            {
              hasHouseInfo &&
              <View>
                {
                  homeicName &&
                  <Text className='sd-case-info-house-info'>{homeicName}</Text>
                }
                {
                  area &&
                  <Text className='sd-case-info-house-info'>{area}㎡</Text>
                }
                {
                  styleName &&
                  <Text className='sd-case-info-house-info'>{styleName}</Text>
                }
                {
                  (price && !hidePrice) &&
                  <Text className='sd-case-info-house-info'>{price}万元</Text>
                }
                {
                  (price && hidePrice) &&
                  <Text className='sd-case-info-house-info sd-case-info-hideprice'>装修费用</Text>
                }
              </View>
            }
            {/* 位置 */}
            {
              hasAddress &&
              <View className='sd-case-info-house-address'>
                {province ? province : 'ddd'}
                {(city && city !== '市辖区') ? ' | ' + city : ''}
                {county ? ' | ' + county : ''}
                {xiaoqu ? ' | ' + xiaoqu : ''}
              </View>
            }
          </View>
        }
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>