<template>
  <div class="window" :style="nowPosition">
    <div class="base">
      <div>{{LandMarkWindow.information.landTitle}}</div>
      <div class="triangle"></div>
      <div class="backimg" :style="nowImg">{{LandMarkWindow.information.landTitle}}</div>
    </div>
    <div class="closeBtn" @click="closeWindow">
      <svg
        t="1603334792546"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1328"
        width="20"
        height="20"
      >
        <path
          d="M568.922 508.232L868.29 208.807a39.139 39.139 0 0 0 0-55.145l-1.64-1.64a39.139 39.139 0 0 0-55.09 0l-299.367 299.82-299.425-299.934a39.139 39.139 0 0 0-55.088 0l-1.697 1.64a38.46 38.46 0 0 0 0 55.09l299.48 299.594-299.424 299.48a39.139 39.139 0 0 0 0 55.09l1.64 1.696a39.139 39.139 0 0 0 55.09 0l299.424-299.48L811.56 864.441a39.139 39.139 0 0 0 55.089 0l1.696-1.64a39.139 39.139 0 0 0 0-55.09l-299.48-299.537z"
          p-id="1329"
        ></path>
      </svg>
    </div>
    <div class="changeButton" @click="judgment">{{LandMarkWindow.buttonText?'地点信息':'探索'}}</div>
  </div>
</template>

<script setup>
import { LandMarkWindowStore } from '/@/stores/LandMarkWindow';
import { LandMarkShowStore } from '/@/stores/LandMarkShow';
import { ref, watch } from 'vue';

const LandMarkWindow = LandMarkWindowStore();
const LandMarkShow = LandMarkShowStore();

const nowPosition = ref();
const nowImg = ref();

watch(() => LandMarkWindow.windowShow, (newValue, oldValue) => {
  nowPosition.value = `bottom:${LandMarkWindow.windowPosition.bottom};left:${LandMarkWindow.windowPosition.left};display:${LandMarkWindow.windowShow?'block':'none'};`;
})

watch(() => LandMarkWindow.information.landImgUrl, (newValue, oldValue) => {
  nowImg.value = `background-image: url('${LandMarkWindow.information.landImgUrl}1.webp');`;
})

watch(() => LandMarkWindow.windowPosition.left, (newValue, oldValue) => {
  nowPosition.value = `bottom:${LandMarkWindow.windowPosition.bottom};left:${LandMarkWindow.windowPosition.left};display:${LandMarkWindow.windowShow?'block':'none'};`;
})

const closeWindow = () => {
  LandMarkWindow.windowShow = false;
  LandMarkWindow.hiddenWindow = true;
}
const flyToLandmark = () => {
  LandMarkWindow.flyToLand = true;
}
const watchImg = () => {
  LandMarkShow.boxShow = true;
  LandMarkShow.information = LandMarkWindow.information;
}
const judgment = () => {
  if(LandMarkWindow.buttonText){
    watchImg()
  }else{
    flyToLandmark()
  }
}
</script>

<style scoped>
.window {
  width: 300px;
  height: 30px;
  position: absolute;
  display:none;
}
.base {
  background: #FFFFA0;
  height: 200px;
  text-align: center;
}
.triangle {
  width: 0;
  height: 0;
  border-top: 10px solid red;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  left: 140px;
  bottom: -200px;
}
.backimg {
  color: red;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
  padding-top: 4px;
  font-size: 32px;
  background-size: cover;
  height: 200px;
  line-height:100px;
  border-radius: 0px 0px 10px 10px;
}
.closeBtn {
  width:20px;
  height:21px;
  position:absolute;
  top:0;
  right:0;
  background-color:#fff;
  cursor:pointer;
}
.closeBtn:hover {
  background-color: red;
}
.changeButton {
  width:110px;
  height:40px;
  position:absolute;
  top:100px;
  right:95px;
  background-image:url('../../src/assets/button.png');
  background-size:cover;
  color:#fff;
  border:1px solid skyblue;
  border-radius:16px;
  box-shadow:0px 0px 8px skyblue;
  text-align:center;
  line-height:36px;
  cursor:pointer;
}
</style>