<template>
  <div id="supervisory">
    <div class="side-area">
      <Title text="设备列表"></Title>
      <el-input
        prefix-icon="el-icon-search"
        placeholder="监控点名称"
        style="margin-bottom: 12px"
        v-model="filterText"
      ></el-input>
      <ShadowContainer class="tree-shadow-container">
        <div class="tree-container">
          <el-tree
            ref="tree"
            :data="treeData"
            :props="defaultProps"
            icon-class="el-icon-arrow-right"
            :render-content="renderContent"
            :filter-node-method="filterNode"
          ></el-tree>
        </div>
      </ShadowContainer>
      <Title text="云台控制"></Title>
      <ShadowContainer class="control-shadow-container">
        <div class="control-container">
          <div id="direction-control">
            <div
              class="arrow"
              @mousedown="mouseDownEvent('left_up')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-zuoshang"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('up')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-shang"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('right_up')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-youshang"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('left')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-zuo"></i>
            </div>
            <div class="arrow" style="cursor: inherit">
              <i class="iconfont icon-zhongxin"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('right')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-you2"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('left_down')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-zuoxia"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('down')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-xia"></i>
            </div>
            <div
              class="arrow"
              @mousedown="mouseDownEvent('right_down')"
              @mouseup="mouseUpEvent"
            >
              <i class="iconfont icon-youxia"></i>
            </div>
          </div>
          <div id="else-control">
            <div id="focus-control">
              <div
                class="button"
                @mousedown="mouseDownEvent('focus_near')"
                @mouseup="mouseUpEvent"
              >
                <i class="iconfont icon-jiaojufangda"></i>
                <div class="font-text">近焦距</div>
              </div>
              <div
                class="button"
                @mousedown="mouseDownEvent('focus_far')"
                @mouseup="mouseUpEvent"
              >
                <i class="iconfont icon-jiaojusuoxiao"></i>
                <div class="font-text">远焦距</div>
              </div>
            </div>
            <div id="zoom-control">
              <div
                class="button"
                @mousedown="mouseDownEvent('zoom_in')"
                @mouseup="mouseUpEvent"
              >
                <i class="iconfont icon-fangda"></i>
                <div class="font-text">放大</div>
              </div>
              <div
                class="button"
                @mousedown="mouseDownEvent('zoom_out')"
                @mouseup="mouseUpEvent"
              >
                <i class="iconfont icon-suoxiao"></i>
                <div class="font-text">缩小</div>
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="video-out-container">
      <div class="splice-screen">
        <el-button
          :class="[activeSplice == 1 ? 'active' : '']"
          @click="activeSplice = 1"
          >一分屏</el-button
        >
        <el-button
          :class="[activeSplice == 4 ? 'active' : '']"
          @click="activeSplice = 4"
          >四分屏</el-button
        >
        <el-button
          :class="[activeSplice == 6 ? 'active' : '']"
          @click="activeSplice = 6"
          >六分屏</el-button
        >
        <el-button
          :class="[activeSplice == 9 ? 'active' : '']"
          @click="activeSplice = 9"
          >九分屏</el-button
        >
        <el-button @click="closeAll">全部关闭</el-button>
        <el-button @click="viewAll">全部预览</el-button>
      </div>
      <div class="video-area">
        <div
          v-for="(videoImg, index) in activeSplice"
          :key="index"
          :class="[
            'camera',
            activeIndex == index ? 'active' : '',
            `camera-in-${activeSplice}`,
          ]"
          @click="setActiveCamera(index)"
        >
          <div v-if="!cameraList[index] || cameraList[index].player === null">
            <div class="video-info">
              <div class="video-no">{{ index + 1 }}</div>
              <div class="video-description">暂无画面~</div>
            </div>
          </div>
          <div v-else class="video-pic" :ref="`video-js-container-${index}`">
            <i class="el-icon-circle-close" @click="closeSingle(index)"></i>
            <div
              style="width: 100%; height: 100%"
              :id="[`video-out-container-${index + 1}`]"
              class="video-out-container-area"
            >
              <div
                :id="[`video-container-${index + 1}`]"
                style="width: 100%; height: 100%"
              ></div>
              <div
                class="control-bar"
                v-if="
                  isFullScreen &&
                  showControlCameraButton &&
                  !cameraList[index].player !== null
                "
              >
                <div class="control-container" id="full-screen">
                  <div id="direction-control">
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('left_up')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-zuoshang"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('up')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-shang"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('right_up')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-youshang"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('left')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-zuo"></i>
                    </div>
                    <div class="arrow" style="cursor: inherit">
                      <i class="iconfont icon-zhongxin"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('right')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-you2"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('left_down')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-zuoxia"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('down')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-xia"></i>
                    </div>
                    <div
                      class="arrow"
                      @mousedown="mouseDownEvent('right_down')"
                      @mouseup="mouseUpEvent"
                    >
                      <i class="iconfont icon-youxia"></i>
                    </div>
                  </div>
                  <div id="else-control">
                    <div id="focus-control">
                      <div
                        class="button"
                        @mousedown="mouseDownEvent('focus_near')"
                        @mouseup="mouseUpEvent"
                      >
                        <i class="iconfont icon-jiaojufangda"></i>
                        <div class="font-text">近焦距</div>
                      </div>
                      <div
                        class="button"
                        @mousedown="mouseDownEvent('focus_far')"
                        @mouseup="mouseUpEvent"
                      >
                        <i class="iconfont icon-jiaojusuoxiao"></i>
                        <div class="font-text">远焦距</div>
                      </div>
                    </div>
                    <div id="zoom-control">
                      <div
                        class="button"
                        @mousedown="mouseDownEvent('zoom_in')"
                        @mouseup="mouseUpEvent"
                      >
                        <i class="iconfont icon-fangda"></i>
                        <div class="font-text">放大</div>
                      </div>
                      <div
                        class="button"
                        @mousedown="mouseDownEvent('zoom_out')"
                        @mouseup="mouseUpEvent"
                      >
                        <i class="iconfont icon-suoxiao"></i>
                        <div class="font-text">缩小</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getVideoTreeData,
  getVideoLiveAddressUrl,
  startCameraMove,
  stopCameraMove,
} from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
  name: "Supervisory",
  data() {
    return {
      filterText: "",
      treeData: [],

      defaultProps: {
        children: "children",
        label: "label",
      },
      cameraList: [],
      activeIndex: 0,
      liveVisible: false,
      singlePlayer: null,
      activeSplice: 4,
      videoURLArray: [],
      isFullScreen: false,
      showControlCameraButton: false,
    };
  },
  mounted() {
    this.getVideoTreeData();
  },
  methods: {
    getVideoTreeData() {
      getVideoTreeData().then((res) => {
        this.treeData = this.handleData(res.data);

        this.$nextTick(() => {
          this.viewAll();
        });
      });
    },
    handleData(data) {
      return data.map((item) => {
        return {
          label: item.area_name,
          children: this.handleChildrenData(item.device_data),
          device_count: item.device_count,
        };
      });
    },
    handleChildrenData(data) {
      return data.map((item, index) => {
        return {
          data: { ...item },
          label: item.device_name,
          index: index,
          id: item.id,
        };
      });
    },
    filterNode(value, data, node) {
      console.log(node);
      let names = this.getParents(node, node.data.label, "label");
      let isName = names.indexOf(value) !== -1;
      return !value || isName ? true : false;
    },
    getParents(node, name, key) {
      if (node.parent && node.parent.data[key]) {
        name += node.parent.data[key];
        return this.getParents(node.parent, name, key);
      }
      return name;
    },
    renderContent(h, { node, data }) {
      console.log(data);
      return (
        <span
          class="custom-tree-node"
          on-click={() => this.selectNode(node, data)}
        >
          <span>
            <span
              class={
                node.level == 1
                  ? "iconfont icon-shipinjiankong-1"
                  : "iconfont icon-shipinjiankong-2"
              }
              style="margin-right:6px"
            ></span>
            {node.label}
          </span>
          {node.level == 1 && <span>{data.device_count}</span>}
          {node.level > 1 && (
            <span
              style={{
                color: data.data.is_online == 1 ? "#3EEC6F" : "#C6DEF9",
              }}
            >
              {data.data.is_online_text}
            </span>
          )}
        </span>
      );
    },
    selectNode(node, data) {
      if (node.level > 1) {
        const playerArray = this.cameraList.map((item) => {
          return item.player;
        });
        const cameraIdList = this.cameraList.map((item) => {
          return item.id;
        });
        if (cameraIdList.indexOf(data.id) != -1) {
          return this.$message.warning("该监控已存在!");
        }
        const nullIndex = playerArray.indexOf(null);
        if (nullIndex != -1) {
          this.cameraList[nullIndex] = {
            player: undefined,
            id: data.id,
          };
          this.$forceUpdate();
          let ts = new Date().getTime();
          getVideoLiveAddressUrl(data.id).then((res) => {
            if (res.data.live_address_url) {
              this.$nextTick(() => {
                const myVideoDiv = document.getElementById(
                  `video-container-${nullIndex + 1}`
                );
                myVideoDiv.innerHTML = `<video
            id="singleVideo${ts}"
            autoplay="autoplay"
            class="video-js vjs-default-skin"
            muted="muted"
            data-setup='{"userActions": {"doubleClick": false }}'
          ></video>`;
                const singlePlayer = videojs(`singleVideo${ts}`, {
                  autoplay: true, // 自动播放
                  controls: true, // 控件显示
                  preload: "auto", //定义视频加载模式
                  loop: true, //是否循环播放
                  controlBar: {
                    fullscreenToggle: !!videojs.browser.IE_VERSION, //全屏按钮
                  },
                });
                singlePlayer.src({
                  src: res.data.live_address_url,
                  type: "application/x-mpegURL",
                });
                this.createFullScreenBtn(
                  singlePlayer,
                  `#video-out-container-${nullIndex + 1}`
                );
                singlePlayer.play();
                this.cameraList[nullIndex].player = singlePlayer;
              });
            }
          });
        } else {
          if (this.cameraList.length == this.activeSplice) {
            return this.$message.warning("请先关闭多余的监控!");
          }

          this.$forceUpdate();
          getVideoLiveAddressUrl(data.id).then((res) => {
            if (res.data.live_address_url) {
              this.cameraList.push({
                player: undefined,
                id: data.id,
              });

              this.$nextTick(() => {
                const myVideoDiv = document.getElementById(
                  `video-container-${this.cameraList.length}`
                );
                myVideoDiv.innerHTML = `<video
          id="singleVideo${this.cameraList.length}"
          autoplay="autoplay"
          class="video-js vjs-default-skin"
          muted="muted"
              data-setup='{"userActions": {"doubleClick": false }}'
        ></video>`;
                const singlePlayer = videojs(
                  `singleVideo${this.cameraList.length}`,
                  {
                    autoplay: true, // 自动播放
                    controls: true, // 控件显示
                    preload: "auto", //定义视频加载模式
                    loop: true, //是否循环播放
                    controlBar: {
                      fullscreenToggle: !!videojs.browser.IE_VERSION,
                    },
                  }
                );
                singlePlayer.src({
                  src: res.data.live_address_url,
                  type: "application/x-mpegURL",
                });
                this.createFullScreenBtn(
                  singlePlayer,
                  `#video-out-container-${this.cameraList.length}`
                );
                singlePlayer.play();
                this.cameraList[this.cameraList.length - 1].player =
                  singlePlayer;
              });
            }
          });
        }
      }
    },
    closeAll() {
      this.cameraList.map((item) => {
        item.id = "";
        item.live_address_url = "";
        item.player && item.player.dispose();
        item.player = null;
      });
      this.cameraList = [];
    },
    closeSingle(index) {
      this.cameraList[index].player.dispose();
      this.cameraList[index].player = null;
      this.cameraList[index].live_address_url = "";
      this.cameraList[index].id = "";
      this.$forceUpdate();
    },
    viewAll() {
      this.cameraList.map((item) => {
        item.player && item.player.dispose();
        item.player = null;
        item.id = "";
        item.live_address_url = "";
      });
      this.cameraList = [];

      let allVideoIdArray = this.treeData
        .map((item) => {
          return item.children.map((child) => {
            return child.id;
          });
        })
        .flat();
      allVideoIdArray = allVideoIdArray.slice(0, this.activeSplice);
      allVideoIdArray.map((id, index) => {
        getVideoLiveAddressUrl(id).then((res) => {
          if (res.data.live_address_url) {
            this.cameraList.push({
              player: undefined,
              id: id,
            });
            let ts = new Date().getTime();
            setTimeout(() => {
              this.$nextTick(() => {
                const myVideoDiv = document.getElementById(
                  `video-container-${index + 1}`
                );
                myVideoDiv.innerHTML = `<video
          id="singleVideo${ts}"
          autoplay="autoplay"
          class="video-js vjs-default-skin"
          muted="muted"
              data-setup='{"userActions": {"doubleClick": false }}'
        ></video>`;
                const singlePlayer = videojs(`singleVideo${ts}`, {
                  autoplay: true, // 自动播放
                  controls: true, // 控件显示
                  preload: "auto", //定义视频加载模式
                  loop: true, //是否循环播放
                  controlBar: {
                    fullscreenToggle: !!videojs.browser.IE_VERSION,
                  },
                });
                singlePlayer.src({
                  src: res.data.live_address_url,
                  type: "application/x-mpegURL",
                });
                this.createFullScreenBtn(
                  singlePlayer,
                  `#video-out-container-${index + 1}`
                );
                this.$nextTick(() => {
                  singlePlayer.play();
                });

                this.cameraList[index].player = singlePlayer;
                this.$forceUpdate();
              });
            }, 500);
          }
        });
      });
    },
    setActiveCamera(index) {
      this.activeIndex = index;
    },
    mouseDownEvent(direction) {
      console.log(this.cameraList[this.activeIndex]);
      if (
        this.cameraList[this.activeIndex] &&
        this.cameraList[this.activeIndex].player
      ) {
        startCameraMove(this.cameraList[this.activeIndex].id, {
          direction,
          speed: 1,
        });
      } else {
        return this.$message.error("请选中摄像头！");
      }
    },
    mouseUpEvent() {
      if (
        this.cameraList[this.activeIndex] &&
        this.cameraList[this.activeIndex].player
      ) {
        stopCameraMove(this.cameraList[this.activeIndex].id);
      }
    },

    createFullScreenBtn(player, playerParentDOM) {
      var that = this;
      const btn = player.controlBar.addChild("button", {
        clickHandler: function () {
          that.triggerFullScreen(player, playerParentDOM);
        },
      });
      btn.addClass("vjs-fullscreen-control");
      btn.addClass("vjs-control");
      btn.addClass("vjs-button");

      player.controlBar.addChild("button", {
        controlText: "控制台",
        className: "iconfont icon-shipinjiankong-2",
        clickHandler: () => {
          this.showControlCameraButton = !this.showControlCameraButton;
        },
      });

      const playerLive = document.querySelector(playerParentDOM);
      console.log(playerLive);

      [
        "fullscreenchange",
        "webkitfullscreenchange",
        "mozfullscreenchange",
      ].forEach((fullscreenChange) => {
        playerLive.addEventListener(fullscreenChange, () => {
          this.isFullScreen = !this.isFullScreen;

          this.$nextTick(() => {
            if (this.isFullScreen) {
              this.addClass(
                playerLive.querySelector(".video-js"),
                "vjs-fullscreens"
              );
              this.showControlCameraButton = true;
            } else {
              this.showControlCameraButton = false;
              this.removeClass(
                playerLive.querySelector(".video-js"),
                "vjs-fullscreens"
              );
            }
          });
        });
      });
    },
    triggerFullScreen(player, playerParentDOM) {
      const playerLive = document.querySelector(playerParentDOM);
      if (this.isFullScreen) {
        player.exitFullscreen();
      } else {
        try {
          if (playerLive.requestFullscreen) {
            return playerLive.requestFullscreen();
          } else if (playerLive.webkitRequestFullScreen) {
            return playerLive.webkitRequestFullScreen();
          } else if (playerLive.mozRequestFullScreen) {
            return playerLive.mozRequestFullScreen();
          } else if (playerLive.msRequestFullscreen) {
            playerLive.msRequestFullscreen();
          } else {
            player.requestFullscreen();
          }
        } catch (err) {
          player.requestFullscreen();
        }
      }
    },

    addClass(ele, name) {
      if (name) {
        //判断该dom有没有class，有则在原class基础上增加，无则直接赋值
        ele.className
          ? (ele.className = ele.className + " " + name)
          : (ele.className = name);
      } else {
        throw new Error("请传递一个有效的class类名");
      }
    },
    removeClass(ele, name) {
      //将className属性转为数组
      let classArr = ele.className.split(" "),
        index = classArr.indexOf(name);
      //将符合条件的class类删除
      index > -1 ? classArr.splice(index, 1) : null;
      ele.className = classArr.join(" ");
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    activeSplice(newValue, oldValue) {
      this.activeIndex = 0;
      if (newValue < oldValue && this.cameraList.length > newValue) {
        for (let i = newValue; i < this.cameraList.length; i++) {
          this.cameraList[i].player = null;
          this.cameraList[i].id = "";
          this.cameraList[i].live_address_url = "";
        }
      }
    },
  },
  destroyed() {
    this.closeAll();
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";

#supervisory {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  height: calc(100% - 24px);
  .side-area {
    width: 20%;
    height: 100%;
    min-width: 400px;
  }
}

::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  font-size: 16px;
  line-height: 40px;
  letter-spacing: 1px;
  img {
    width: 20px;
    margin-top: 10px;
    margin-right: 8px;
    vertical-align: top;
  }
}

