<template>
  <div class="thumb-example">
    <div class="picTop">
      <!-- 判断是否是图片并且不为空 -->

      <div
        class="bigimg"
        v-if="
          bigPicPath.indexOf('nopic') == -1 &&
          bigPicPath.indexOf('videos') == -1
        "
        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
      >
        <el-button
          class="downBtn"
          @click.stop="
            downLoadPic(
              bigPicPath.substring(0, bigPicPath.length - 9),
              bigPicPath.substring(0, bigPicPath.length - 9)
            )
          "
          >下载图片</el-button
        >
        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
        <div
          class="nosee"
          :style="'backgroundImage:url(' + bigPicPath + ')'"
        ></div>
        <div class="bigimgView" @click="handleBigPicbox(bigArr, bigPicPath)">
          <img id="bigimg" ref="picJpg" class="animImg" :src="bigPicPath" />
        </div>
        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
        <canvas id="bigCanvas" class="myCanvas2" ref="myCanvasbig"></canvas>
        <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
      </div>
      <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
        <video
          width="100%"
          height="100%"
          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
          controls="controls"
          :poster="videopath"
          autoplay
        ></video>
      </div>
      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
        <img
          class="animImg"
          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
        />
      </div>

      <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div
        class="arrow rightArrow"
        v-if="this.bigNum < this.terminalPhoto.length - 1"
        @click="rightClick"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="picBottom">
      <ul class="smallPicBox">
        <li
          v-for="(item, index) in fiveList"
          @click="handleBigpic(item, index)"
          :class="activeSmall === index ? 'borderActive' : ''"
        >
          <div
            class="smallhavePic"
            v-if="
              item.path.indexOf('nopic') == -1 &&
              item.path.indexOf('videos') == -1
            "
          >
            <img :src="item.path + '!260x160'" />
            <p class="timeInfo">
              <el-tooltip
                class="item"
                effect="dark"
                content="拍照时间"
                placement="top-start"
              >
                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
              </el-tooltip>

              (
              <el-tooltip
                class="item"
                effect="dark"
                content="图片上传时间"
                placement="top-start"
              >
                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
              </el-tooltip>
              )
              <span
                >--{{
                  item.alias !== null && item.alias !== ""
                    ? item.alias
                    : item.channelName
                }}</span
              >
              <span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
            </p>
          </div>
          <div
            class="smallnoPic"
            v-else-if="item.path.indexOf('videos') !== -1"
          >
            <img
              src="../../assets/img/loading.jpg"
              style="object-fit: cover"
              v-if="item.thumb == null"
            />
            <img :src="item.thumb" v-else />
            <p class="videoicon"><i class="el-icon-video-play"></i></p>
            <p class="timeInfo">
              <el-tooltip
                class="item"
                effect="dark"
                content="拍照时间"
                placement="top-start"
              >
                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
              </el-tooltip>

              (
              <el-tooltip
                class="item"
                effect="dark"
                content="图片上传时间"
                placement="top-start"
              >
                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
              </el-tooltip>
              )
              <span
                >--{{
                  item.alias !== null && item.alias !== ""
                    ? item.alias
                    : item.channelName
                }}</span
              >
            </p>
          </div>
          <div class="smallnoPic" v-else>
            <img :src="item.path" />
          </div>
        </li>
      </ul>
      <div
        class="arrow leftArrow"
        v-if="this.page != 1"
        @click="smallLeftClick"
      >
        <i class="el-icon-arrow-left"></i>
      </div>
      <div
        class="arrow rightArrow"
        v-if="this.page < this.total"
        @click="smallRightClick"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>

    <!-- 点击出现大图 -->
    <div
      v-if="showBigpic"
      class="showPic"
      v-loading="canvasloading"
      @click="closePic($event)"
    >
      <div
        class="picboxI"
        @mousewheel.prevent="rollImg"
        :style="{
          transform: 'scale(' + zoomD + ')',
        }"
        @mousedown="move"
      >
        <img
          @load="imgOnload"
          id="bigimg2"
          ref="bigimgref"
          class="maskPic img"
          :src="bigImgPath"
        />
        <!-- <canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig2"></canvas> -->
        <canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig"></canvas>
      </div>
      <div class="viewClose" @click="closePic($event)">
        <i class="el-icon-close"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
