<script setup>
import { ref, onMounted, computed, watch } from "vue"
import ModalTransition from "./ModalTransition.vue"
import { useRouter } from 'vue-router'
import { globalStore } from "../globalstore.js";
import { ElMessage } from 'element-plus';
import { isLogin, Storage, Request } from "../libs/utils"
import globalToastEvent, { ToastType } from '../globalToastEvent';

defineProps({
  show: false
})

//TODO 帮我看一下对不对
globalToastEvent.on(ToastType.MOUNTED, () => {
  fetchImages()
})

const emit = defineEmits(['go-photo-square']);
const router = useRouter();
const goBack = () => {
  emit('update:show', false);
};

const imageList = ref([])
const fetchImages = async () => {
  
  try {
    const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
    url.searchParams.append('my_only', '1');
    url.searchParams.append('page', '1');
    url.searchParams.append('per_page', '100');
    const response = await fetch(url.toString(), {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
      }
    })
    const data = await response.json()
    console.log('Success:', data)
    images.value = data.data;
    imageList.value = data;

    // Check for any image with is_public = true after fetching
    const hasPublicImage = images.value.some(item => item.is_public);
    if (hasPublicImage) {
      globalStore.chartsBattle = true;
      
      // Find the index of the public image and set its border to active
      const publicIndex = images.value.findIndex(item => item.is_public);
      if (publicIndex !== -1) {
        activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
      }
    }
  } catch (error) {
      console.error('Error:', error)
  }
}


// 图片数据
const images = ref([]);
 
import defaultBorderImage from '../assets/images/my-photo-border.png';
import activeBorderImage from '../assets/images/my-photo-selected-border.png';

const activeBorders = ref(images.value.map(() => false));
let mergeId = '';
// 切换边框状态
const toggleBorder = (item, index) => {
  activeBorders.value = activeBorders.value.map(() => false);
  
  activeBorders.value[index] = true;
  mergeId = item.id;
};

const handleDabangClick = () => {
  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${mergeId}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: "application/json",
      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
    },
    body: {}
  })
  .then(response => response.json())
  .then(data => {
    ElMessage.success('打榜成功！');
    console.log('Success:', data);
    globalStore.chartsBattle = true;
    return { success: true, data };
  })
  .catch((error) => {
    ElMessage.success('打榜失败！');
    console.error('Error:', error);
    return { success: false, error };
  });
};

const handleZhuliClick = () => {
    console.log('助力被点击');
};

import failedImg from '../assets/images/failed.png';
const getGenerateImgStatus = async (item)=> {
  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
    }
  })
  .then(response => response.json())
  .then(data => {
      console.log('Success:', data);
      if (data.status = 'failed') {
        item.result_url = failedImg;
      } else if (data.status = 'success') {
        item.result_url = data.result_url;
      }
  })
  .catch((error) => {
      console.error('Error:', error);
  });
}

const getBackgroundImage = (item) => {
  if (item.result_url) {
    return item.result_url;
  } else {
    return item.result_url = failedImg;
  }
};
</script>

<template>
  <ModalTransition class="myPhoto" :show="show">
    <div class="myPhoto-bg">
      <div class="scene-item item-1" @click="goBack">
        <img src="../assets/images/close-btn.png" alt="关闭按钮">
      </div>

      <div class="scene-item item-3" @click="$emit('go-photo-square')">
        <img src="../assets/images/zpgc.png" alt="照片广场">
      </div>
      <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p>
      <div class="image-gallery">
        <div 
          v-for="(item, index) in images" 
          :key="index" 
          class="image-wrapper"
        >
          <div class="image-container mask-background"
            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
          >
          </div> 
          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
          <img 
            :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
             ? activeBorderImage : defaultBorderImage" 
            class="border-image"
            alt="border"
            @click="!globalStore.chartsBattle && toggleBorder(item, index)"
          />
        </div>
      </div>
      <div class="scene-item item-2">
        <img 
          :src="!globalStore.chartsBattle 
            ? 'src/assets/images/dabang.png' 
            : 'src/assets/images/zhuli.png'" 
          alt="角色图片"
          @click="!globalStore.chartsBattle ? handleDabangClick() : handleZhuliClick()"
        >
      </div>

    </div>
  </ModalTransition>
</template>

<style scoped>
.my-photo-desc {
  position: absolute;
  width: 87vw;
  top: 48vw;
  text-align: center;
  color: #855211
}
.refresh-btn {
  width: 12vw;
  position: absolute;
  top: 12%;
  right: 8%;
  cursor: pointer;
  z-index: 9;
}
.image-wrapper {
  position: relative;
  margin-bottom: 0;
  float: left;
  margin-right: 2vw;
  margin-left: 2vw;
}
.border-image {
  position: absolute;
  width: 40vw;
  top: 1.6333vh;
  left: -0.4vw;
}
.image-gallery {
  overflow-y: auto;
  display: block;
  width: 84vw;
  height: 57vh;
  position: absolute;
  top: 30%;
}

.image-container {
  width: 38vw;
  height: 56vw;
  top: 2.2vw;
  margin-bottom: 3vw;
  background-image: url('../assets/images/test.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: -webkit-fill-available;
  position: relative;
  cursor: pointer;
}

.mask-background {
  -webkit-mask-image: url("../assets/images/my-photo-mengban.png");
  mask-image: url("../assets/images/my-photo-mengban.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.content-image {
  position: relative;
}

.myPhoto-bg {
  width: 100%;
  height: 92vh;
  background-image: url('../assets/images/my-photo-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: -webkit-fill-available;
}
.scene-item {
  position: absolute;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  animation: float 4s ease-in-out infinite;
}

.scene-item:hover {
  transform: scale(1.05);
}
.btn-login {
  text-align: center;
  border-radius: 1vw;
  background-color: #70b2e2;
  margin-top: 4vw;
  padding: 3vw;
  color: #fff;
  position: relative;
}
.item-1 {
  top: 9%;
  width: 10vw;
  right: 4%;
}
.item-3 {
  top: 16.3vh;
  width: 32vw;
  position: absolute;
  left: 11vw;
}
.item-2 {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.scene-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-login.disable {
  opacity: .6;
}

.btn-login.subloading {
  opacity: .6;
}

.btn-login.subloading::before {
  content: "";
  position: absolute;
  border: .5vw solid #fff;
  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  top: 30%;
  left: calc(50% - 14vw);
  animation: loginloading 1s linear infinite;
}

@keyframes loginloading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>