<template>
  <div class="nan-tou-gu-cheng-dev-container">
    <div class="poi-info-wrapper" v-if="nearbyPoiIdx !== null && !isNavigating">
      <div class="character-text" v-show="isShowText">
        <img
          class="bg"
          src="@/assets/images/character-text-bg.png"
          alt=""
          draggable="false"
        />
        <div class="top-bar">
          <button class="locate" @click="onClickLocateBtn">
            <img
              class=""
              src="@/assets/images/icon-locate.png"
              alt=""
              draggable="false"
            />
          </button>
          <button class="sound" @click="onClickAudioBtn">
            <img
              v-show="isAudioPlaying"
              class=""
              src="@/assets/images/icon-sound.png"
              alt=""
              draggable="false"
            />
            <img
              v-show="!isAudioPlaying"
              class=""
              src="@/assets/images/icon-sound-muted.png"
              alt=""
              draggable="false"
            />
          </button>
          <button class="close" @click="onClickCloseText">
            <img
              class=""
              src="@/assets/images/icon-close.png"
              alt=""
              draggable="false"
            />
          </button>
        </div>
        <div class="text-wrap">
          <p
            v-for="(item, index) in characterText"
            :key="index"
            v-html="item"
          ></p>
        </div>
      </div>
      <img
        class="character"
        :src="require(`@/assets/images/${poiList[nearbyPoiIdx].character}`)"
        alt=""
        draggable="false"
        @click="onClickCharacter"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from "vue";

