import { computed, defineComponent, onMounted, 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';
import { getBlindBoxList, getReceiptAddress } from '@/utils/api/BlindBox';
import Loading from '@/components/Loading';
import { useFoxWallet } from '@/store/FoxWallet';
import Empty from '@/components/empty';
export default defineComponent({
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const { $state: FoxWallet } = useFoxWallet();
    const loading = ref(false);
    // 详情内容
    const detailObj = ref({});
    // 当前是否打开详情页面
    const isDetailPage = ref(false);
    const activityList = reactive<{
      list: any[];
    }>({
      list: [],
    });
    const onBack = () => {
      emit('update:modelValue', 'mybox');
    };
    const onCardClick = (value: number) => {
      // 打开详情
      isDetailPage.value = true;
      // 详情内容
      detailObj.value = activityList.list[value];
    };
    const backList = () => {
      isDetailPage.value = !isDetailPage.value;
    };
    // 是否显示我的盲盒按钮
    const isShow = computed(() => {
      if (getCurrentDevice() && isDetailPage.value) {
        return false;
      }
      return true;
    });
    const getList = async () => {
      try {
        loading.value = true;
        let res: any = await getBlindBoxList();
        res.data.forEach((item: any, index: number) => {
          item.index = index;
        });
        activityList.list = res.data;
        loading.value = false;
      } catch (e) {
        console.log(e);
        loading.value = false;
      }
    };
    const getAddress = async () => {
      try {
        let res: any = await getReceiptAddress();
        if (res.code == 0) {
          FoxWallet.to = res.data;
        }
      } catch (e) {
        console.log(e);
      }
    };
    onMounted(async () => {
      await getList();
      //  获取收款地址
      getAddress();
    });
    const onUpdateTime = (item: any) => {
      /**
       * value--倒计时
       * index--数组下标
       */
      activityList.list[item.index].countdown = item.value;
    };
    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}
                onUpdateTime={onUpdateTime}
                onCardClick={onCardClick}
              ></Card>
            ))}
          </div>
          <div v-show={isDetailPage.value}>
            <ActivityDetail info={detailObj.value}></ActivityDetail>
          </div>
        </div>
        <Loading v-show={loading.value}></Loading>
        <Empty v-show={!activityList.list.length && !loading.value}></Empty>
      </div>
    );
  },
});
