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

interface DataInterface {
  caseId: any,
  homeicName: any,
  area: any,
  price: any,
  styleName: any,
  backgroudurl: any,
  title: any,
  shopName: any,
  shopLogo: any,
  isClaim: any,
  ownerId: any,
  select: any,
}
type PageOwnProps = {
  className?: string
  item: DataInterface,
  onClick?: any,
  onClaim?: any,
  showShop?: boolean
  hidePrice?: boolean
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  // navigateToCase = () => {
  //   if (this.props.disabled) {
  //     return

  //   }
  //   if (this.props.openWzs) {
  //     Taro.navigateToMiniProgram({
  //       appId: process.env.WZS_MINI,
  //       path: '/pages/case/index?scene=' + this.props.item.caseId

  //     })
  //   } else {
  //     Taro.navigateTo({
  //       url: `/pages/case/index?caseId=${this.props.item.caseId}`
  //     })
  //   }
  // }

  handleClick = () => {
    this.props.onClick(this.props.item.caseId)
  }

  // claim(e) {
  //   e.stopPropagation()
  //   Taro.navigateToMiniProgram({
  //     appId: process.env.WZS_MINI,
  //     path: '/pages/claimCase/index?scene=' + this.props.item.caseId
  //   })
  // }

  handleClaim = (e) => {
    e.stopPropagation()
    this.props.onClaim(this.props.item.caseId)
  }

  render() {
    const item = this.props.item || {}
    const showInfo = item.homeicName || item.area || item.price || item.styleName
    const { hidePrice } = this.props
    return (
      <SdFormid onClick={this.handleClick}>
        <View className={'sd-case-card ' + (this.props.className || '')} >
          <View className='sd-case-card-background'  >
            <Image
              className='sd-case-card-img'
              mode='aspectFill'
              src={item.backgroudurl || 'http://ft-image.oss-cn-beijing.aliyuncs.com/088.png'}
              lazyLoad={true} />
          </View>
          <View className='sd-case-card-title sd-ell'>{item.title || '未命名'}</View>
          {
            showInfo &&
            <View>
              {
                item.homeicName &&
                <Label className='sd-case-card-info'>{item.homeicName}</Label>
              }
              {
                item.area &&
                <Label className='sd-case-card-info'>{item.area}㎡</Label>
              }
              {
                item.styleName &&
                <Label className='sd-case-card-info'>{item.styleName}</Label>
              }
              {
                (item.price && !hidePrice) &&
                <Label className='sd-case-card-info'>{item.price}万</Label>
              }
              {
                (item.price && hidePrice) &&
                <Label className='sd-case-card-info sd-case-card-info-hideprice '>装修费用</Label>
              }

            </View>
          }

          {
            (this.props.showShop && item.shopName) &&
            <View className='sd-case-card-shop'>
              <Image className='sd-case-card-shop-logo' src={item.shopLogo}></Image>
              <Label className='sd-case-card-shop-name'>{item.shopName}</Label>
            </View>
          }

          {
            this.props.onClaim &&
            <View className='sd-case-card-rl'>
              <Button
                disabled={this.props.item.isClaim === 1}
                onClick={this.handleClaim.bind(this)}>
                {this.props.item.isClaim === 1
                  ?
                  '已认领'
                  :
                  '认领案例'
                } </Button>

            </View>
          }

          {
            item.ownerId &&
            <View className='sd-case-card-yirenling'>已认领</View>
          }
          {
            item.select &&
            <View className='sd-case-card-select'>
              <Image className='sd-case-card-select-img' src='http://ft-image.oss-cn-beijing.aliyuncs.com/108.png' />
            </View>
          }
        </View>
      </SdFormid>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>