<template>
  <div class="Home">
    <div class="btn" @click="btnFu">开始动画</div>
    <iframe id="iframe" src="./three/index.html" frameborder="0"></iframe>
    <div class="txt" :style="{ opacity: txt.show ? '0.8' : '0' }">
      <h2>{{ txt.title }}</h2>
      <p>{{ txt.con }}</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      iframeDom: null,
      txt: {
        title: "",
        con: "",
        show: false,
      },
      // 屏幕的宽高
      fullNum: {
        width: 0,
        height: 0,
      },
      // 文字展示dom
      txtDom: null,
    };
  },
  computed: {},
  watch: {},
  methods: {
    btnFu() {
      // 调用 iframe 的开始动画
      this.iframeDom.contentWindow.stareMove(true);
    },
  },

  created() {
    // 设置屏幕的宽高
    this.fullNum = {
      width: window.innerWidth,
      height: window.innerHeight,
    };
  },
  mounted() {
    // 文字dom
    this.txtDom = document.querySelector(".txt");

    this.iframeDom = document.querySelector("#iframe");
    // 点击图片
    window.clickObject = (val) => {
      console.log("000", val);
    };
    // 鼠标移入
    window.hoverObject = (val) => {
      let con =
        "我是一个文物介绍，我是一个文物介绍，我是一个文物我是一个一个文物介绍，我是一个文物介绍我是一个文物介绍，我是一个文物介绍，我是一个文物我是一个一个文物介绍，我是一个文物介绍";
      if (val.imgName.includes("1")) {
        con = "xxxxxxxxxx阿三大苏打xxxxxxxxxx阿三大苏打";
      }
      this.txt = {
        title: "文物" + val.imgName,
        con,
        show: true,
      };
    };
    // 鼠标移出
    window.mouseoutObject = (val) => {
      this.txt.show = false;
    };

    // 获取鼠标坐标
    window.mouseLoc = (x, y) => {
      // console.log("ppp", x, y);
      // 最大X值
      const maxX = this.fullNum.width - 200;
      let xRes = x >= maxX ? maxX : x;
      // xRes = xRes - 100 <= 0 ? 0 : xRes - 100;
      // 最大y值
      const domHeight = this.txtDom.clientHeight;
      const maxY = this.fullNum.height - domHeight;
      let yRes = y >= maxY ? maxY : y;
      // yRes = yRes - domHeight / 2 <= 0 ? 0 : yRes - domHeight / 2;
      this.txtDom.style.top = yRes + "px";
      this.txtDom.style.left = xRes + "px";
    };
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.Home {
  width: 100%;
  height: 100%;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .btn {
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: pointer;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }
  .txt {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 200px;
    // height: 185px;
    text-align: center;
    pointer-events: none;
    font-size: 18px;
    opacity: 0;
    // transition: all 0.5s;

    // display: -webkit-box;
    // overflow: hidden;
    // white-space: normal !important;
    // text-overflow: ellipsis;
    // word-wrap: break-word;
    // -webkit-line-clamp: 5;
    // -webkit-box-orient: vertical;
    h2 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 15px;
    }
    p {
      line-height: 24px;
    }
  }
}
</style>