.tree-container {
  height: 100%;
  overflow-y: scroll;
}
.video-out-container {
  width: calc(80% - 12px);
  margin-left: 12px;
}
.video-area {
  height: calc(100% - 58px);
  width: 100%;
  .camera {
    font-size: 0;
    &:hover {
      box-shadow: inset 0 0 10px rgba(0, 162, 255, 1);
    }
    &.active {
      box-shadow: inset 0 0 10px rgba(0, 162, 255, 1);
    }
    cursor: pointer;
    border: 1px solid #0f95d4;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    float: left;
    &.camera-in-1 {
      width: 100%;
      height: 100%;
    }
    &.camera-in-4 {
      width: 50%;
      height: 50%;
    }
    &.camera-in-6 {
      width: calc(100% / 3);
      height: calc(100% / 3 + 0.2px);

      &:first-child {
        width: calc(calc(100% / 3) * 2);
        height: calc(calc(100% / 3) * 2);
      }
    }
    &.camera-in-9 {
      width: calc(100% / 3);
      height: calc(100% / 3);
    }

    .video-info {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      .video-no {
        font-size: 44px;
        font-weight: bold;
        color: #c6eaf9;
        margin-bottom: 12px;
      }
      .video-description {
        font-size: 16px;
        color: #c6eaf9;
        opacity: 0.3;
      }
    }
    .video-pic {
      padding: 8px;
      height: calc(100% - 16px);
      &:hover {
        .el-icon-circle-close {
          display: block;
          cursor: pointer;
        }
      }
      img {
        width: 100%;
        vertical-align: top;
        height: 100%;
      }
      .play {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
      }
    }
  }
}