// z坐标值与API里拿到的差了个负号
const poiList = [
  {
    name: "文士华宅牌匾",
    pos: {
      x: 402.543671,
      y: 5.054843,
      z: 469.244629,
    },
    character: "character.png",
    text: [
      `文士华宅建于清朝年间，坐东朝西由门厅、正厅及后门厅组成，南头古城在街区提升时努力修复和保留了原始建筑的古风古韵，其带有文人宅邸韵味的古朴木色，构成了古城记忆的深沉底色。现有的展览组成了南头精品文物系列展分别为“织金广彩”海上丝绸之路外销瓷器展、“朝花夕拾”南头精品出土文物展、“匠心独运”一文物修丝工艺工作室。`,
    ],
  },
  {
    name: "南头牌匾故事展",
    pos: {
      x: 459.2203,
      y: 0.977211,
      z: 482.747162,
    },
    character: "character.png",
    text: [
      `本展览展出了明清至民国时期的各种历史牌匾，共分为三个展厅。`,
      `<br>`,
      `&emsp;&emsp;牌匾与商贸展厅：岭南地区自古商业发达，贸易兴盛。深圳地区作为南方海路贸易的重要枢纽，民间商贸活动同样十分活跃。牌匾是工商业用以宣传生意和招徕顾客的重要广告方式，上书店号、商号或广告语等。其种类丰富，形制多样，形象地展现了过去商贸活动的面貌。`,
      `<br>`,
      `&emsp;&emsp;科举功名匾：科举功名匾是指士子通过科考取得功名后，由朝廷授予题写有功名等次的匾额。除了朝廷授予的匾额外，官员也常常向士子题赠匾额，以表庆贺勉励。`,
      `<br>`,
      `&emsp;&emsp;家族堂号匾/旌表贺颂匾：堂号匾，是悬挂于宗祠、家庙上的匾额。深圳的移民史源远流长，随着历代人口的不断迁徙，各种民俗文化在深圳落地生根。不同源流的家族在这块土地上建立起一座座宗祠，这些堂号匾则是他们的历史与文化的见证。旌表贺颂匾是出于表彰、祝贺、颂扬等目的，通过恩赐、赠送的方式给予受匾者的牌匾，起到宣传伦理道德，表彰忠孝节义，树立行为典范的作用。`,
    ],
  },
  {
    name: "同源馆（山海同貌）",
    pos: {
      x: 483.426147,
      y: 2.40841,
      z: 486.73587,
    },
    character: "character.png",
    text: [
      `&emsp;&emsp;珠江口区域的地形地貌始于史前的板块运动。板块的水平和垂直运动形成由山地和断裂盆地组成的地形基底，海洋的力量也一直影响着该地区岸线的变迁，随着珠江诸河的汇入，逐渐形成了河口湾与三角洲并存的状态。在地貌的基础上，多种外力条件共同作用，最终形成了三面环山，一面临海，三江汇聚，八口分流的地形地貌特征。`,
      `&emsp;&emsp;属于亚热带季风气候的珠江口区域，雨量丰沛、热量充足，这里的地形地貌变化十分丰富，河海交错，不仅栖息着多样的亚热带动植物，许多主要分布在热带和温带地区的动植物，也在这里安家。同时,该地区恰好位于东亚-澳大利西亚候鸟迁徙通道上，湿地面积广阔，是候鸟重要的迁徙停留地和越冬栖息地。`,
      `&emsp;&emsp;尽管人类的围垦、居住和生产活动出现较晚，但已经给该地区的地理面貌带来了很大的改变，自然环境与生态系统也受到了不小的影响。如何在追求经济与社会发展的同时也能兼顾与山海及其他自然居民的和谐相处?这已经成为了该地区在新时代发展中的重要命题之一。`,
    ],
  },
  {
    name: "信国公文氏祠",
    pos: {
      x: 526.4362,
      y: -5.436204,
      z: 317.707184,
    },
    character: "character.png",
    text: [
      `“信国公”是南宋末年政治家、文学家、抗元英雄文天祥的封号。这座祠堂始建年代不详，清嘉庆年间重修，是南头城中保存最为完整、规模最大的古建筑。整体建筑具有明清时期岭南风格，祠堂坐北朝南，由大门、过厅、堂屋等三部分组成，为三进三开间二天井布局，为深圳市重点文物保护单位。`,
    ],
  },
  {
    name: "新安县衙",
    pos: {
      x: 524.923157,
      y: 4.446324,
      z: 491.287323,
    },
    character: "character.png",
    text: [
      `明万历 1573 年在东莞守御千户所城基础上设新安县，县衙在整个古城最高的位置，背山面海，地理位置非常好，管辖今深圳和香港地区，是明清两代的政治经济中心。俗话说故宫易保，县衙难存。当年县衙的建筑已破坏严重， 发现时仅保留长 21.4 米，高 3.5 米的墙体。县衙整体采用庭院式布局，座北朝南、左文右武、前堂后宅 。由中轴线、东侧副线、西侧副线三部分组成。大堂、 二堂、 三堂是中轴线的三大主体建筑。县衙东西两侧的副线建筑已不复存在。`,
    ],
  },
  {
    name: "看图说话·历史地图中的深圳",
    pos: {
      x: 520.6005,
      y: 4.776612,
      z: 562.505859,
    },
    character: "character.png",
    text: [
      `通过明、清、民国三个时期的中外所藏中国历史地图与海外航海图，讲述深圳（旧时新安县、宝安县）的悠久历史，展现古代深圳在航海、贸易和海防方面的特殊地理位置及作用。`,
    ],
  },
  {
    name: "观音阁井",
    pos: {
      x: 549.333,
      y: 5.090148,
      z: 575.6688,
    },
    character: "character.png",
    text: [
      `观音阁井是南头古城名井之一，掘于清初，井北侧曾有观音阁（现已不存），故此得名。相传康熙年间，新安、东莞一带曾暴发大规模疫情，然凡饮观音阁井之水者却能免于疫灾之苦。一传十，十传百，十里八乡的民众都来此担水。井旁有一中山公园界碑，乃1925年中山公园落成所立。观音阁井区域完整保留了老井和周边文物。几层叠瀑从林间流下，环过老井蜿蜒成小溪。丰富的水系空间重塑水井周围的公共生活场景。`,
    ],
  },
  {
    name: "南头古城垣",
    pos: {
      x: 326.0668,
      y: -0.16311,
      z: 453.774628,
    },
    character: "character.png",
    text: [
      `南头古城南城门建于 1394 年，为明代东莞守御千户所城遗址，初建时有东、南、西、北四座城门，每座城门都有瓮城，城外有护城河，现仅有南门保留着明代风貌。2002 年被评为省级文物保护单位。`,
      `<br>`,
      `这座城门城基宽 10 米，高 4.5 米。城门楼是 2003 年重修。城门上刻有“宁南”二字，寓意为南方安宁。牌匾上的“岭南重镇”为清代知县靳文谟所提写，反映出了南头古城重要的军事地位。南头古城城门采用灰色巨砖和红砂石基修筑而成，红砂石具有防潮的作用，抗侵蚀能力较强，使城墙更为稳固，一般砌到一米多高，再砌巨型青砖，中间夯筑混凝土，砖的体积小重量轻，一般砌在城墙的最上层。这种砖石混合砌筑的城墙有更强的抵抗能力。这座 600 多年前的明代城门能保留至今实属不易，它见证着南头历史的变迁。`,
    ],
  },
  {
    name: "东莞会馆",
    pos: {
      x: 474.870728,
      y: 2.023155,
      z: 485.552368,
    },
    character: "character.png",
    text: [
      `东莞会馆又称“宝安公所”， 始建于清同治七年（公元 1868年），重建于清光绪三十三年（公元 1907 年），已经有 150 年的历史，是当时城内东莞籍商人的商会所在，是深圳市唯一保存的会馆建筑。同治年间梁金鳌手书石门楷书馆名。早在 1984 年就被深圳市政府列为“深圳市重点文物保护单位” 全国共有 11 所东莞会馆。2005 年 10 月，南山区政府斥资重修。`,
    ],
  },
];

