<template>
  <div class="big-map">
    <button
      class="close"
      @click="$emit('close')"
    >
      <img
        class=""
        src="@/assets/images/close.png"
        alt=""
        draggable="false"
      >
    </button>
    <div class="map-wrapper">
      <img
        class="map"
        src="@/assets/images/big-map.jpg"
        alt=""
        draggable="false"
      >
      <div
        class="area-zhong-da-gong-cheng"
        @click="onClickArea('1308')"
      />
      <div
        class="area-yue-lan-shi"
        @click="onClickArea('1302')"
      />
      <div
        class="area-dian-xing-ren-wu-ting"
        @click="onClickArea('1310')"
      />
      <div
        class="area-ying-xiang-ting"
        @click="onClickArea('1307')"
      />
      <div
        class="area-fa-zhan-li-cheng-ting"
        @click="onClickArea('1300')"
      />
      <div
        class="area-xu-ting"
        @click="onClickArea('1294')"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      targetSceneCode: '',
    }
  },
  beforeDestroy() {
    window.addEventListener('message', this.onMsg, false)
  },
  methods: {
    onMsg(msg) {
      console.log('message received!', msg)
      window.removeEventListener('message', this.onMsg, false)
      if (msg.data === 'quiz over') {
        // 跳转到新场景
        const newLocation = location.href.split('?')[0] + `?m=${this.targetSceneCode}`
        location.assign(newLocation)
        location.reload(true)
      }
    },
    onClickArea(targetSceneCode) {
      // 注意，因为网站用了vue router, url里看上去像是查询片段的那一段其实是放在hash片段中的。
      const currentLocationQuerySection = new URLSearchParams(location.href.split('?')[1])
      const currentSceneCode = currentLocationQuerySection.get('m')

      if (currentSceneCode === '1300' && targetSceneCode === '1302') {
        this.$emit('close')
        const iframeElem = document.createElement('iframe')
        iframeElem.style.position = 'absolute'
        iframeElem.style.top = '50%'
        iframeElem.style.left = '50%'
        iframeElem.style.width = '600px'
        iframeElem.style.height = '800px'
        iframeElem.style.transform = 'translate(-50%, -50%)'
        iframeElem.style.zIndex = '9999'
        iframeElem.style.boxShadow = '0 0 0 1000px rgba(0, 0, 0, 0.85)'
        // iframeElem.src = 'http://192.168.20.16:8081/#/topic'
        iframeElem.src = '../quiz/index.html#/topic'
        document.documentElement.appendChild(iframeElem)

        this.targetSceneCode = targetSceneCode
        window.addEventListener('message', this.onMsg, false)
      } else {
        // 跳转到新场景
        const newLocation = location.href.split('?')[0] + `?m=${targetSceneCode}`
        location.assign(newLocation)
        location.reload(true)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.big-map {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  > button.close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > .map-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    > img.map {
      width: 700px;
      height: auto;
    }
    > .area-zhong-da-gong-cheng {
      position: absolute;
      left: 28%;
      top: 5%;
      width: 44%;
      height: 20%;
      cursor: pointer;
    }
    > .area-yue-lan-shi {
      position: absolute;
      left: 16%;
      top: 26%;
      width: 22%;
      height: 25%;
      cursor: pointer;
    }
    > .area-dian-xing-ren-wu-ting {
      position: absolute;
      left: 39%;
      top: 26%;
      width: 22%;
      height: 25%;
      cursor: pointer;
    }
    > .area-ying-xiang-ting {
      position: absolute;
      left: 61.5%;
      top: 26%;
      width: 22%;
      height: 25%;
      cursor: pointer;
    }
    > .area-fa-zhan-li-cheng-ting {
      position: absolute;
      left: 21%;
      top: 54%;
      width: 58%;
      height: 20%;
      cursor: pointer;
    }
    > .area-xu-ting {
      position: absolute;
      left: 33%;
      top: 75%;
      width: 34%;
      height: 17%;
      cursor: pointer;
    }
  }
}

.mobile {
  .big-map {
    > button.close {
      top: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      > img {
      }
    }
    > .map-wrapper {
      > img.map {
        width: 95vw;
        height: auto;
      }
    }
  }
}
</style>