<template>
  <el-dialog :title="`全景查看${name}`" :visible.sync="Visible" :before-close="changeClose" :modal-append-to-body="false" :append-to-body="true" top="10vh" width="80%">
    <div class="bigVr" style="height: 100%">
      <i class="el-icon-s-platform" @click="show = !show"> </i>
      <iframe :src="url" style="width: 100%; height: 100%" frameborder="0"></iframe>
      <div class="vR-model" v-if="show">
        <div v-for="v in vrList" :key="v.name" @click="handel(v)">
          {{ v.name }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    Visible: false,
  },
  data () {
    return {
      vrList: [
        {
          name: "202310",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_567e3765e",
        },
        {
          name: "202311",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_617ee7763",
        },
        {
          name: "202312",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_084c50d78",
        },
        {
          name: "202401",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_52206cab0",
        },
        {
          name: "202403",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_6c458107f",
        },
        {
          name: "202404",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_7269e0b76",
        },
        {
          name: "202405",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_ec9f5225e",
        },
        {
          name: "202406",
          url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_f2e082aa2 ",
        },
      ],
      show: false,
      url: "https://vr.baidu.com/vrcc/pano-share.html?shareId=share_52206cab0",
      name: "202401",
    };
  },
  methods: {
    handel (v) {
      this.url = v.url;
      this.show = false;
      this.name = v.name;
    },
    changeClose(){
      this.$parent.handleClose()
    }
  },
};
</script>
<style lang="less">
.bigVr {
  position: relative;
  i {
    position: absolute;
    right: 55px;
    top: -53px;
    font-size: 40px;
    color: #02feff;
  }
  .vR-model {
    position: absolute;
    right: 55px;
    top: -3px;
    background: rgba(21, 51, 115, 0.7);
    border-radius: 5px 5px 5px 5px;
    padding: 20px;
    color: #fff;

    > div {
      margin-bottom: 10px;
      &:hover {
        color: #02feff;
      }
    }
  }
}
</style>
