import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Label } from '@tarojs/components'
import './index.scss'
import SdFormid from '../sdFormid';
type PageOwnProps = {
  preferentialTicketId?: string
  receiveNum?: number // 领取人数
  showReceiveNum?: boolean // 显示领取人数
  displayStatus: -1 | 0 | 1 | 2 | 3 | number // 态（-1：配置中，0：已下架，1：未开始 , 2: 进行中 3：已结束）
  amountYuan?: string
  endTimeStr: string
  startTimeStr: string
  lingquTimeStr?: string
  remark?: string // 规则
  title: string
  type: 'list' | 'detail'
  appType: 'wzs' | 'helper'
  atHomePage?: boolean
  className?: string
  onClick?: any
  onLingqu?: any
  onRemarkClick?: any
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }


  handleClick = () => {
    this.props.onClick(this.props.preferentialTicketId)
  }

  openRemark = e => {
    e.stopPropagation()
    this.props.onRemarkClick(this.props.remark)
  }

  handleLingqu = e => {
    e.stopPropagation()
    this.props.onLingqu(this.props.preferentialTicketId)
  }

  render() {
    const {
      showReceiveNum,
      type,
      displayStatus,
      className,
      startTimeStr,
      endTimeStr,
      receiveNum,
      atHomePage,
      appType,
      title,
      amountYuan,
      lingquTimeStr
    } = this.props

    const baseClassName = `sd-coupon-${type}`
    const imgRoot = 'http://ft-image.oss-cn-beijing.aliyuncs.com/'

    let backgroundimg = ''
    let moneyColor = 'sd-coupon-money-warm'
    let titleColor = 'sd-coupon-title-dark'
    switch (displayStatus) {
      case -1:
        // 配置
        backgroundimg = '211'
        break;
      case 0:
        // 下架
        backgroundimg = type === 'list' ? '217' : '214'
        moneyColor = 'sd-coupon-money-cold'
        titleColor = 'sd-coupon-title-light'
        break;
      case 1:
        // 未开始
        backgroundimg = type === 'list' ? '216' : '212'
        break;
      case 2:
        // 进行中
        backgroundimg = type === 'list' ? '215' : '211'
        break;
      case 3:
        // 已结束
        backgroundimg = type === 'list' ? '218' : '213'
        moneyColor = 'sd-coupon-money-cold'
        titleColor = 'sd-coupon-title-light'
        break;
      default:
        break;
    }

    if (atHomePage) {
      backgroundimg = '219'
    }

    if (!title) {
      titleColor = 'sd-coupon-title-light'
    }

    backgroundimg = imgRoot + backgroundimg + '.png'

    return (
      <View className={baseClassName + ' ' + (className || '')}
        onClick={this.handleClick}
        style={`background-image: url(${backgroundimg})`}   >
        <View className={`${baseClassName}-body ${atHomePage ? 'sd-coupon-lingqu' : ''}`}>
          <View className={`${baseClassName}-info`}>
            {/* 钱 */}
            <View className={`${baseClassName}-money sd-ell ${moneyColor} `}>
              <Label className={`${baseClassName}-money-unit`}>¥</Label>{amountYuan}
            </View>
            <View>
              {/* 标题 */}
              <View className={`${baseClassName}-title  ${titleColor} `}>
                <Text className='sd-ell'>{title || '暂无标题'}</Text>
              </View>
              {/* 领取时间 */}
              {
                lingquTimeStr && <View className={`${baseClassName}-note  `}>领取时间：{lingquTimeStr}</View>
              }
            </View>
          </View>
          {
            atHomePage &&
            <View onClick={this.handleLingqu.bind(this)} className='sd-coupon-lingqu-button' >
              立即领取
              </View>
          }
          {
            type === 'detail' &&
            <View className='sd-coupon-shuoming'>
              <Text onClick={this.openRemark.bind(this)} >  使用\n说明   </Text>
            </View>
          }
        </View>
        <View className={`${baseClassName}-footer`}>
          <Text>使用时间：{startTimeStr || '- - -'} {startTimeStr && endTimeStr ? '-' : '\t-\t'}  {endTimeStr || '- - -'}</Text>
          {
            showReceiveNum && <Text>{receiveNum}人领取</Text>
          }
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>