<template>
  <view class="promo-list-body">
    <view
      class="promo-list-item"
      v-for="(item, index) in list"
      :key="index"
      @click.stop="jumpPromo(item)"
    >
      <theme-image class="promo-banner" :src="item.picUrl"></theme-image>
    </view>
    
		<TurnplateGame
			ref="turnplateGameRef"
		/>
    <empty-hold height="150" />
    <BindPhonePop ref="bindPhonePopRef" />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import Toast from "@/module/toast/toast.js";
import { PageEnum } from "@/pages/promo/constants/PageEnum.js";
import { usePromoStore } from "@/store/usePromoStore";
import { useI18n } from "vue-i18n";
import TurnplateGame from "./TurnplateGame.vue"
import BindPhonePop from "@/components/popup/BindPhonePop.vue";
import { useUserStore } from "@/store/useUserStore";

const { t } = useI18n();
const emit = defineEmits(["changeActive"]);
const promoStore = usePromoStore();
const turnplateGameRef = ref(null)
const bindPhonePopRef = ref(null)

const list = computed(() => promoStore.promoList.filter(item => item.picUrl));


const jumpPromo = (item) => {
  let returnedValue = judgmentRouter(item.jumpUrl);
	
  if (returnedValue) {
    if(returnedValue.value === 'popup:bindphone') {
      if(!useUserStore().userInfo?.mobile) {
        bindPhonePopRef.value.open()
      } else {
        Toast.show(t('account.bindPhone.binded'))
      }
    } if (returnedValue.value === 'popup:spin') {
			turnplateGameRef.value.show(item.id)
		} else if (returnedValue.value == "-1") {
			
    } else if (returnedValue.value == "-2") {
      emit("changeActive", 1);
    } else {
      if (returnedValue.type == 0) {
        uni.navigateTo({
          url: returnedValue.value,
          success: function (res) {
            res.eventChannel.emit(
              "getContentInfo",
              JSON.stringify(item.content)
            );
          },
        });
      }
      if (returnedValue.type == 1) {
        uni.switchTab({
          url: returnedValue.value,
        });
      }
    }
  }
};

const judgmentRouter = (url) => {
  let value = null;
  PageEnum.forEach((item) => {
    if (item.key == url) {
			
      value = item;
      return;
    }
  });
  return value;
};
</script>

<style lang="scss" scoped>
.promo-list-body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10rpx 30rpx;
  overflow-y: auto;
  .promo-list-item {
    width: 100%;
    height: 210rpx;
    margin-bottom: 26rpx;
		border-radius: 20rpx;
		overflow: hidden;
    border: 1px solid #FEBF05;
		
    .promo-banner {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
