import { computed, defineComponent, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button';
import Card from '../card';
import ActivityDetail from '../ActivityDetail';
import { getCurrentDevice } from '@/utils/tool';
export default defineComponent({
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { t } = useI18n();
    // 当前是否打开详情页面
    const isDetailPage = ref(false);
    const activityList = reactive({
      list: [
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '1',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
          countDown: 60000000,
          index: 0,
        },
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '2',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
          countDown: 60000000,
          index: 1,
        },
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '3',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
          countDown: 60000000,
          index: 2,
        },
        {
          img: new URL('@/assets/img/test.png', import.meta.url).href,
          introduction: '5人抽奖一人必中',
          status: '4',
          price: '300',
          buyersNum: '3/5',
          canObtain: '1000',
          countDown: 60000000,
          index: 3,
        },
      ],
    });
    const onBack = () => {
      emit('update:modelValue', 'mybox');
    };
    const onCardClick = (value: number) => {
      // 打开详情
      isDetailPage.value = true;
    };
    const backList = () => {
      isDetailPage.value = !isDetailPage.value;
    };
    // 是否显示我的盲盒按钮
    const isShow = computed(() => {
      if (getCurrentDevice() && isDetailPage.value) {
        return false;
      }
      return true;
    });
    return () => (
      <div class="custom-activity-box">
        <div class="header">
          <div class="blind-box-head">
            <span>{t('raffle.BlindBoxactivity')}</span>
            <div class="custom-right-button">
              <CustomButton
                v-show={isDetailPage.value}
                value={t('button.back')}
                onClick={backList}
              ></CustomButton>
              <CustomButton
                value={t('raffle.MyBlindBox')}
                v-show={isShow.value}
                onClick={onBack}
              ></CustomButton>
            </div>
          </div>
        </div>
        <div class="custom-activity-content">
          <div v-show={!isDetailPage.value} class="custom-activity-content-cl">
            {activityList.list.map((item: any) => (
              <Card
                info={item}
                Countdown={true}
                onCardClick={onCardClick}
              ></Card>
            ))}
          </div>
          <div v-show={isDetailPage.value}>
            <ActivityDetail></ActivityDetail>
          </div>
        </div>
      </div>
    );
  },
});
