import Taro, { Component, render } from '@tarojs/taro'
import { Swiper, View, SwiperItem } from "@tarojs/components";
import NamedIcon from '../NamedIcon';
import { formateLeftTime } from '@/utils/tools'
import dayjs from 'dayjs'
import './index.scss'
import TimeTicker from '../TimeTicker';

export default class ScrollMessage extends Component {
  formateTM = (dt) => {
    const now = dayjs(new Date);
    const { preselectionStartTime, preselectionEndTime } = this.props.summary || {}
    const start = dayjs(preselectionStartTime)
    const end = dayjs(preselectionEndTime)

    let tip = ''
    let useTK = true

    if (now.isBefore(start)) {
      tip = '距离预选开始还有'
    } else if (now.isBefore(end)) {
      tip = '距离预选结束还有'
    } else {
      tip = '预选已结束，请关注下轮预选'
      useTK = false
    }

    return `${tip} ${useTK ? formateLeftTime(dt, 'min') : ''}`
  }
  formateRaiseTM = (dt) => {
    const now = dayjs(new Date);
    const { raiseStartTime, raiseEndTime } = this.props.summary || {}
    const raiseStart = dayjs(raiseStartTime)
    const raiseEnd = dayjs(raiseEndTime)

    let tip2 = ''
    let useTK2 = true

    if (now.isBefore(raiseStart)) {
      tip2 = '距离认筹开始还有'
    } else if (now.isBefore(raiseEnd)) {
      tip2 = '距离认筹结束还有'
    } else {
      tip2 = '认筹已结束，请关注下轮认筹'
      useTK2 = false
    }

    return `${tip2} ${useTK2 ? formateLeftTime(dt, 'min') : ''}`
  }

  computeRaiseDate = () => {
    const now = dayjs(new Date);
    const { raiseStartTime, raiseEndTime } = this.props.summary || {}
    const raiseStart = dayjs(raiseStartTime)
    const raiseEnd = dayjs(raiseEndTime)

    if (now.isBefore(raiseStart)) {
      return [now, raiseStart]
    } else if (now.isBefore(raiseEnd)) {
      return [now, raiseEnd]
    } else {
      return [now, now]
    }
  }
  computeDate = () => {
    const now = dayjs(new Date);
    const { preselectionStartTime, preselectionEndTime } = this.props.summary || {}
    const start = dayjs(preselectionStartTime)
    const end = dayjs(preselectionEndTime)

    if (now.isBefore(start)) {
      return [now, start]
    } else if (now.isBefore(end)) {
      return [now, end]
    } else {
      return [now, now]
    }
  }

  render() {
    const [start, end] = this.computeDate()
    const [raiseStart, raiseEnd] = this.computeRaiseDate()
    const { salesNumber, preselectionNumber, heatNumber, raiseNumber, raiseRealNumber, preselectionStartTime, preselectionEndTime, raiseStartTime, raiseEndTime } = this.props.summary || {}
    const personNum = heatNumber + preselectionNumber + 0
    const raisePersonNum = raiseNumber + raiseRealNumber + 0

    const notice = `当前 ${salesNumber} 套房源已有 ${personNum} 人成功预选`
    const raiseNotice = `当前 ${salesNumber} 套房源已有 ${raisePersonNum} 人成功认筹`

    return (
      <View className="scrollmessage">
        <View className="head">
          <Image style="width:44rpx;height:44rpx;margin-top: 10rpx;" src={require('../../assets/notice.png')}></Image>
        </View>
        <View className="body">
          <Swiper vertical autoplay>
            {(preselectionStartTime || preselectionEndTime) && <SwiperItem>
              <TimeTicker startTime={start} endTime={end} translate={this.formateTM} />
            </SwiperItem>}
            {(raiseStartTime || raiseEndTime) && <SwiperItem>
              <TimeTicker startTime={raiseStart} endTime={raiseEnd} translate={this.formateRaiseTM} />
            </SwiperItem>}
            {personNum > 0 && <SwiperItem>
              <View>{notice}</View>
            </SwiperItem>}
            {raisePersonNum > 0 && <SwiperItem>
              <View>{raiseNotice}</View>
            </SwiperItem>}
          </Swiper>
        </View>
      </View>
    )
  }
}

