<!--
 * @Date: 2024-04-07 10:15:55
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-12 22:28:29
 * @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 name="chat-o" />&nbsp;&nbsp;<span>植物之声</span>
      </div>
      <div class="quick-entrance-item" @click="goToPoster">
        <van-icon name="chat-o" />&nbsp;&nbsp;<span>海报列表</span>
      </div>
      <div class="quick-entrance-item">
        <van-icon name="chat-o" />&nbsp;&nbsp;<span>展览介绍</span>
      </div>
      <div class="quick-entrance-item">
        <van-icon name="chat-o" />&nbsp;&nbsp;<span>文明校园报名</span>
      </div>
    </div>
    <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
      <img :src="item.chip_src" class="img">
    </div>
    <!-- <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;"> -->
      <!-- <div v-if="all_actived" @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div> -->
      <!-- <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</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="请输入留言"
          @blur="onDanmuBlur"
          @keydown.enter="handleEnterPress"
          enterkeyhint="send"
        />
      </div>
      <div v-if="spaceDiv" :style="{ height: space_height }"></div>
    </van-action-sheet>

    <van-floating-bubble icon="chat" @click="onCloseDanmu" />

    <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: {
    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png',
    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png'
  },
  2: {
    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png',
    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png'
  },
  3: {
    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png',
    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png'
  },
  4: {
    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png',
    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png'
  },
  5: {
    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png',
    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png'
  },
  6: {
    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png',
    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png'
  },
};

const data_list = ref([]);
const all_actived = 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); // 全点亮标识
    if (index === -1) { // 未全点亮
      data.forEach(item => {
        item.chip_src = item.is_light === '0' ? TREE_CHIP[item.revision]['invalid'] :  TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
      });
    } else { // 全点亮
      all_actived.value = true;
      data.forEach(item => {
        item.chip_src = TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
      });
    }
    //
    data_list.value = data;
  }
});

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 时，扫码返回的结果
      // 跳转到相应植被介绍页
      // let result = '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 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 onCloseDanmu = () => { // 弹幕开关
  show_danmu.value = !show_danmu.value;
}
</script>

<style lang="less" scoped>
.fxPark-page {
  position: relative;
  .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.85rem;
      padding: 0.5rem;
      margin-bottom: 0.5rem;
      letter-spacing: 1px;
    }
  }
  .container {
    width: 100%;
    height: 100%;
    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;
    }
  }
}

.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;
  }
}
</style>