import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import dayjs from 'dayjs'
const helpSuccess = 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/images/helpgroup/help/success1.png'
const helpFail = require('@assets/helpgroup/fail.png')

export default class Item extends Component {
  static defaultProps = {
    data: {},
    style: {}
  }
  handleClick(data) {

    this.props.onClick(data)
  }
  state = {

    leftTime: 0,  // 剩余时间
  }
  // componentWillMount() {
  //   this.updateLeftTime(this.props.data.startDate, this.props.data.endDate)
  // }

  // updateLeftTime(startDate, endDate) {
  //   const st = dayjs(startDate).valueOf()
  //   const ed = dayjs(endDate).valueOf()

  //   this.setState({
  //     ltTicker: setInterval(() => {
  //       const nw = dayjs().valueOf()

  //       if (st > nw) {
  //         // 活动未开始
  //         this.setState({
  //           leftTime: st - nw,
  //           actState: 0,
  //         })
  //       } else if (ed > nw) {
  //         // 活动未结束
  //         this.setState({
  //           leftTime: ed - nw,
  //           actState: 1,
  //         })
  //       } else {
  //         // 活动已结束
  //         this.clearTicker()
  //         this.setState({
  //           leftTime: 0,
  //           actState: 2,
  //         })
  //       }
  //     }, 1000)
  //   })
  // }
  // formateLeftTime() {
  //   const nd = 1000 * 24 * 60 * 60;
  //   const nh = 1000 * 60 * 60;
  //   const nm = 1000 * 60;
  //   const ns = 1000;

  //   const day = Math.floor(this.state.leftTime / nd);
  //   const hour = Math.floor(this.state.leftTime % nd / nh);
  //   const min = Math.floor(this.state.leftTime % nd % nh / nm);
  //   const sec = Math.floor(this.state.leftTime % nd % nh % nm / ns);

  //   return `${day}天${hour}小时${min}分${sec}秒`
  // }
  render() {
    const { data, style } = this.props
    return (
      <View className="item" style={style} onClick={this.handleClick.bind(this, data)}>
        <Image className="pic" mode="aspectFill" src={data.img} ></Image>
        <View className="title">{data.title}</View>
        {(!data.verification && data.status == 1) &&
          <View className="time">参与截止时间:
          {data.endDate &&
              <Text className="count-time">{`${dayjs(data.endDate).format('YYYY-MM-DD HH:mm:ss')}`}</Text>
            }
          </View>
        }
        {(!data.verification && data.status != 1) &&
          <View className="time"><Text className="count-time">活动已结束</Text></View>
        }
        {data.verification &&
          <Block>
            <View className={data.verificationStatus == 0 ? 'type' : 'type2'}>{data.verificationStatus == 0 ? '未核销' : '已核销'}</View>
            <View className="hexiaoma">核销码：{data.verification}</View>
          </Block>
        }
        {data.createDate && <View className="start-date">{`${dayjs(data.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</View>}
        {data.status == 0 &&
          <Image className="status-icon" src={helpSuccess} ></Image>
        }
        {data.status == 1 &&
          <View className="btn">进行中</View>
        }
        {data.status == 2 &&
          <Image className="status-icon" src={helpFail} ></Image>
        }

      </View>

    );
  }
}