<script setup>
import { ref, onMounted, computed, watch } from "vue"
import { Request, Storage } from "../libs/utils"
import ModalTransition from "./ModalTransition.vue"
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

const props = defineProps({
  show: false
})

const disableInviteHelp = ref(false);
const emit = defineEmits(['go-my-photo', 'update:show']);
const router = useRouter();
const route = useRoute();
const goBack = () => {
  emit('update:show', false);
  // 清除URL中的查询参数
  if (Object.keys(route.query).length > 0) {
      router.replace({ path: route.path, query: {} });
  }
};

const username = ref();
const likesCount = ref();
const userImg = ref();
const ranking = ref();
const displayMyPublishPhoto = ref(false);

const fetchImages = async () => {
  disableInviteHelp.value = false;
  try {
    const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
    url.searchParams.append('my_only', '0');
    
    const response = await fetch(url.toString(), {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
      }
    })
    const data = await response.json()
    if (response.status == 200 || response.status == 201) {
      console.log('Success:', data)
      images.value = data.data
      if (data.my_published_photo) {
        displayMyPublishPhoto.value = true;
      } else {
        displayMyPublishPhoto.value = false;
      }
      username.value = data.my_published_photo.user_name;
      likesCount.value = data.my_published_photo.likes_count;
      userImg.value = data.my_published_photo.avatar;
      ranking.value = data.my_published_photo.ranking;
    } else {
      ElMessage.error(data.message);
      emit('update:show', false);
    }
  } catch (error) {
      console.error('Error:', error)
  }
}

watch(() => props.show, async (newVal) => {
  if (!newVal) {
    return
  }
  fetchImages();
}, {immediate: true})

// 图片数据
const images = ref([]);
const userinfos = Storage.get("userinfos")

let mergeId = '';
let inviteCode = '';
const rankingInvite = ref(0);
const nameInvite = ref('');
const linkCountInvite = ref(0);
const backgroundImageForInvite = ref('');

const urlParams = new URLSearchParams(window.location.search);
mergeId = urlParams.get('merge_id');
inviteCode = urlParams.get('fromid');


