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
  shop: {
    shopLogo: string
    shopName: string
  },
  state?: 'config' | 'send' | 'claimed' | 'finish' | 'claim' | string, // 状态
  isOwner?: boolean // 是否屋主
  app: 'wzs' | 'helper'
  redpacketId?: string // 红包id
  projectType?: 'case' | 'building' | string  // 工地|案例
  projectId?: string // 工地|案例 id
  projectName?: string // 工地|案例 名称
  projectCover?: string  // 工地|案例 封面
  money?: string, // 已抢额度
  totalMoney?: string, // 配置总额
  avatar?: string // 屋主头像
  userName?: string // 屋主名字
  userId?: string // 屋主id
  djs?: {
    day: string
    hour: string
    minu: string
    sec: string
  } // 倒计时
  onCoverClick?: any // 点击封面
  onShopClick?: any,
  // 自定义
  blessing: string, // 祝福语
  theme: string, // 主题
  pageContent: string, // 红包封面展示文字
  showNum: 0 | 1, // 展示红包个数
  praiseTime: string,  // 红包分数
  type: 'complex' | 'easy',  // 红包分数
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleCoverClick = () => {
    this.props.onCoverClick()
  }
  handleShopClick = () => {
    this.props.onShopClick()
  }

  render() {
    const {
      shop,
      className,
      projectCover,
      state,
      avatar,
      money,
      totalMoney,
      userName,
      isOwner,
      projectType,
      blessing, // 祝福语
      theme, // 主题
      pageContent, // 红包封面展示文字
      showNum, // 展示红包个数
      praiseTime,  // 红包分数
      type,  // 红包分数
    } = this.props
    const djs = this.props.djs || {
      day: '00',
      hour: '00',
      minu: '00',
      sec: '00',
    }
    return (
      <View className={'sd-red-detail ' + (className || '')}>
        {/* 店铺logo */}
        <View className='sd-red-detail-shop' onClick={this.handleShopClick}>
          <Image className='sd-red-detail-shop-logo' src={shop.shopLogo} />
          <Text className='sd-red-detail-shop-name sd-ell'>{blessing}</Text>
        </View>
        <View className='sd-flex sd-justify-center' >
          <View className='sd-red-detail-main'>
            {/* 案例封面 */}
            <SdFormid onClick={this.handleCoverClick}>
              {
                type === 'complex'
                  ?
                  <View className='sd-red-detail-cover' >
                    {/* 选择项目 */}
                    {
                      projectCover ?
                        <Image
                          className='sd-red-detail-cover-img'
                          src={projectCover} mode='aspectFill' />
                        :
                        <View className='sd-red-detail-choose'>
                          <Image
                            className='sd-red-detail-choose-img'
                            src='http://ft-image.oss-cn-beijing.aliyuncs.com/185.png' />
                          <View className='sd-red-detail-choose-txt'>点我选择{projectType === 'case' ? '案例' : '工地'}</View>
                        </View>
                    }
                    {/* 查看案例图标 */}
                    {
                      !(state === 'send' || state === 'config') &&
                      <Image
                        className='sd-red-detail-cover-see'
                        src={`http://ft-image.oss-cn-beijing.aliyuncs.com/${projectType === 'case' ? '183' : '200'}.png`} />
                    }
                  </View>
                  :
                  <View className='sd-red-detail-cover sd-red-detail-cover-easy '>
                    <View className='sd-red-detail-theme '> {theme}</View>
                  </View>
              }

            </SdFormid>

            {/* 红包信息 */}
            <View className='sd-red-detail-content'>
              {/* 屋主头像 */}
              <View className='sd-red-detail-owner'>
                <Image
                  className='sd-red-detail-owner-img'
                  src={avatar || 'http://ft-image.oss-cn-beijing.aliyuncs.com/177.png'} />
                <View className='sd-red-detail-owner-txt'>{userName || '待领取'}</View>
              </View>
              {/* 红包金额 */}
              <View className='sd-red-detail-money'>
                <Text className='sd-red-detail-money-unit'>¥</Text>
                <Text className='sd-red-detail-money-value'>{totalMoney}</Text>
                {
                  showNum && <Text className='sd-red-detail-money-num'>共{praiseTime}份</Text>
                }
              </View>
              {/* 红包note */}
              <View className='sd-red-detail-note'>
                {pageContent}
                {/* {
                  state === 'config'
                    ?
                    '配置完成后，将此红包发送给业主'
                    :
                    (
                      state === 'send'
                        ?
                        '您可以提醒业主将红包发送到同学群、业主群，或生成专属海报分享到朋友圈'
                        :
                        (
                          (state === 'claim' || isOwner)
                            ?
                            '邀请好友瓜分，好友领多少，你得多少 转发红包至微信群或生成专属海报分享到朋友圈 邀请好友来助阵吧！'
                            :
                            (
                              state === 'claimed'
                                ?
                                '你抢多少，我得多少 抢完可以看我家的装修美图'
                                :
                                '红包已被抢完啦，记得去「我的红包」提现'
                            )
                        )
                    )
                } */}
              </View>

              {/* 倒计时 */}
              {
                state !== 'finish' &&
                <View className='sd-red-detail-djs'>
                  <Text className='sd-red-detail-djs-txt' >还有</Text>
                  <Text className='sd-red-detail-djs-value'>{djs.day}</Text>
                  <Text className='sd-red-detail-djs-txt' > 天</Text>
                  <Text className='sd-red-detail-djs-value'>{djs.hour}</Text>
                  <Text className='sd-red-detail-djs-txt' >  时</Text>
                  <Text className='sd-red-detail-djs-value'>{djs.minu}</Text>
                  <Text className='sd-red-detail-djs-txt' >   分</Text>
                  <Text className='sd-red-detail-djs-value'>{djs.sec}</Text>
                  <Text className='sd-red-detail-djs-txt' >    秒</Text>
                  <Text className='sd-red-detail-djs-txt'>结束</Text>
                </View>
              }
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>