import { defineComponent, PropType } from 'vue';
import './index.less';
import CustomCountDown from '../CountDown';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  props: {
    info: {
      type: Object as PropType<any>,
      default: {},
    },
    showEnd: {
      type: Boolean,
      default: false,
    },
    Countdown: {
      type: Boolean,
      default: false,
    },
    customStatus: {
      type: Object as any,
      default: {},
    },
  },
  /**
   * 三个状态
   * 未开始1
   * 进行中2
   * 已结束3
   */
  emits: ['CardClick', 'updateTime'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const curStauts = () => {
      const { info, customStatus } = props;
      if (customStatus.title === 'true') {
        if (info.is_sucess) {
          // 中奖了
          return t('raffle.success');
        } else {
          return t('raffle.Failed');
        }
      } else if (customStatus.title) {
        // 存在自定义状态
        return customStatus.title;
      }
      if (Object.keys(info).length) {
        if (info.status == 1) {
          return t('raffle.unfinish');
        } else if (info.status == 2) {
          return t('raffle.inprogress');
        } else if (info.status == 3) {
          return t('raffle.Finished');
        }
      }
    };

    const getClass = () => {
      const { info, customStatus } = props;
      if (customStatus.title === 'true') {
        if (info.is_sucess) {
          // 中奖了
          return 'success';
        } else {
          return 'failed';
        }
      } else if (customStatus.type) {
        // 存在自定义状态
        return customStatus.type;
      }
      if (Object.keys(info).length) {
        if (info.status == 1) {
          return 'failed';
        } else if (info.status == 2) {
          // 进行中
          return 'success';
        } else if (info.status == 3) {
          return 'status2';
        }
      }
    };
    // 卡片点击事件
    const CardClick = () => {
      const { Countdown, info } = props;
      if (!Countdown) {
        return;
      }
      emit('CardClick', info.index);
    };
    // 更新倒计时
    const onUpdateTime = (value: number) => {
      emit('updateTime', {
        value: value,
        index: props.info.index,
      });
    };
    return () => (
      <div
        class={[
          'custom-raffle-card',
          props.Countdown && props.info.status == 2 ? 'pointer' : '',
        ]}
        onClick={CardClick}
      >
        <img class="img" src={props.info.project_icon} alt="" />
        <div class="card-line-parent">
          <div class="card-line-one">
            <span class="left-introduction">{props.info.projectName}</span>
            <div class={['card-right-status', getClass()]}>{curStauts()}</div>
          </div>
          <div class="box-id">#{props.info.id}</div>
          {props.Countdown ? (
            <div class="custom-card-countDown">
              <div class="label">{t('raffle.PurchaseCountdown')}</div>
              <div class="value">
                <CustomCountDown
                  time={props.info.countdown}
                  onUpdateTime={onUpdateTime}
                ></CustomCountDown>
              </div>
            </div>
          ) : (
            ''
          )}
          <div class="card-line-two">
            <div class="price">
              <div class="label">{t('raffle.price')}</div>
              <div class="value">{props.info.price} RESDAO</div>
            </div>
            <div class="price center">
              <div class="label">{t('raffle.NumberBuyers')}</div>
              <div class="value">
                {props.info.buy_num}/{props.info.max_participants_num}
              </div>
            </div>
            <div class="price end" v-show={props.showEnd}>
              <div class="label">{t('raffle.Winprize')}</div>
              <div class="value">{props.info.price * 3}$</div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