const nearbyPoiIdx = ref(null);
// const nearbyPoiIdx = ref(1);

/**
 * 人物字幕相关
 */
const characterText = computed(() => {
  if (nearbyPoiIdx.value === null) {
    return "";
  } else {
    return poiList[nearbyPoiIdx.value].text;
  }
});
const isShowText = ref(false);
function onClickCharacter() {
  isShowText.value = true;
  isAudioPlaying.value = true;
}
function onClickCloseText() {
  isShowText.value = false;
}

// 导航相关
const isNavigating = ref(false);
function onClickLocateBtn() {
  const poiPos = poiList[nearbyPoiIdx.value].pos;
  window.SenseMain.startNavigationMicroApp({
    endName: "南头古城垣",
    endPos: new window.Laya.Vector3(poiPos.x, poiPos.y, poiPos.z),
    floorName: "F1",
    type: "poi",
    endType: 0,
  });
  isAudioPlaying.value = !isAudioPlaying.value;
  isShowText.value = false;
  isNavigating.value = true;
}
window.SenseMain.emitter.on("NAVIGATE_SUB_APP_END", function () {
  isNavigating.value = false;
  // console.log("[demo] 导航结束信息", JSON.stringify(msg));
  // 输出如下，是否为抵达终点后退出导航，可以查看 endType 字段是否为 0
  // [demo] 导航终点信息 {"endName":"会议室2002","endPos":{"x":48.59096,"y":-39.54175,"z":0},"floorId":"20200","type":"brand","navChannel":"Brand","nextApp":"qiankun-h5-standard","endType":-1,"floorName":"F20"}
});

// audio相关
const isAudioPlaying = ref(false);
let audio = null;
watch(
  nearbyPoiIdx,
  (v) => {
    if (v !== null) {
      if (audio) {
        audio.pause();
      }
      audio = new Audio(
        require(`@/assets/audios/${poiList[nearbyPoiIdx.value].name}.mp3`)
      );
    } else {
      if (audio) {
        audio.pause();
        audio = null;
      }
    }
  },
  {
    immediate: true,
  }
);
watch(isAudioPlaying, (v) => {
  if (v) {
    if (audio) {
      audio.play();
    }
  } else {
    if (audio) {
      audio.pause();
    }
  }
});
function onClickAudioBtn() {
  isAudioPlaying.value = !isAudioPlaying.value;
}

onMounted(() => {
  setTimeout(() => {
    setInterval(() => {
      const pos = window.SenseMain.getTranslate();
      console.log(pos);
      const poiDistancePow2List = poiList.map((item) => {
        return (
          (item.pos.x - pos.x) * (item.pos.x - pos.x) +
          (item.pos.z - -pos.z) * (item.pos.z - -pos.z)
        );
      });
      console.log(poiDistancePow2List);
      let minIndex = -1;
      let minValue = Infinity;
      for (let index = 0; index < poiDistancePow2List.length; index++) {
        if (poiDistancePow2List[index] < minValue) {
          minIndex = index;
          minValue = poiDistancePow2List[index];
        }
      }
      if (minValue < 10 * 10) {
        nearbyPoiIdx.value = minIndex;
        console.log("nearbyPoiIdx: ", nearbyPoiIdx.value);
      } else {
        nearbyPoiIdx.value = null;
      }
    }, 5000);
  }, 5000);
});
</script>

<style scoped lang="less">
.nan-tou-gu-cheng-dev-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
  > .poi-info-wrapper {
    pointer-events: initial;
    position: absolute;
    left: 50%;
    bottom: 0vh;
    transform: translate(-50%, 0);
    width: 36vh;
    height: 36vh;
    > .character-text {
      position: absolute;
      bottom: 95%;
      right: -3vh;
      width: 30.4vh;
      height: 47.6vh;
      padding-top: calc(0.07vh + 6.08vh + 2vh);
      padding-left: 3vh;
      padding-right: 2vh;
      padding-bottom: 6vh;
      > img.bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        z-index: -1;
      }
      > .top-bar {
        position: absolute;
        top: 0.07vh;
        right: 0.68vh;
        height: 6.08vh;
        width: 19.02vh;
        padding-right: 1vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2vh;
        background: linear-gradient(
          90deg,
          rgba(153, 153, 153, 0) 0%,
          #999 100%
        );
        border-radius: 3.07vh 1.18vh 0px 0px;
        > img {
          width: 1.2vw;
          height: 1.2vw;
        }
      }
      > .text-wrap {
        width: 100%;
        height: 100%;
        padding-right: 1em;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        line-height: 1.8;
        overflow-y: auto;
      }
    }
    > img.character {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