const getInviteInfo =  ()=> {
  disableInviteHelp.value = true;
  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeId}`, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
    }
  })
  .then(async response => {
    const data = await response.json()
    if (response.status == 200 || response.status == 201) {
      rankingInvite.value = data.ranking;
      nameInvite.value = data.user_name;
      linkCountInvite.value = data.likes_count;
      backgroundImageForInvite.value = data.result_url;
    } else {
      ElMessage.error(data.message);
      // emit('update:show', false);
    }
  })
  .catch((error) => {
    ElMessage.error('分享进入页面失败！');
    emit('update:show', false);
  }); 
}

watch(() => mergeId, async (newVal) => {
  if (!newVal) {
    return
  }
  if (newVal) {
    if (inviteCode === userinfos.invite_code) {
      weui.alert("不可以给自己点赞哦！");
      return false;
    }
    getInviteInfo();
  }
}, {immediate: true})

const displayInviteHelpBtn = ref(true);

const inviteHelp = ()=> {
  const formData = {
    invite_code: inviteCode,
    merge_id: mergeId
  }
  fetch('https://huodong2.lzlj.com/api/faceFamily/face/like', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: "application/json",
      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
    },
    body: JSON.stringify(formData)
  })
  .then(async response => {
    const data = await response.json()
    if (response.status == 200 || response.status == 201) {
      displayInviteHelpBtn.value = false;
      ElMessage.success('点赞成功！');
    } else {
      ElMessage.error(data.message);
    }
  })
  .catch((error) => {
    ElMessage.error('点赞失败！');
    console.error('Error:', error);
  }); 
}

// onMounted(()=> {
//   getInviteInfo()
// })
const markers = ref([]);
markers.value = [
  { x: 50, y: 32, width: 50, height: 14 }
];

const getBackgroundImage = (item) => {
  if (item.result_url) {
    return `${item.result_url}?x-oss-process=image/resize,w_400/format,webp/quality,q_80`;
  }
};

</script>

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

      <div v-for="(marker, index) in markers" 
          :key="index"
          class="marker"
          :style="{
            left: marker.x + 'vw',
            top: marker.y + 'vw',
            width: marker.width + 'vw',
            height: marker.height + 'vw'
          }"
          @click.stop="$emit('go-my-photo')">
      </div>
      <p class="my-photo-desc">打榜活动截止至9月30日晚12:00结束，中奖信息将于10月1日早10点推送至获奖会员。</p>
      <div v-if="!disableInviteHelp" class="image-gallery ">
        <RecycleScroller
            class="scroller"
            :items="images"
            :item-size="1"
            key-field="id"
            v-slot="{ item, index }"
          >
          <div class="image-wrapper">
            <div class="image-container mask-background" 
            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
            </div>          
            <img 
              src="../assets/images/zpgc-border.webp" 
              class="border-image"
              alt="border"
            />
            <div class="list-item">
              <div class="flex-container-detail">
                <div class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</div>
                <div class="photo-name">{{ item.user_name }}</div>
                <div class="right-item photo-name">{{ item.likes_count }}赞</div>
              </div>
            </div>
          </div>
        </RecycleScroller>
        <!-- <div 
          v-for="(item, index) in images" 
          :key="index" 
          class="image-wrapper"
        >
          <div class="image-container mask-background">
          </div>          
          <img 
            src="../assets/images/zpgc-border.webp" 
            class="border-image"
            alt="border"
          />
          <div class="flex-container-detail">
            <div class="left-group">
              <p class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</p>
              <p class="photo-name">{{ item.user_name }}</p>
            </div>
            <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
          </div>
        </div> -->
      </div>
      <div v-if="!disableInviteHelp && displayMyPublishPhoto" class="fixed-background-container">
        <div class="flex-container">
          <div class="left-group">
            <p class="photo-number">{{ ranking }}</p>
            <img :src="userImg" class="user-img" alt="">
            <p class="photo-name-square bold">{{ username }}</p>
          </div>
          <p class="right-item photo-name bold" style="padding-left: 3vw;">{{ likesCount }}赞</p>
        </div>
      </div>

      <div v-if="disableInviteHelp" class="share-main">
        <div class="image-gallery-share">
          <div class="image-wrapper-share">
            <div class="image-container-share mask-background"
            :style="{ backgroundImage: `url(${backgroundImageForInvite})` }">
            </div>          
            <img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
            <div class="flex-container-detail-invite">
              <div class="photo-number">{{ rankingInvite }}</div>
              <div class="photo-name-invite">{{ nameInvite }}</div>
              <div class="link-count-invite">{{ linkCountInvite }}赞</div>
            </div>
          </div>
        </div>

        <div v-if="displayInviteHelpBtn" class="ranking-title" @click="inviteHelp">
          <img src="/src/assets/images/dianzan.webp" alt="点赞">
        </div>
      </div>
    </div>
  </ModalTransition>
</template>

<style scoped>
.share-main {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.my-photo-desc {
  position: absolute;
  width: 87vw;
  top: 48vw;
  text-align: center;
  color: #855211;
  font-size: 3.6vw;
}
.scroller {
  height: 124vw;
  overflow-y: auto;
}
.list-item {
  position: relative;
}
.marker {
  position: absolute;
}
.flex-container-detail-invite {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 11vw;
  bottom: 10.5vw;
  font-size: 3vw;
  width: 100%;
  padding: 0px 13vw;
}
.photo-name-square {
  min-width: 14vw;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #93551f;
}
.photo-name-invite {
  min-width: 14vw;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #93551f;
}
.link-count-invite {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #93551f;
  padding-left: 2vw;
  margin-left: auto;
  flex-shrink: 0;
}
.left-group-left {
  display: flex;
  flex-flow: row;
  padding-right: 16vw;
  gap: 3vw;
}
.ranking-title {
  width: 48vw;
  position: absolute;
  bottom: 2vw;
  left: 27vw;
}
.ranking-title img {
  width: 100%;
}
.image-wrapper-share {
  position: relative;
  width: 69vw;
  height: 57vw;
  margin-top: 12vw;
}
.image-container-share {
  width: 68vw;
  height: 81vw;
  background-image: url(/src/assets/images/test.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: -webkit-fill-available;
  position: relative;
  cursor: pointer;
}
.border-image-share {
  position: absolute;
  width: 63vw;
  top: -0.8vw;
  left: 3vw;
}
.bold {
  font-weight: bold;
}
.photo-number {
  color: red;
  flex-shrink: 0;
  padding-right: 2vw;
}
.photo-name {
  min-width: 14vw;
  max-width: 19vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #93551f;
}
.flex-container-detail {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  bottom: 5vw;
  font-size: 3vw;
  width: 100%;
  padding: 0 4vw;
  left: 2vw;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 6vw;
}

.left-group {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.user-img {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
}

.left-group p, .right-item {
  padding-left: 2vw;
  margin-left: auto;
  flex-shrink: 0;
}
.fixed-background-container {
  background-image: url('../assets/images/paiming-border.webp');
  position: fixed;
  bottom: 1vh;
  left: 5vw;
  width: 90vw;
  height: 17vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.image-wrapper {
  position: relative;
  margin-right: 2vw;
  margin-left: 2vw;
  width: 38vw;
  height: 59vw;
}
.border-image {
  position: absolute;
  width: 40vw;
  top: 2.8vw;
  left: -0.8vw;
}
.image-gallery {
  overflow-y: auto;
  overflow-x: hidden;
  width: 84vw;
  height: 57vh;
  position: relative;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  top: 26vw;
  padding-bottom: 12vw;
}

.image-container {
  width: 38vw;
  background-image: url('../assets/images/test.webp');
  background-size: 100%;
  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.webp");
  mask-image: url("../assets/images/my-photo-mengban.webp");
  -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;
}

.photoSquare-bg {
  width: 100%;
  height: 92vh;
  background-image: url('../assets/images/photo-squarev2.webp');
  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;
  right: 11vw;
}

.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>