<!--
 * @Date: 2024-04-07 10:15:55
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-18 17:45:34
 * @FilePath: /fxPark/src/views/fxPark/index.vue
 * @Description: 首页
-->
<template>
  <div class="fxPark-page">
    <danmaku :show="show_danmu" :text="add_text" />
    <div class="quick-entrance-wrapper">
      <div class="quick-entrance-item" @click="goToAudio">
        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-1.1713148257.png" />
      </div>
      <div class="quick-entrance-item" @click="goToExhibition">
        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-2.1713148257.png" />
      </div>
      <div class="quick-entrance-item" @click="goToPoster">
        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-3.1713148257.png" />
      </div>
      <div class="quick-entrance-item" @click="onCloseDanmu">
        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-4.1713148346.png" />
      </div>
    </div>
    <div class="container" @click="onChipClick()">
      <img
        v-for="(item, index) in data_list"
        :key="index"
        :src="item.chip_src"
        class="img"
        :style="{ zIndex: index + 2 }"
      >
      <img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713248259.jpg" class="img" style="z-index: 1;">
      <div v-if="no_light" id="magnifying-glass-box">
        <div style="position: absolute; left: 0.5rem; bottom: -3rem; background-image: url('https://cdn.ipadbiz.cn/xfPark/index/word.1713418535.png'); background-size: 80% 80%; width: 12rem; height: 3rem; background-repeat: no-repeat;"></div>
      </div>
    </div>

    <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
      <div class="danmu-input-wrapper" :style="{ height: space_height }">
        <van-field
          ref="RefDanmu"
          v-model="danmu_message"
          label=""
          type="text"
          placeholder="请输入留言"
          @focus="onDanmuFocus"
          @blur="onDanmuBlur"
          @keydown.enter="handleEnterPress"
          enterkeyhint="send"
        />
      </div>
      <div v-if="spaceDiv" :style="{ height: space_height }"></div>
    </van-action-sheet>

    <!-- <van-floating-bubble v-model:offset="offset" axis="xy" :gap="10" @click="onCloseDanmu">
      <div style="font-size: 0.7rem;">
        弹幕<br/>开关
      </div>
    </van-floating-bubble> -->

    <div v-if="show_danmu" class="danmu-boxer">
      <div class="danmu-boxer-btn" @click="commentsBtn">发一条友好的弹幕吧</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
import { parseQueryString } from '@/utils/tools.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import danmaku from '@/components/danmaku.vue';
import { getTreeAPI, saveDanmuAPI } from '@/api/carbon.js';
import { showToast } from 'vant';

// 初始化WX环境
import wx from 'weixin-js-sdk'
import { useGo } from '@/hooks/useGo'
const go = useGo();

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const TREE_CHIP = { // 碎片图结构
  1: {
    active: 'https://cdn.ipadbiz.cn/xfPark/index/02.1713103305.png' // 悬铃木
  },
  2: {
    active: 'https://cdn.ipadbiz.cn/xfPark/index/01.1713103305.png' // 黄荆，灌木
  },
  3: {
    active: 'https://cdn.ipadbiz.cn/xfPark/index/05.1713103305.png' // 香樟
  },
  4: {
    active: 'https://cdn.ipadbiz.cn/xfPark/index/03.1713103305.png' // 草地
  },
  5: {
    active: 'https://cdn.ipadbiz.cn/xfPark/index/06.1713103305.png' // 雪松和香樟混交林"
  },
  6: {
    active: 'https://cdn.ipadbiz.cn/xfPark/index/04.1713103305.png' // 雪松
  },
  7: {
    active: ''
  },
};

const offset = ref({ x: -10, y: 500 });

const data_list = ref([]);
const all_actived = ref(false); // 全部激活
const no_light = ref(false); // 存在未激活

const space_height = ref('10vh'); // 第一次进入没有导航栏

onMounted(async () => {
  // 根据历史记录显示高度不一样，高度调高一点
  if (history.length > 1) {
    space_height.value = '15vh';
  }
  //
  const { code, data } = await getTreeAPI();
  if (code) {
    let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识

    data_list.value = data.filter(item => item.is_tree === 1); // 获取植物信息，提出最后一个非植物。
    data_list.value.forEach(item => {
      item.chip_src = item.is_light === '0' ? '' :  TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
    });

    if (index !== -1) { // 全点亮
      all_actived.value = true;
    } else {
      no_light.value = true; // 全未点亮
    }
  }
});

const RefDanmu = ref(null);
const show_danmu = ref(false);
const show_danmu_message = ref(false);
const danmu_message = ref('');
const add_text = ref({});