export default {
  components: {},
  props: {
    terminalPhoto: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      OptionssalseImg: {
        inline: false,
        button: true,
        navbar: false,
        title: false,
        toolbar: false,
        tooltip: false,
        zoomable: true,
        url: "src",
      },
      isshowArrow: true, //判断是否显示切换按钮
      mediaType: "", //判断图片类型是视频还是图片
      bigPicPath: "", //大图地址
      videopath: "",
      smallPicPath: "", //小图地址
      bigNum: 0, //判断大图是第几张
      fiveList: [], //小图图片list
      activeSmall: 0, //索引选中小图,
      page: 1, //当前第几页
      pagesize: 5, //每页显示五条
      total: 0, //总共又几页

      localPoints: [], //画图对象
      canvas: null,
      ctx: null,
      imgpic: null,
      color: "",
      num: "",
      showBigpic: false,
      flagline: true,
      markEnable: "",
      zoomD: 1,
      canvasloading: false,
      bigImgPath: "",

      //告警原因
      alarmMark: true,
      textInfo: "",
      alarmList: [],
      bigArr: "",
    };
  },
  mounted() {
    console.log(this.terminalPhoto);
    this.mediaType = this.terminalPhoto[0].mediaType;
    this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
    this.bigArr = this.terminalPhoto[0];
    // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
    this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
    this.total = this.terminalPhoto.length / this.pagesize;
    console.log(this.fiveList);
    //this.alarmList = this.fiveList[0].alarmlist;
    this.alarmList = this.fiveList[0].alarmlist;
    console.log(this.alarmList[0]);
    if (this.alarmList.length !== 0) {
      this.$nextTick(() => {
        this.drawlineBig(this.alarmList[0]);
      });
    }

    //获取points
    getCoordinate({
      channelId:
        this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
      needPic: "0",
      termId: this.fiveList[0].termId,
    })
      .then((res) => {
        console.log(res);
        this.localPoints = res.data.list;
        this.color = res.data.color;
        this.num = res.data.boderWidth;
        this.markEnable = res.data.markEnable;
        if (this.markEnable === 1) {
          this.drawline();
        }
      })
      .catch((err) => {});
  },
  watch: {
    terminalPhoto: function (newVal, oldVal) {
      this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
      this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
      this.total = this.terminalPhoto.length / this.pagesize;
      //this.drawlineBig(this.terminalPhoto[0].alarmList[0])
    },
  },
  created() {},
  methods: {
    async downLoadPic(path, name) {
      const imgUrl = path;
      const response = await fetch(imgUrl);
      const blob = await response.blob();
      // 创建下载链接
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      // 释放 Blob URL
      window.URL.revokeObjectURL(url);
    },
    // showbigpicPath(data) {
    //   console.log(data);
    //   if (data.includes("!")) {
    //     this.bigPicPath = data.substring(0, data.length - 9);
    //   } else {
    //     this.bigPicPath = data;
    //     this.bgbigPath = data;
    //   }

    //   console.log(this.bigPicPath);
    // },
    // handleBigPicbox() {
    //   this.showBigpic = true;
    // },
    //移动demo
    move(e) {
      console.log(e);
      e.preventDefault();
      // 获取元素
      var personBox = document.querySelector(".picboxI");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      personBox.addEventListener("mousemove", move);
      console.log(personBox.addEventListener("mousemove", move));
      console.log(personBox.style);
      function move(e) {
        console.log(personBox.style.left);
        personBox.style.left = e.pageX - x + "px";
        personBox.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function () {
        personBox.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      personBox.addEventListener("mouseout", function () {
        personBox.removeEventListener("mousemove", move);
      });
    },
    // 缩放图片
    rollImg(e) {
      let direction = e.deltaY > 0 ? "down" : "up";
      if (direction === "up") {
        // 滑轮向上滚动
        this.large();
      } else {
        // 滑轮向下滚动
        this.Small();
      }
    },
    //大
    large() {
      this.$nextTick(() => {
        if (this.zoomD < 6) {
          this.zoomD += 0.1;
        }
        document.querySelector(
          ".picboxI"
        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
      });
    },
    // 小
    Small() {
      this.$nextTick(() => {
        if (this.zoomD > 0.3) {
          this.zoomD -= 0.1;
        }
        document.querySelector(
          ".picboxI"
        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
      });
    },
    imgOnload() {
      console.log("加载完成");
      this.canvasloading = false;
    },
    //放大图
    handleBigPicbox(bigArr, val) {
      console.log(val);
      console.log(bigArr);
      //this.canvasloading = true;
      this.showBigpic = true;
      this.bigImgPath = val.substring(0, val.length - 9);
      this.alarmList = bigArr.alarmlist;
      setTimeout(() => {
        this.$nextTick(() => {
          this.drawlineBig2(this.alarmList[0]);
        });
      }, 100);
    },
    closePic(e) {
      console.log(e);
      var btn = this.$refs.bigimgref;
      console.log(btn);
      if (btn) {
        if (!btn.contains(event.target)) {
          //按钮.app-download以外的区域
          this.zoomD = 1;
          this.showBigpic = false;
        }
      }
      //
      // this.showBigpic = false;
    },
    openline() {
      this.flagline = true;
      console.log("11111111111111111111111111", this.flagline);
      updateMarkEnableStatus({
        status: 1,
      }).then((res) => {
        console.log(res);
      });
      this.drawline();
    },
    drawline() {
      this.canvas = this.$refs.myCanvas;
      this.imgpic = this.$refs.picJpg;
      console.log(this.canvas);
      console.log(this.imgpic);
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
      this.ctx = this.canvas.getContext("2d");
      console.log(this.localPoints);
      if (this.flagline == true) {
        this.localPoints = this.localPoints;
      } else {
        this.localPoints = [];
      }
      console.log(this.ctx);
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = this.color;
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = this.num;
      for (var i = 0; i < this.localPoints.length; i++) {
        this.ctx.moveTo(
          this.localPoints[i].x1 * this.imgpic.width,
          this.localPoints[i].y1 * this.imgpic.height
        );
        this.ctx.lineTo(
          this.localPoints[i].x2 * this.imgpic.width,
          this.localPoints[i].y2 * this.imgpic.height
        );
      }

      this.ctx.closePath();
      this.ctx.stroke();
    },
    //不显示绘制线
    handelClear() {
      // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.flagline = false;
      updateMarkEnableStatus({
        status: 0,
      }).then((res) => {
        console.log(res);
      });
    },
    getphotoList() {
      this.fiveList = this.terminalPhoto.slice(
        (this.page - 1) * this.pagesize,
        this.page * this.pagesize
      );
      this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
      this.bigArr = this.fiveList[this.activeSmall];
      this.videopath = this.fiveList[this.activeSmall].thumb;
      if (this.fiveList[this.activeSmall].isAlarm == 1) {
        console.log("告警");
        this.alarmList = this.fiveList[this.activeSmall].alarmlist;
        this.drawlineBig(this.alarmList[0]);
      } else {
        // this.canvas = document.getElementById("bigCanvas");
        // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    },
    //绘制大图告警区域
    drawlineBig(data) {
      console.log(data);
      console.log(document.getElementById("bigCanvas"));
      console.log(document.getElementById("bigimg"));
      this.canvas = document.getElementById("bigCanvas");
      this.imgpic = document.getElementById("bigimg");
      console.log(this.canvas);
      console.log(this.imgpic);
      this.textInfo = data.enname;
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
      console.log(this.canvas.width, this.canvas.height);
      this.ctx = this.canvas.getContext("2d");
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 1;
      // 绘制矩形
      var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
        scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
      console.log(scaleX, scaleY);
      var top = data.x * scaleX,
        left = data.y * scaleY,
        width = data.width * scaleX,
        height = data.height * scaleY;
      console.log(top, left, width, height);
      // this.ctx.strokeStyle = "red"; //线的颜色
      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
      this.ctx.font = "14px normal";
      this.ctx.fillStyle = "#ff0000";
      //this.ctx.fillText(this.textInfo, top, left + 24);
      //距离上面有空间
      if (left > 32) {
        this.ctx.fillText(this.textInfo, top, left - 4);
      } else if (this.canvas.height - left + height > 32) {
        this.ctx.fillText(this.textInfo, top, height - 4);
      }
      this.ctx.closePath();
      this.ctx.stroke();
    },
    //绘制大图告警区域
    drawlineBig2(data) {
      console.log(data);
      console.log(document.getElementById("bigCanvas2"));
      console.log(document.getElementById("bigimg"));
      this.canvas = document.getElementById("bigCanvas2");
      this.imgpic = document.getElementById("bigimg2");
      console.log(this.canvas);
      console.log(this.imgpic);
      this.textInfo = data.enname;
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
      console.log(this.canvas.width, this.canvas.height);
      this.ctx = this.canvas.getContext("2d");
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 1;

      // 绘制矩形
      var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
        scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
      console.log(scaleX, scaleY);
      var top = data.x * scaleX,
        left = data.y * scaleY,
        width = data.width * scaleX,
        height = data.height * scaleY;
      console.log(top, left, width, height);
      // this.ctx.strokeStyle = "red"; //线的颜色
      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
      this.ctx.font = "14px normal";
      this.ctx.fillStyle = "#ff0000";
      //this.ctx.fillText(this.textInfo, top, left + 24);
      //距离上面有空间
      if (left > 32) {
        this.ctx.fillText(this.textInfo, top, left - 4);
      } else if (this.canvas.height - left + height > 32) {
        this.ctx.fillText(this.textInfo, top, height - 4);
      }
      this.ctx.closePath();
      this.ctx.stroke();
    },
    //大图点击左侧切换图片
    leftClick() {
      this.bigNum--; //执行下一张
      this.activeSmall--;
      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
      console.log(this.page);
      if (this.activeSmall < 0) {
        this.activeSmall = 4;
        this.smallLeftClick();
      }
      this.mediaType = this.fiveList[this.bigNum].mediaType;
      this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
      this.bigArr = this.fiveList[this.activeSmall];
      if (this.fiveList[this.bigNum].isAlarm == 1) {
        console.log("告警");
        this.alarmList = this.fiveList[this.bigNum].alarmlist;
        this.drawlineBig(this.alarmList[0]);
      } else {
        this.canvas = document.getElementById("bigCanvas");
        this.ctx = this.canvas.getContext("2d");
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
      console.log(this.fiveList[this.bigNum]);
      getCoordinate({
        channelId: this.fiveList[this.bigNum].channelId,
        needPic: "1",
        termId: this.fiveList[this.bigNum].termId,
      })
        .then((res) => {
          console.log(res);
          this.localPoints = res.data.list;
          if (this.markEnable === 1) {
            this.drawline();
          }
        })
        .catch((err) => {});
    },
    //点击右侧切换图片
    rightClick() {
      console.log("点击切换分页", this.fiveList);
      this.bigNum++; //执行下一张
      this.activeSmall++;
      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
      if (this.activeSmall > 4) {
        this.activeSmall = 0;
        console.log(this.activeSmall);
        this.smallRightClick();
      }
      this.mediaType = this.fiveList[this.bigNum].mediaType;
      this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
      this.bigArr = this.fiveList[this.activeSmall];
      if (this.fiveList[this.bigNum].isAlarm == 1) {
        console.log("告警");
        this.alarmList = this.fiveList[this.bigNum].alarmlist;
        this.drawlineBig(this.alarmList[0]);
      } else {
        this.canvas = document.getElementById("bigCanvas");
        this.ctx = this.canvas.getContext("2d");
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
      getCoordinate({
        channelId: this.fiveList[this.bigNum].channelId,
        needPic: "1",
        termId: this.fiveList[this.bigNum].termId,
      })
        .then((res) => {
          console.log(res);
          this.localPoints = res.data.list;
          if (this.markEnable === 1) {
            this.drawline();
          }
        })
        .catch((err) => {});
    },
    //点击小图变成大图
    handleBigpic(row, index) {
      console.log(row);
      console.log();
      this.activeSmall = index;
      this.bigNum = index;
      this.mediaType = row.mediaType;
      this.bigPicPath = row.path + "!1366x768";
      this.bigArr = row;
      if (row.isAlarm == 1) {
        this.alarmList = row.alarmlist;
        this.drawlineBig(this.alarmList[0]);
      } else {
        this.canvas = document.getElementById("bigCanvas");
        console.log(this.canvas);
        this.ctx = this.canvas.getContext("2d");
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }

      // this.bgbigPath = row.path + "!1366x768";
      getCoordinate({
        channelId: row.channelId,
        needPic: "1",
        termId: row.termId,
      })
        .then((res) => {
          console.log(res);
          this.localPoints = res.data.list;
          if (this.markEnable === 1) {
            this.drawline();
          }
          // this.drawline();
        })
        .catch((err) => {});
    },
    //点击小图切换左侧
    smallLeftClick() {
      this.activeSmall = 0;
      this.bigNum = 0;
      console.log("点击了左侧");
      this.page--;
      if (this.page < 1) {
        this.isshowArrow = false;
      } else {
        this.getphotoList();
      }
      console.log(this.page);
      console.log(this.fiveList);
      //获取points
      getCoordinate({
        channelId: this.fiveList[0].channelId,
        needPic: "0",
        termId: this.fiveList[0].termId,
      })
        .then((res) => {
          console.log(res);
          this.localPoints = res.data.list;
          if (this.markEnable === 1) {
            this.drawline();
          }
          // this.drawline();
        })
        .catch((err) => {});
    },
    //点击小图切换右侧
    smallRightClick() {
      this.activeSmall = 0;
      this.bigNum = 0;
      console.log("点击了右侧");
      console.log(this.page);
      this.page++;
      this.getphotoList();
      console.log(this.fiveList);
      //获取points
      getCoordinate({
        channelId: this.fiveList[0].channelId,
        needPic: "0",
        termId: this.fiveList[0].termId,
      })
        .then((res) => {
          console.log(res);
          this.localPoints = res.data.list;
          if (this.markEnable === 1) {
            this.drawline();
          }
          // this.drawline();
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="less">
.thumb-example {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 32px);
  box-sizing: border-box;

  .picTop {
    width: 100%;
    height: 80%;
    overflow: hidden;
    margin-bottom: 4px;
    position: relative;
    .downBtn {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      right: 8px;
      bottom: 16px;
      color: #fff;
      z-index: 5;
      opacity: 0;
      &:hover {
        background: rgba(0, 0, 0, 0.9);
        color: #169e8c;
      }
    }
    &:hover {
      .arrow {
        opacity: 1;
        transition: all 0.5s ease-in;
      }
      .downBtn {
        opacity: 1;
        transition: all 0.5s ease-in;
      }
    }
    .bigimg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-size: 100% 100%;
      .nosee {
        width: 100%;
        height: 100%;
        position: absolute;
        background-size: 100% 100%;
        z-index: 2;
      }
      .bigimgView {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 3;
        opacity: 0;
        .animImg {
          opacity: 0;
        }
      }
      .mark {
        position: absolute;
        bottom: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        left: 16px;
        font-size: 14px;
        line-height: 24px;
        //opacity: 0;
        transition: bottom 2s ease 0s;
      }
      .myCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 2;
        pointer-events: none;
      }
      .myCanvas2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 3;
        pointer-events: none;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
      cursor: pointer;
    }
    .arrow {
      opacity: 0;
      position: absolute;
      cursor: pointer;
      color: #fff;
      font-size: 16px;
      border-radius: 30px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      line-height: 60px;
      width: 40px;
      height: 40px;
      z-index: 4;
      &:hover {
        color: @color-primary;
      }
    }
    .leftArrow {
      left: 16px;
    }
    .rightArrow {
      right: 16px;
    }
  }
  .picBottom {
    width: 100%;
    height: 20%;
    position: relative;
    .smallPicBox {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      li {
        width: 20%;
        border: 3px solid transparent;
        // overflow: hidden;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: fill;
          cursor: pointer;
        }
        .smallhavePic {
          width: 100%;
          height: 100%;
        }
        .smallnoPic {
          width: 100%;
          height: 100%;
        }
      }
      .timeInfo {
        position: absolute;
        bottom: 0px;
        width: 100%;
        background: #f0f0f0;
        padding: 6px 0px;
        font-size: 12px;
        text-align: center;
        color: #333;
      }
      .alarmSpan {
        color: #f00;
        font-weight: bold;
      }
      .videoicon {
        position: absolute;
        top: 73%;
        left: 10%;
        transform: translate(-50%, -50%);
        i {
          font-size: 28px;
          color: #fff;
        }
      }
      .borderActive {
        .timeInfo {
          //background: @color-primary;
          background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
          color: #fff;
        }
      }
      // .borderActive {
      //   border: 3px solid @color-primary;
      //   &::after {
      //     content: "";
      //     position: absolute;
      //     width: 0;
      //     height: 0;
      //     left: 50%;
      //     top: -16px;
      //     margin-left: -8px;
      //     border-bottom: 13px solid @color-primary;
      //     border-left: 8px solid transparent;
      //     border-right: 8px solid transparent;
      //   }
      // }
    }
    .arrow {
      position: absolute;
      cursor: pointer;
      color: #fff;
      font-size: 12px;
      border-radius: 30px;
      position: absolute;
      top: 45%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      line-height: 60px;
      width: 28px;
      height: 28px;
    }
    .leftArrow {
      left: 16px;
    }
    .rightArrow {
      right: 16px;
    }
  }
  //放大图
  .showPic {
    position: fixed;
    background-color: rgba(0, 0, 0, 50%);
    bottom: 0;
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    .picboxI {
      position: relative;
      width: 85%;
      height: 85%;
      margin: auto;
      animation-name: scaleDraw;
      /*关键帧名称*/
      animation-timing-function: ease;
      /*动画的速度曲线*/
      animation-iteration-count: 1;
      /*动画播放的次数*/
      animation-duration: 0.65s;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        position: absolute;
        cursor: grab;
      }
      .mybigCanvas {
        position: absolute;
        // top: 0;
        // left: 0;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        cursor: pointer;
        pointer-events: none;
      }
    }
    .viewClose {
      -webkit-app-region: no-drag;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      cursor: pointer;
      height: 80px;
      overflow: hidden;
      position: absolute;
      right: -40px;
      top: -40px;
      transition: background-color 0.15s;
      width: 80px;
      .el-icon-close {
        bottom: 16px;
        left: 16px;
        position: absolute;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(0);
    /*开始为原始大小*/
  }

  100% {
    transform: scale(1);
  }
}
// https://v1.github.surmon.me/vue-awesome-swiper/
</style>
