<!--
  Description: 场站管理-设备控制面板
  Author: 李亚光
  Date: 2024-09-05
 -->
<script lang="ts" setup name="StationDeviceControlBoard">
const img = {
  zuoshang: new URL('@/assets/images/device-control/zuoshang.png', import.meta.url),
  shang: new URL('@/assets/images/device-control/shang.png', import.meta.url),
  youshang: new URL('@/assets/images/device-control/youshang.png', import.meta.url),
  zuo: new URL('@/assets/images/device-control/zuo.png', import.meta.url),
  shuaxin: new URL('@/assets/images/device-control/shuaxin.png', import.meta.url),
  you: new URL('@/assets/images/device-control/you.png', import.meta.url),
  zuoxia: new URL('@/assets/images/device-control/zuoxia.png', import.meta.url),
  xia: new URL('@/assets/images/device-control/xia.png', import.meta.url),
  youxia: new URL('@/assets/images/device-control/youxia.png', import.meta.url),
  fangda: new URL('@/assets/images/device-control/fangda.png', import.meta.url),
  suoxiao: new URL('@/assets/images/device-control/suoxiao.png', import.meta.url),
  guangquanfangda: new URL('@/assets/images/device-control/guangquanfangda.png', import.meta.url),
  guangquansuoxiao: new URL('@/assets/images/device-control/guangquansuoxiao.png', import.meta.url),
  jiaodianqianyi: new URL('@/assets/images/device-control/jiaodianqianyi.png', import.meta.url),
  jiaodianhouyi: new URL('@/assets/images/device-control/jiaodianhouyi.png', import.meta.url),
}

const direction = ref<any[]>([
  {
    name: '左上',
    img: img.zuoshang,
  },
  {
    name: '上',
    img: img.shang,
  },
  {
    name: '右上',
    img: img.youshang,
  },
  {
    name: '左',
    img: img.zuo,
  },
  {
    name: '刷新',
    img: img.shuaxin,
  },
  {
    name: '右',
    img: img.you,
  },
  {
    name: '左下',
    img: img.zuoxia,
  },
  {
    name: '下',
    img: img.xia,
  },
  {
    name: '右下',
    img: img.youxia,
  },
])
const focus = ref<any>([
  {
    name: '缩小',
    img: img.suoxiao,
  },
  {
    name: '放大',
    img: img.fangda,
  },
  {
    name: '焦点后移',
    img: img.jiaodianhouyi,
  },
  {
    name: '焦点前移',
    img: img.jiaodianqianyi,
  },
  {
    name: '光圈缩小',
    img: img.guangquansuoxiao,
  },
  {
    name: '光圈放大',
    img: img.guangquanfangda,
  },
])
const value = ref(50)
// 控制
const control = (type: string) => {
  const ele = document.getElementById(type) as HTMLElement
  ele.setAttribute('style', 'padding: 5px')
  setTimeout(() => {
    ele.setAttribute('style', 'padding: 8px')
  }, 100)
}
</script>

<template>
  <div class="container">
    <div class="left">
      <el-tooltip
        v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
        placement="top"
      >
        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
      </el-tooltip>
    </div>
    <div class="right">
      <el-tooltip
        v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
        placement="top"
      >
        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
      </el-tooltip>
    </div>
    <div class="slider">
      <el-slider v-model="value" show-input />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .left {
    width: 55%;
    // background-color: aqua;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .img {
      width: 31%;
      border: 2px solid #777;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 5px;
      margin-bottom: 6px;
      opacity: 0.6;

      &:hover {
        // padding: 8px;
        cursor: pointer;
      }
    }
  }

  .right {
    width: 34%;
    // background-color: chartreuse;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .img {
      width: 48%;
      border: 2px solid #777;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 5px;
      margin-bottom: 6px;
      opacity: 0.6;

      &:hover {
        // padding: 8px;
        cursor: pointer;
      }
    }
  }

  .slider {
    margin-top: 10px;
    width: 100%;
  }
}
</style>