<template>
  <div class="ob-runto-content">
    <div class="ob-left-content">
      <div class="ob-left-box">
        <div style="position: relative;">
          <img :src="headerImage" class="ob-left-header">
        </div>
        <div class="ob-left-warpper">
          <div v-for="(item,index) in arr" :key="index" class="ob-left-item">
            <img :src="item.icon">
          </div>
        </div>
        <div class="ob-left-warpper">
          <img v-for="(item,key) in arr2" :key="key" :src="item.icon" class="ob-left-linebox">
        </div>
      </div>
      <div v-show="!shrinkFlag" class="ob-left-none" @click="goShink" />
    </div>
    <img :src="arrowImage" class="ob-left-arrow" @click="handelClick">
    <div class="ob-right-box">
      <img src="./images/tuopu.svg" class="ob-tuopu" @click="openDrawer">
    </div>
    <TopologyDrawer :drawer-flag="drawerFlag" @handleClose="handleClose" />
  </div>
</template>
<script>
import TopologyDrawer from './topologyDrawer.vue'
export default {
  components: {
    TopologyDrawer
  },
  data() {
    return {
      arr: [{
        name: 1,
        icon: require('./images/img1.svg')
      }, {
        name: 2,
        icon: require('./images/img2.svg')
      }],
      arr3: [{
        name: 1,
        icon: require('./images/img1.svg')
      }, {
        name: 2,
        icon: require('./images/img2.svg')
      }],
      arrOrigin: [{
        name: 1,
        icon: require('./images/img1.svg')
      }, {
        name: 2,
        icon: require('./images/img2.svg')
      }, {
        name: 3,
        icon: require('./images/img3.svg')
      }, {
        name: 4,
        icon: require('./images/img4.svg')
      }],
      arr2: [{
        name: 1,
        icon: require('./images/serve1.svg')
      }, {
        name: 2,
        icon: require('./images/serve2.svg')
      }, {
        name: 3,
        icon: require('./images/serve3.svg')
      }, {
        name: 4,
        icon: require('./images/serve4.svg')
      }, {
        name: 5,
        icon: require('./images/serve5.svg')
      }, {
        name: 6,
        icon: require('./images/serve6.svg')
      }, {
        name: 7,
        icon: require('./images/serve7.svg')
      }],
      shrinkFlag: true,
      drawerFlag: false
    }
  },
  computed: {
    headerImage() {
      return this.shrinkFlag ? require('./images/performance1.svg') : require('./images/performance.svg')
    },
    arrowImage() {
      return this.shrinkFlag ? require('./images/arrow.svg') : require('./images/arrow2.svg')
    }
  },
  methods: {
    handelClick() {
      const box = document.querySelector('.ob-left-box')
      this.shrinkFlag = !this.shrinkFlag
      box.style.width = this.shrinkFlag ? '350px' : '680px'
      box.style.overflow = this.shrinkFlag ? 'hidden' : 'overlay'
      const imgBox = document.querySelector('.ob-left-arrow')
      const leftBox = document.querySelector('.ob-left-content')
      if (this.shrinkFlag) { // 收缩状态
        this.goShink(1)
      } else { // 展开
        this.arr = JSON.parse(JSON.stringify(this.arrOrigin))
        imgBox.style.left = '690px'
        leftBox.style.width = '100%'
        this.$nextTick(() => {
          const imgboxArr = document.querySelectorAll('.ob-left-item')
          imgboxArr.forEach((item) => {
            item.style.width = '25%'
          })
          const lineBoxArr = document.querySelectorAll('.ob-left-linebox')
          lineBoxArr.forEach((item) => {
            item.style.width = '50%'
          })
        })
      }
    },
    openDrawer() {
      this.drawerFlag = true
    },
    handleClose() {
      this.drawerFlag = false
    },
    goShink(type = 2) {
      if (type !== 1) {
        this.shrinkFlag = true
      }
      const box = document.querySelector('.ob-left-box')
      box.style.width = this.shrinkFlag ? '350px' : '680px'
      box.style.overflow = this.shrinkFlag ? 'hidden' : 'overlay'
      const imgBox = document.querySelector('.ob-left-arrow')
      const leftBox = document.querySelector('.ob-left-content')
      this.arr = JSON.parse(JSON.stringify(this.arr3))
      imgBox.style.left = '360px'
      leftBox.style.width = 'fit-content'
      this.$nextTick(() => {
        const imgboxArr = document.querySelectorAll('.ob-left-item')
        imgboxArr.forEach((item) => {
          item.style.width = '50%'
        })
        const lineBoxArr = document.querySelectorAll('.ob-left-linebox')
        lineBoxArr.forEach((item) => {
          item.style.width = '100%'
        })
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.ob-runto-content{
  height: calc(100vh - 45px);
  margin-top:-10px;
  position: relative;
  .ob-left-content{
    overflow: hidden;
    position: absolute;
    left: 0;
    height:100%;
    width:fit-content;
    display: flex;
  }
  .ob-left-none{
    width: calc(100% - 680px);
    background: rgba(0,0,0,0.5);
    cursor: pointer;
  }
  .ob-left-box{
    width: 350px;
    background: white;
    padding:10px 10px 0 10px;
  }
  .ob-right-box{
    cursor: pointer;
    padding:40px;
    margin-left: 350px;
    width:fit-content;
    height: 100%;
    .ob-tuopu{
      width: 100%;
      height: 500px;
      margin-top:15px;
      height: 100%;
    }
  }
  .ob-left-header{
    width:100%;
    height:130px;
  }
  .ob-left-arrow{
    position: absolute;
    top: 10px;
    left: 360px;
    cursor: pointer;
    width:20px;
    height: 20px;
  }
  .ob-left-item{
    width:50%;
    height:175px;
    // margin-right: 10px;
    img{
      width:100%;
    }
    img:last-child{
      margin-right: 0;
    }
  }
  .ob-left-warpper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;
  }
  .ob-left-linebox{
    max-width: 100%;
    img{
      width:100%;
    }
  }
}
</style>