.vueVideoPlayer {
  & .video-js {
    & .vjs-big-play-button {
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
}
::v-deep .video-js {
  width: 100%;
  height: 100%;
}
.splice-screen {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  .el-button {
    background: rgba(40, 137, 195, 0.2);
    color: #c6def9;
    font-size: 18px;
    border-color: rgba(33, 127, 247, 1);
    width: calc(100% / 5 - 20px);
    &.active {
      background: #00a2ff;
      color: #fff;
    }
  }
}
.el-icon-circle-close {
  display: none;
  color: #fff;
  font-size: 24px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 999;
}
.tree-shadow-container {
  height: calc(100% - 480px);
}

::v-deep .vjs-big-play-button {
  left: 50% !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
}
.video-out-container-area {
  position: relative;
  .control-bar {
    position: absolute;
    right: 20px;
    bottom: 100px;
    font-size: 40px;
    color: #fff;
    padding: 26px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
  }
}

::v-deep
  .video-js.vjs-fullscreens
  .vjs-fullscreen-control
  .vjs-icon-placeholder:before,
::v-deep .vjs-icon-fullscreen-exit:before {
  content: "\f109";
}

::v-deep .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
}
.control-container {
  display: flex;
  justify-content: space-between;
}
#direction-control {
  display: flex;
  flex-wrap: wrap;
  width: 216px;
  .arrow {
    padding: 16px;
    background: rgba(44, 96, 162, 0.2);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    &:hover {
      background: rgba(44, 96, 162, 0.8);
    }
    &:nth-child(3n) {
      margin-right: 0;
    }
    &:nth-child(n + 7) {
      margin-bottom: 0;
    }
    .iconfont {
      font-size: 30px;
      vertical-align: top;
    }
  }
}

#else-control {
  color: #fff;
  width: calc(100% - 226px);
  .iconfont {
    font-size: 30px;
    color: #fff;
  }
  #focus-control,
  #zoom-control {
    border-radius: 6px;
    background: rgba(44, 96, 162, 0.2);
    display: flex;
    text-align: center;
    .button {
      width: 50%;
      padding: 22px 0;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        background: rgba(44, 96, 162, 0.8);
      }
      .iconfont {
        font-size: 20px;
        color: #fff;
      }
      .font-text {
        margin-top: 10px;
      }
      &:first-child {
        border-right: 1px solid #2c60a2;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
      &:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }
  }
  #focus-control {
    margin-bottom: 20px;
  }
}
#full-screen {
  width: 374px;
  #focus-control,
  #zoom-control {
    background: rgba(255, 255, 255, 0.3);
  }
  .arrow {
    background: rgba(255, 255, 255, 0.3);
    width: 30px;
    height: 30px;
  }
}
</style>