import { computed, 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,
    },
  },
  emits: ['CardClick'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const curStauts = () => {
      const { info } = props;
      if (Object.keys(info).length) {
        switch (info.status) {
          case '1':
            return t('raffle.inprogress');
          case '2':
            return t('raffle.unfinish');
          case '3':
            return t('raffle.losingLottery');
          case '4':
            return t('raffle.Ballot');
        }
      }
    };

    const getClass = () => {
      const { info } = props;
      if (Object.keys(info).length) {
        switch (info.status) {
          case '1':
            return 'status1';
          case '2':
            return 'status2';
          case '3':
            return 'status3';
          case '4':
            return 'status1';
        }
      }
    };
    // 卡片点击事件
    const CardClick = () => {
      const { Countdown, info } = props;
      if (!Countdown) {
        return;
      }
      emit('CardClick', info.index);
    };
    return () => (
      <div
        class={['custom-raffle-card', props.Countdown ? 'pointer' : '']}
        onClick={CardClick}
      >
        <img class="img" src={props.info.img} alt="" />
        <div class="card-line-parent">
          <div class="card-line-one">
            <span class="left-introduction">{props.info.introduction}</span>
            <div class={['card-right-status', getClass()]}>{curStauts()}</div>
          </div>
          {props.Countdown ? (
            <div class="custom-card-countDown">
              <div class="label">{t('raffle.PurchaseCountdown')}</div>
              <div class="value">
                <CustomCountDown time={props.info.countDown}></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.buyersNum}</div>
            </div>
            <div class="price end" v-show={props.showEnd}>
              <div class="label">中奖可得</div>
              <div class="value">{props.info.canObtain}$</div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
