<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-11-05 09:06:39
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-11-05 14:34:20
 * @FilePath: /ps-fire-protection-web/src/components/Video/Direction.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yt-wrapper flex" v-if="visible">
    <img :src="xxx" alt="" class="xxx" @click="close" />
    <div class="circle flex">
      <div
        class="item flex"
        v-for="(item, index) in directionArr"
        :key="item"
        @mousedown="directionDown(item, index)"
        @mouseup="directionUp"
        @mouseleave="directionLeave"
      >
        <div class="direction" :class="'direction' + (index + 1)">
          <img v-if="index != 4" :src="active === index ? up2 : up1" alt="" />
          <!-- <img v-else :src="xxx" /> -->
          <div class="slider" v-else>
            <el-slider :min="1" :max="10" v-model="speed"></el-slider>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import up1 from "@/assets/images/Video/up1.png";
import up2 from "@/assets/images/Video/up2.png";
import xxx from "@/assets/images/Video/xxx.png";
import { videoControlling } from "@/api/video/artemis.js";
export default {
  name: "",
  props: {
    code: {
      type: String,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: null,
      up1,
      up2,
      xxx,
      speed: 1,
      apiData: {
        cameraIndexCode: null,
        action: 1,
        command: null,
        speed: 1,
      },
      directionArr: [
        "LEFT_UP",
        "UP",
        "RIGHT_UP",
        "LEFT",
        "CENTER",
        "RIGHT",
        "LEFT_DOWN",
        "DOWN",
        "RIGHT_DOWN",
      ],
    };
  },
  methods: {
    directionDown(direction, index) {
      console.log(this.apiData);
      this.apiData.cameraIndexCode = this.code;
      this.active = index;
      if (!this.code) {
        return;
      }
      this.apiData.action = 0;
      this.apiData.command = direction;
      this.apiData.speed = this.speed + 50;
      // 5是中间的，没方向
      if (direction != "CENTER") {
        this.getPreviewURLs(this.apiData);
        console.log("正在移动摄像头");
      }
    },
    directionUp() {
      this.active = null;
      this.apiData.action = 1;
      this.apiData.cameraIndexCode = this.code;
      // this.apiData.speed=0;
      // this.apiData.command=null,
      this.getPreviewURLs(this.apiData);
      console.log("停止");
    },
    directionLeave() {
      // 当有选中的时候才停止
      if (this.active != null) {
        this.directionUp();
      }
    },
    close() {
      this.$emit("update:visible", false);
      // this.directionUp();
    },
    getPreviewURLs(data) {
      videoControlling(data).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.xxx {
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  top: -10px;
  cursor: pointer;
}
.yt-wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  // border: 1px solid red;
  background: rgba(26, 26, 169, 0.5);
  border-radius: 50%;
  right: 16px;
  top: 54px;
  justify-content: center;
  align-items: center;

  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    // border: 1px solid red;
    flex-wrap: wrap;
    .slider {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -5px;
    }
    .item {
      width: 33.3%;
      height: 33.3%;
      // border: 1px solid red;
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .direction {
        width: 25px;
        height: 25px;
        position: relative;
        img {
          width: 100%;
          height: 100;
          position: absolute;
          -webkit-user-drag: none;
        }
        &.direction1 {
          transform: rotate(-45deg);
          img {
            bottom: -7px;
          }
        }
        &.direction2 {
        }
        &.direction3 {
          transform: rotate(45deg);
          img {
            bottom: -7px;
          }
        }
        &.direction4 {
          transform: rotate(-90deg);
        }
        &.direction5 {
          img {
            width: 100%;
            height: 100%;
          }
        }
        &.direction6 {
          transform: rotate(90deg);
        }
        &.direction7 {
          transform: rotate(-135deg);
          img {
            bottom: -7px;
          }
        }
        &.direction8 {
          transform: rotate(180deg);
        }
        &.direction9 {
          transform: rotate(135deg);
          img {
            bottom: -7px;
          }
        }
      }
    }
  }
}
</style>