const onChipClick = () => { // 点击碎片回调
  if (all_actived.value) return false; // 全点亮忽略
  // 调用微信摄像头
  wx.scanQRCode({
    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
      let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
      // 跳转到相应植被介绍页 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1'
      let revision = parseQueryString(result).revision;
      go('/intro', { revision });
    },
    fail: function (res) {
      console.error(res);
    }
  });
}

const spaceDiv = ref(false); // 占位符

const commentsBtn = () => { // 点击留言输入框
  show_danmu_message.value = true;
  nextTick(() => {
    // spaceDiv.value = true;
    RefDanmu.value.focus();
  });
}

const saveMessage = async () => { // 提交留言
  const { code, data } = await saveDanmuAPI({ note: danmu_message.value });
  if (code) {
    show_danmu_message.value = false;
    // 实时更新到弹幕列表
    add_text.value = {
      status: '2',
      note: danmu_message.value
    }
    // 清空输入框
    danmu_message.value = '';
  }
}

const onDanmuBlur = (evt) => { // 弹幕输入框失去焦点
  show_danmu_message.value = false;
  spaceDiv.value = false;
  document.body.scrollIntoView({behavior: 'smooth'});
}
const onDanmuFocus = (evt) => {
  spaceDiv.value = true;
  // const u = navigator.userAgent
  // if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { // 安卓手机
  // } else { // ios
  //   setTimeout(() => {
  //     document.getElementsByTagName('body')[0].style.height = '400px'
  //   }, 50)
  // }
}

const handleEnterPress = (evt) => { // 小键盘回车回调
  if (evt.keyCode === 13) {
    saveMessage();
    document.body.scrollIntoView({behavior: 'smooth'});
  }
}

const goToPoster = () => { // 海报列表按钮
  let index = data_list.value.findIndex(item => item.is_light === '1'); // 没有一个点亮
  if (index === -1) {
    showToast('您还没点亮植物，获得海报哦');
    return false;
  }
  let raw_data = data_list.value.filter(item => item.is_light === '1'); // 获取所有已点亮的植被
  //
  $router.push({
    path: '/poster',
    query: {
      revision: raw_data.length ? raw_data[0].revision : -1
    }
  });
}

const goToAudio = () => { // 播放音频列表
  go('/audio');
}
const goToExhibition = () => { // 展览介绍
  go('/exhibition');
}

const onCloseDanmu = () => { // 弹幕开关
  show_danmu.value = !show_danmu.value;
}
</script>

<style lang="less" scoped>
* { // 屏蔽图片长按
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.fxPark-page {
  position: relative;
  img, :deep(.van-icon__image) { // 屏蔽图片长按
    pointer-events: none;
  }
  .quick-entrance-wrapper {
    position: absolute;
    right: 0;
    top: 0.8rem;
    z-index: 20;
    // .quick-entrance-item {
    //   color: white;
    //   background-color: green;
    //   border-top-left-radius: 1rem;
    //   border-bottom-left-radius: 1rem;
    //   font-size: 0.8rem;
    //   padding: 0.4rem 0.5rem;
    //   margin-bottom: 0.5rem;
    //   letter-spacing: 1px;
    // }
    .quick-entrance-item {
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
    }
  }
  .container {
    width: 100%;
    height: 100vh;
    background-size: contain;
    position: absolute;
    // z-index: 1;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      object-fit: cover;
    }
  }
  /* 示例范围标记 */
  .range {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 2px solid red;
    pointer-events: none; /* 防止遮挡点击事件 */
    display: none; /* 初始隐藏 */
    z-index: 999;
  }
}

.danmu-input-wrapper {
  padding: 1rem 0;
  display: flex;
  padding: 0.5rem;
}

.danmu-boxer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 10;
  height: 5rem;
  .danmu-boxer-btn {
    background-color: #F3F3F3;
    margin: 1rem 0.85rem;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #ABABAB;
  }
}

.animate-container {
  position: absolute;
  top: 45%;
  overflow: hidden;
  width: 13rem;
  height: 6rem;
  z-index: 10;
}

#magnifying-glass-box{
  width:5rem;
  height:5rem;
  position: absolute;
  left:10px;
  top:45%;
  animation-name: rightMove, bottomMove;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  background-image: url('https://cdn.ipadbiz.cn/xfPark/index/5b66ec87489f01b3501a76ad319p24mk24-imageonline.co-47829-1.png');
  background-size: 5rem;
  z-index: 10;
}

@keyframes rightMove{
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    left: 30%;
  }
}

@keyframes bottomMove{
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    top: 35%;
  }
}


</style>