<template>
  <div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="boxTop">
      <img src="./img/leftTitle.png" alt="" class="img1" />
      <div class="boxTopRight">
        <div class="index_animation__s5UDk" />
        <ul v-for="(item, index) in titleList" :key="index">
          <li
            :style="{
              'background-image': current == index ? `url(${titleImg1})` : `url(${titleImg2})`,
              color: current == index ? 'rgb(46, 255, 183)' : '',
            }"
            @click="handleTabs(item, index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <component :is="key" :base-id="baseId" />
    <base-select v-model="baseId" :type="2" />
  </div>
</template>

<script>
// import './flexible'
import pageOne from './pageOne';
import pageTwo from './pageTwo';
import pageThree from './pageThree';
import pageLand from './pageLand';
import pageFour from './pageFour';
import pageFive from './pageFive';
export default {
  name: '',
  components: {
    pageOne,
    pageTwo,
    pageLand,
    pageThree,
    pageFour,
    pageFive,
  },
  provide() {
    return {
      getType: () => this.key,
      getX: () => this.scale.x,
      getY: () => this.scale.y,
    };
  },
  data() {
    return {
      baseId: null,
      titleList: [
        { name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
        { name: '土地资源', type: 'pageLand' },
        { name: '科技支撑', type: 'pageTwo' },
        { name: '产业基地', type: 'pageThree' },
        { name: '全维监测', type: 'pageFour' },
        { name: '农产品溯源', type: 'pageFive' },
      ],
      titleImg1: require('./img/1.png'),
      titleImg2: require('./img/2.png'),
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
      },
      current: 0,
      key: 'pageOne',
      scale: {},
    };
  },
  mounted() {
    this.setScale();
    /* 窗口改变事件*/
    window.onresize = () => {
      this.setScale();
    };
  },
  methods: {
    handleTabs(item, index) {
      window.addEventListener('resize', () => {
        this.setScale();
      });
      if (index != this.current) {
        this.current = index;
        this.key = item.type;
      }
    },
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      return { x: w, y: h };
    },
    setScale() {
      this.scale = this.getScale();
      this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)';
    },
  },
};
</script>
<style lang="scss" scoped>
.dataScreen-container {
  position: fixed;
  z-index: 100;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  background: url('./img/bg.png');
  background-size: 100% 100%;
  user-select: none;
  .boxTop {
    position: absolute;
    width: 100%;
    height: 75px;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    .img1 {
      width: 30%;
      height: auto;
    }
    .boxTopRight {
      width: 70%;
      height: 90%;
      border-bottom: 1px solid skyblue;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      .index_animation__s5UDk {
        animation: index_animation 4s linear infinite;
        background: url('./img/animation.png') no-repeat;
        bottom: 0;
        height: 6px;
        left: -20%;
        position: absolute;
        width: 20%;
      }
      @keyframes index_animation {
        from {
          left: -20%;
        }
        to {
          left: 110%;
        }
      }
      ul li {
        list-style: none;
        width: 100px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        background-size: 100% 100%;
        cursor: pointer;
        font-size: 16px;
      }
    }
  }
}
</style>
