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

type PageOwnProps = {
  className?: string
  app: 'wzs' | 'helper'
  redpacketId?: string // 红包id
  projectType?: 'case' | 'building'  // 工地|案例
  projectId?: string // 工地|案例 id
  projectName?: string // 工地|案例 名称
  projectCover?: string  // 工地|案例 封面
  state?: 'unclaim' | 'claimed' | 'finish' | 'withdraw' | 'withdrawed' | 'unwithdraw', // 卡片状态
  money?: string, // 已抢额度
  totalMoney?: string, // 配置总额
  endDate?: string // 截至日期
  number?: number // 被抢数
  totalNumber?: number // 可抢总数 
  avatar?: string // 屋主头像
  userName?: string // 屋主名字
  userId?: string // 屋主id
  progress?: any // 进度
  getMoney?: string // 抢的钱
  duration?: string // 有效期
  onDelete?: any // 删除
  onSend?: any // 发送
  onWithdraw?: any // 提现
  children?: any
  theme?: string, // 主题
}

type IProps = PageOwnProps

interface Index {
  props: IProps
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

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

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

  handleWithdraw = () => {
    this.props.onWithdraw(this.props.redpacketId)
  }

  render() {
    const { className, projectCover, state, money, totalMoney, endDate, userName, number, totalNumber, getMoney, app, progress, duration, theme } = this.props
    let avatar = this.props.avatar || 'http://ft-image.oss-cn-beijing.aliyuncs.com/162.png'

    return (
      <View className={'sd-red-card ' + (className || '')} onClick={this.handleSend}>
        <SdFormid onClick={this.handleSend.bind(this)}>
          <View className='sd-red-card-body' >
            <View className='sd-red-card-cover'>
              {
                theme
                  ?
                  <View className='sd-red-card-cover-theme'>{theme}</View>
                  :
                  <Image
                    mode='aspectFill'
                    className='sd-red-card-cover-img'
                    src={projectCover || ''}
                  />
              }
              {app === 'helper' && <View className='sd-red-card-enddate'>{endDate}</View>}
            </View>
            <View
              className={'sd-red-card-info ' + ((state === 'claimed' || state === 'unclaim') ? 'sd-red-card-yellow' : '')}
              style={`background-image: url(http://ft-image.oss-cn-beijing.aliyuncs.com/${(state === 'finish' || state === 'unwithdraw' || state === 'withdrawed') ? '179' : '178'}.png)`}   >
              {
                app === 'helper'
                  ?
                  <View className='sd-red-card-info-helper'>
                    <View className='sd-red-card-number sd-flex sd-justify-between'>
                      <Text>{number}人已领</Text>
                      <Text>共{totalNumber}人</Text>
                    </View>
                    <AtProgress className='sd-red-card-progress' isHidePercent percent={progress} color={state === 'finish' ? 'white' : '#FFECCA'} />
                    <View className='sd-flex'>
                      <View className='sd-red-card-money'>
                        <View>{totalMoney}</View>
                        <View className='sd-red-card-money-unit'>总额(元)</View>
                      </View>
                      <View className='sd-red-card-money'>
                        <View>{money}</View>
                        <View className='sd-red-card-money-unit'>已领(元)</View>
                      </View>
                    </View>
                  </View>
                  :
                  <View className='sd-red-card-info-wzs'>
                    <View className='sd-red-card-getmoney'>
                      <Text className='sd-red-card-getmoney-unit'>¥</Text>
                      {getMoney}
                    </View>
                    <View className='sd-red-card-duration'>
                      提现截止：{duration}
                    </View>
                  </View>
              }
            </View>
          </View>
        </SdFormid>
        <View className='sd-red-card-footer' >
          {/* 左侧 */}
          {/* 配置中 */}
          {/* 等待发送 */}
          {(state === 'unclaim') && <Text onClick={this.handleDelete.bind(this)} className='sd-red-card-state'>删除 </Text>}
          {/* 砍价中 */}
          {(state === 'claimed') && <Text className='sd-red-card-state sd-red-card-state-red'>活动中</Text>}
          {/* 砍价结束 */}
          {(state === 'finish') && <Text className='sd-red-card-state'>已结束</Text>}
          {/* 砍价结束 */}
          {(state === 'withdraw') &&
            <View className='sd-red-card-state sd-red-card-state-red'> {this.props.children}</View>
          }
          {/* {(state === 'withdraw') && <Text onClick={this.handleWithdraw.bind(this)} className='sd-red-card-state sd-red-card-state-red'>可提现</Text>} */}
          {/* 砍价结束 */}
          {(state === 'withdrawed') && <Text className='sd-red-card-state'>已提现</Text>}
          {/* 砍价结束 */}
          {(state === 'unwithdraw') && <Text className='sd-red-card-state'>已过期</Text>}

          {/* 右侧 */}
          <SdAvatarTitle
            circular
            className='sd-red-card-owner'
            direction='horizontal'
            size='48'
            margin='16'
            avatar={state === 'unclaim' ? 'http://ft-image.oss-cn-beijing.aliyuncs.com/163.png' : avatar}
            title={state === 'unclaim' ? '点我发给业主' : (userName || '')}
          />
          {
            state !== 'unclaim' && <Text className='sd-red-card-owner-desc'>{app === 'helper' ? '领取' : '的红包'}</Text>
          }
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>