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

type PageOwnProps = {
  bargainId?: string
  className?: string
  state?: 'config' | 'unclaim' | 'claimed' | 'finish', // 卡片状态
  money?: string, // 已坎额度
  totalMoney?: string, // 配置总额
  endDate?: string // 截至日期
  showNum?: boolean // 显示数量
  number?: number // 被点数
  totalNumber?: number // 点击总数 
  avatar?: string
  userName?: string
  userId?: string
  app: 'wzs' | 'helper'
  position: 'list' | 'detail'
  onDelete?: any
  onSend?: any
  progress?: any
}

type IProps = PageOwnProps

interface Index {
  props: IProps
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleDelete = e => {
    e.stopPropagation()
    this.props.onDelete(this.props.bargainId)
  }

  handleSend = e => {
    e.stopPropagation()
    this.props.onSend(this.props.bargainId)
  }

  render() {
    const {
      className,
      state,
      totalMoney,
      avatar,
      position,
      userId,
      app,
      progress,
      showNum
    } = this.props
    const number = this.props.number || 0
    const totalNumber = this.props.totalNumber || 0
    const money = this.props.money || '0.00'
    const endDate = this.props.endDate || '_ _ _'
    let userName = this.props.userName || ''
    if (userName.length > 10) {
      userName = userName.substr(0, 8) + '...'
    }
    return (
      <View className={'sd-bargain-card ' + (className || '')} onClick={this.handleSend.bind(this)} >
        <SdFormid onClick={this.handleSend.bind(this)}>
          <View className='sd-bargain-card-body'
            style={`background-image: url(http://ft-image.oss-cn-beijing.aliyuncs.com/${(state === 'finish' && position === 'list') ? '164' : '159'}.png)`}   >
            <Image src={`http://ft-image.oss-cn-beijing.aliyuncs.com/${(state === 'finish' && position === 'list') ? '198' : '199'}.png`} className='sd-bargain-card-cornerimg' mode='widthFix' />
            <View className='sd-bargain-card-money'>
              <Image src='http://ft-image.oss-cn-beijing.aliyuncs.com/160.png' className='sd-bargain-card-money1' />
              <Text className='sd-bargain-card-money2'>
                {totalMoney || '0.00'}
              </Text>
            </View>
            <View className='sd-bargain-card-note'>
              {
                state === 'finish'
                  ?
                  '最终砍价金额'
                  :
                  ((state === 'config' || position === 'list')
                    ?
                    ('截止日期：' + endDate)
                    :
                    '优惠金额以砍价结果为准'
                  )
              }
            </View>
            {
              (state !== 'finish' && position === 'list') &&
              <View className='sd-bargain-card-progress sd-bargain-card-yikan'>
                <Text className='sd-bargain-card-progress-type'>已砍 </Text>
                <Text className='sd-bargain-card-progress-dark'>{money} </Text>
              </View>
            }
            {
              ((state === 'config' || position === 'list') && showNum) &&
              <View className='sd-bargain-card-progress sd-bargain-card-renshu'>
                <Text className='sd-bargain-card-progress-type'>人数 </Text>
                <Text className='sd-bargain-card-progress-dark'>{number}/ </Text>
                <Text className='sd-bargain-card-progress-light'>{totalNumber}</Text>
              </View>
            }
            {
              position === "list" &&
              <View className='sd-bargain-card-line'>
                <View
                  className='sd-bargain-card-line-inner'
                  style={`background:${state === "finish" ? (number === totalNumber ? '#928E7A' : '#B8A658') : '#FFA900'};height:100%; width:${progress}%`}>
                </View>
              </View>
            }
          </View>
        </SdFormid>
        <View className='sd-bargain-card-footer' style={position === 'list' ? 'box-shadow: none' : ''}>
          {/* 左侧 */}
          {/* 配置中 */}
          {state === 'config' && <Text className='sd-bargain-card-explain'>配置完成后，将此卡发送给业主 </Text>}
          {/* 等待发送 */}
          {(state === 'unclaim' && position === 'list') && <Text onClick={this.handleDelete.bind(this)} className='sd-bargain-card-delete'>删除 </Text>}
          {/* 砍价中 */}
          {(state === 'claimed' && position === 'list') && <Text className='sd-bargain-card-claimed'>砍价中</Text>}
          {/* 砍价结束 */}
          {(state === 'finish' && position === 'list') && <Text className='sd-bargain-card-finish'>已结束</Text>}

          {/* 右侧 */}
          {/* 等待发送 */}
          {(state === 'unclaim' && position === 'list') &&
            <View className='sd-bargain-card-user'>
              <Image className='sd-bargain-card-avatar' src='http://ft-image.oss-cn-beijing.aliyuncs.com/163.png' />
              <Text className='sd-bargain-card-user-title'>点我发给业主</Text>
            </View>
          }

          {/* 装企准备发给屋主 */}
          {(state === 'unclaim' && position === 'detail') &&
            <View className='sd-bargain-card-user'>
              <Image className='sd-bargain-card-avatar' src='http://ft-image.oss-cn-beijing.aliyuncs.com/162.png' />
              <Text className='sd-bargain-card-user-title'>待领取</Text>
            </View>
          }

          {/* 活动中 && 已结束 */}
          {((state === 'claimed' || state === 'finish') && userId) &&
            <View className='sd-bargain-card-user'>
              <Image className='sd-bargain-card-avatar' src={avatar || 'http://ft-image.oss-cn-beijing.aliyuncs.com/162.png'} />
              <Text className='sd-bargain-card-user-title'>{userName}</Text>
              <Text className='sd-bargain-card-user-desc'>{app === 'helper' ? '领取' : '所属'}</Text>
            </View>
          }

        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>