<template>
  <div class="ptz-page">
    <ul class="left">
      <li v-for="(item,index) in leftList" :key="index" @mouseover="setLeftImg(item.imgSrchov,index)"
        @mouseout="setLeftImg(item.imgSrc,index)" :ref="'ref_left'+index"
        :style="{backgroundImage: 'url(' + item.img + ')'}" />
      </li>
    </ul>
    <ul class="right">
      <li v-for="(item,index) in rightList" :key="index" @mouseover="setRightImg(item.imgSrchov,index)"
        @mouseout="setRightImg(item.imgSrc,index)" :ref="'ref_right'+index"
        :style="{backgroundImage: 'url(' + item.img + ')'}">
        {{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ptz',
  data() {
    return {
      leftList: [
        {
          name: '左上',
          imgSrc: require('./imgs/videoControl/leftTop.png'),
          imgSrchov: require('./imgs/videoControl/leftTop_active.png'),
        },
        {
          name: '上',
          imgSrc: require('./imgs/videoControl/top.png'),
          imgSrchov: require('./imgs/videoControl/top_active.png'),
        },
        {
          name: '右上',
          imgSrc: require('./imgs/videoControl/rightTop.png'),
          imgSrchov: require('./imgs/videoControl/rightTop_active.png'),
        },
        {
          name: '左',
          imgSrc: require('./imgs/videoControl/left.png'),
          imgSrchov: require('./imgs/videoControl/left_active.png'),
        },
        {
          name: '处置',
          imgSrc: require('./imgs/videoControl/handle.png'),
          imgSrchov: require('./imgs/videoControl/handle_active.png'),
        },
        {
          name: '右',
          imgSrc: require('./imgs/videoControl/right.png'),
          imgSrchov: require('./imgs/videoControl/right_active.png'),
        },
        {
          name: '左下',
          imgSrc: require('./imgs/videoControl/leftBottom.png'),
          imgSrchov: require('./imgs/videoControl/leftBottom_active.png'),
        },
        {
          name: '下',
          imgSrc: require('./imgs/videoControl/bottom.png'),
          imgSrchov: require('./imgs/videoControl/bottom_active.png'),
        },
        {
          name: '右上',
          imgSrc: require('./imgs/videoControl/rightBottom.png'),
          imgSrchov: require('./imgs/videoControl/rightBottom_active.png'),
        },
      ],
      rightList: [
        {
          name: '缩放+',
          imgSrc: require('./imgs/videoControl/add.png'),
          text: '',
          imgSrchov: require('./imgs/videoControl/add_active.png'),
        },
        { name: '缩放', imgSrc: '', text: '缩放', imgSrchov: '' },
        {
          name: '缩放-',
          imgSrc: require('./imgs/videoControl/reduce.png'),
          text: '',
          imgSrchov: require('./imgs/videoControl/reduce_active.png'),
        },
        {
          name: '焦距+',
          imgSrc: require('./imgs/videoControl/add.png'),
          text: '',
          imgSrchov: require('./imgs/videoControl/add_active.png'),
        },
        { name: '焦距', imgSrc: '', text: '焦距', imgSrchov: '' },
        {
          name: '焦距-',
          imgSrc: require('./imgs/videoControl/reduce.png'),
          text: '',
          imgSrchov: require('./imgs/videoControl/reduce_active.png'),
        },
        {
          name: '光圈+',
          imgSrc: require('./imgs/videoControl/add.png'),
          text: '',
          imgSrchov: require('./imgs/videoControl/add_active.png'),
        },
        { name: '光圈', imgSrc: '', text: '光圈', imgSrchov: '' },
        {
          name: '光圈-',
          imgSrc: require('./imgs/videoControl/reduce.png'),
          text: '',
          imgSrchov: require('./imgs/videoControl/reduce_active.png'),
        },
      ],
    }
  },
  mounted() {
    this.initImg()
  },
  methods: {
    initImg() {
      this.leftList = this.leftList.map((v) => {
        v.img = v.imgSrc
        return v
      })
      this.rightList = this.rightList.map((v) => {
        v.img = v.imgSrc
        return v
      })
    },

    setLeftImg(src, index) {
      this.$nextTick(() => {
        let ref = this.$refs['ref_left' + index][0]
        ref.style.backgroundImage = 'url(' + src + ')'
      })
    },
    setRightImg(src, index) {
      this.$nextTick(() => {
        let ref = this.$refs['ref_right' + index][0]
        ref.style.backgroundImage = 'url(' + src + ')'
      })
    },
  },
}
</script>

<style scoped>
.ptz-page {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ptz-page .left,
.ptz-page .right {
  height: 180px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.ptz-page .left li,
.ptz-page .right li {
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  cursor: pointer;
  color: #52bdf9;
  text-align: center;
  line-height: 40px;
}
</style>
