import { computed, defineComponent, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button';
import RadioGroup from '@/components/RadioGroup';
import Loading from '@/components/Loading';
import Card from '../card';
export default defineComponent({
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { t } = useI18n();
    // 当前展示的模块
    const myboxType = ref('0');
    //
    const loading = ref(false);
    /**
     * 进行中1
     * 未完成2
     * 未中奖3
     * 中签4
     */
    const myblindBoxList = reactive({
      list: [
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '1',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
        },
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '2',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
        },
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '3',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
        },
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '4',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
        },
      ],
    });
    // 是否显示可中签价值
    const isShowEnd = ref(false);
    const btnOptions = computed(() => [
      {
        label: t('raffle.inprogress'),
        value: '0',
      },
      {
        label: t('raffle.unfinish'),
        value: '1',
      },
      {
        label: t('raffle.Finished'),
        value: '2',
      },
    ]);
    const onBack = () => {
      emit('update:modelValue', 'activity');
    };
    return () => (
      <div class="custom-my-blind-box">
        <div class="header">
          <div class="blind-box-head">
            <span>{t('raffle.MyBlindBox')}</span>
            <CustomButton
              value={t('button.back')}
              onClick={onBack}
            ></CustomButton>
          </div>
          <RadioGroup
            v-model={myboxType.value}
            options={btnOptions.value}
          ></RadioGroup>
        </div>
        <div class="my-blind-box-content">
          {myblindBoxList.list.map((item: any) => (
            <Card info={item} showEnd={isShowEnd.value}></Card>
          ))}
          <Loading v-show={loading.value}></Loading>
        </div>
      </div>
    );
  },
});
