<script setup lang="ts">
import { traduction } from '@/utils/language';
import { onMounted, reactive, ref } from 'vue';
import { run } from './classes/client';
import {
  IconChevronDoubleRight,
  IconChevronDoubleLeft,
  IconLoad,
  IconExpand,
  IconLessen,
} from '@computing/opendesign-icons';

const scope = reactive({
  videoParams: {},
  title: '',
  name: '',
  IP: '',
  SN: '',
  fileName: '',
  slider: {
    disabled: false,
    value1: 0,
    tipMode: 'auto',
    min: 0,
    max: 100,
    scales: [],
    tipFormatterFn(value: number): number {
      return value;
    },
    change: (value: number) => {},
  },
  cvx: null as any,
  ctx: null as any,
  playStatus: 'VIDEO_PAUSE',
  fullScreen: false,
  isLoop: false,
  isInited: false,
});
const playId = localStorage.getItem('videoId');

const dialogConfig = reactive({
  title: traduction('VIDEO_HOME_PERFWARNING'),
  content: '',
  id: 'videoWarnModal',
});
const dialogRef = ref();
const canvasRef = ref();

function showMessage(contentInfo: string) {
  dialogConfig.content = traduction(contentInfo);
  dialogRef.value.show();
}

function dialogClose(reason: boolean) {
  dialogRef.value.hide();
}
onMounted(() => {
  document.oncontextmenu = e => {
    return false;
  };
  if (localStorage.getItem('isValidVideoUser') !== 'true') {
    showMessage('VIDEO_REMOTE_ERR_INVALID_USER');
    return;
  }
  localStorage.setItem('isValidVideoUser', 'false');
  switch (playId) {
    case 'localId':
      scope.fileName = '';
      break;
    case 'cpuVideoId':
      scope.fileName = 'video_caterror.rep';
      break;
    case 'offVideoId':
      scope.fileName = 'video_poweroff.rep';
      break;
    case 'restVideoId':
      scope.fileName = 'video_osreset.rep';
      break;
    default:
      break;
  }
  if (localStorage.getItem('videoInfo')) {
    const hash = window.location.hash;
    const questionMarkIndex = hash.indexOf('?');
    let systemIds = '';
    if (questionMarkIndex !== -1) {
      const queryString = hash.substring(questionMarkIndex + 1);
      const param = new URLSearchParams(queryString);
      systemIds = Object.fromEntries(param);
    }
    const videoInfo = JSON.parse(localStorage.getItem('videoInfo') as string);
    scope.videoParams = {
      ip: videoInfo.VideoIP,
      port: videoInfo.VideoPort,
      videoType: videoInfo.Type,
      videoKey: videoInfo.Token,
      host: systemIds.systemIds !== undefined ? Number(systemIds.systemIds) : 1,
    };
    const title = videoInfo.Title.split(',');
    scope['name'] = title[0];
    scope['IP'] = title[1];
    scope['SN'] = title[2];
  }
  scope.cvx = canvasRef.value;
  scope.ctx = canvasRef.value.getContext('2d');
  run(scope, showMessage);
});
</script>
<template>
  <div class="main">
    <div class="content">
      <div class="title">
        <div class="title-icon"><span class="video-icon"></span></div>
        <div class="title-name">{{ scope.name }}</div>
      </div>
      <div id="divFullscreen">
        <canvas
          id="cvs"
          ref="canvasRef"
          tabindex="0"
          class="image"
          width="1024"
          height="768"
        ></canvas>
        <div v-show="scope.playStatus === 'VIDEO_PAUSE'" id="playPic"></div>
        <div
          class="bottom-nav"
          :class="{
            'full-nav': scope.fullScreen,
            looping: scope.isLoop,
            pause: scope.playStatus === 'VIDEO_PAUSE',
            palying: scope.playStatus !== 'VIDEO_PAUSE'
          }"
        >
          <div class="progressbar">
            <el-slider
              id="slider"
              v-model="scope.slider.value1"
              class="slider"
              :tip-model="scope.slider.tipMode"
              :format-tooltip="scope.slider.tipFormatterFn"
              :scales="scope.slider.scales"
              :min="scope.slider.min"
              :max="scope.slider.max"
              @input="scope.slider.change($event)"
            ></el-slider>
          </div>
          <div class="toolbar">
            <div class="sub-toolbar">
              <ul class="sub1-menu">
                <li id="btnSlow">
                  <el-icon :size="32" :title="$t('VIDEO_SPEED_DOWN')">
                    <IconChevronDoubleLeft />
                  </el-icon>
                </li>
                <li id="btnPlay">
                  <svg
                    class="playOrPauseIcon"
                    id="play-icon"
                    v-if="scope.playStatus === 'VIDEO_PAUSE'"
                    width="32px"
                    height="32px"
                    viewBox="0 0 32 32"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                  >
                    <title>{{ $t('VIDEO_PLAY') }}</title>
                    <defs>
                      <path
                        d="M15.2317657,8.53278696 L6.28315162,19.600226 C5.84123046,20.1467839 5.6,20.8295451 5.6,21.5337688 C5.6,23.2272015 6.96613007,24.6 8.65133691,24.6 L26.548565,24.6 C27.2493679,24.6 27.9288126,24.357592 28.4727156,23.9135138 C29.7806282,22.8456476 29.9794293,20.9145229 28.9167503,19.600226 L19.9681363,8.53278696 C19.8357894,8.36910337 19.68699,8.2195777 19.5241015,8.08658478 C18.2161889,7.0187186 16.2944447,7.21849012 15.2317657,8.53278696 Z"
                        id="path-1"
                      ></path>
                    </defs>
                    <g
                      id="播放备份-2"
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                      </mask>
                      <use
                        id="三角形"
                        fill="#FFFFFF"
                        fill-rule="nonzero"
                        transform="translate(17.600000, 16.000000) rotate(-270.000000) translate(-17.600000, -16.000000) "
                        xlink:href="#path-1"
                      ></use>
                    </g>
                  </svg>
                  <svg
                    v-else
                    id="pause-icon"
                    class="playOrPauseIcon"
                    width="32px"
                    height="32px"
                    viewBox="0 0 32 32"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                  >
                    <title>{{ $t('VIDEO_PAUSE') }}</title>
                    <defs>
                      <path
                        d="M2,0 C3.0543618,0 3.91816512,0.815877791 3.99451426,1.85073766 L4,2 L4,22.0986328 C4,23.2032023 3.1045695,24.0986328 2,24.0986328 C0.945638205,24.0986328 0.0818348781,23.282755 0.00548573643,22.2478952 L0,22.0986328 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M14,0 C15.0543618,0 15.9181651,0.815877791 15.9945143,1.85073766 L16,2 L16,22.0986328 C16,23.2032023 15.1045695,24.0986328 14,24.0986328 C12.9456382,24.0986328 12.0818349,23.282755 12.0054857,22.2478952 L12,22.0986328 L12,2 C12,0.8954305 12.8954305,0 14,0 Z"
                        id="path-1"
                      ></path>
                    </defs>
                    <g id="暂停播放" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g id="0-color/Dark/3Secondary" transform="translate(8.000000, 4.000000)">
                        <mask id="mask-2" fill="white">
                          <use xlink:href="#path-1"></use>
                        </mask>
                        <use
                          id="蒙版"
                          fill="#979797"
                          fill-rule="nonzero"
                          xlink:href="#path-1"
                        ></use>
                        <g id="编组" mask="url(#mask-2)">
                          <g
                            transform="translate(-8.000000, -4.000000)"
                            id="0-color/Dark/3Secondary"
                          >
                            <rect
                              id="矩形"
                              fill="#FFFFFF"
                              x="0"
                              y="0"
                              width="32"
                              height="32"
                            ></rect>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </li>
                <li id="btnSpeed">
                  <el-icon :size="32" :title="$t('VIDEO_SPEED_UP')">
                    <IconChevronDoubleRight />
                  </el-icon>
                </li>
              </ul>
            </div>
            <div class="speed">
              <span v-t="'VIDEO_SPEED'"></span>
              <span id="speed">x1</span>
            </div>
            <div class="time">
              <span id="currentFrameTime">0:0</span>
              <span>{{ ' / ' }}</span>
              <span id="totalFrameTime">0:0</span>
            </div>

            <div class="sub2-toolbar">
              <ul class="sub2-menu">
                <li id="btnLoop">
                  <el-icon :size="32" :title="$t('VIDEO_LOOP')">
                    <IconLoad v-if="!scope.isLoop" />
                    <img v-else src="/src/assets/assets-bmc/default/video-loop.svg" />
                  </el-icon>
                </li>
                <li id="btnOpen">
                  <el-icon :size="32" :title="$t('VIDEO_OPEN')">
                    <img src="/src/assets/assets-bmc/default/local-file.svg" />
                  </el-icon>
                </li>
                <li id="btnCut">
                  <el-icon :size="32" :title="$t('VIDEO_CAPTURE')">
                    <img src="/src/assets/assets-bmc/default/camera.svg" />
                  </el-icon>
                </li>
                <li id="btnFullscreen">
                  <el-icon
                    :size="32"
                    :title="scope.fullScreen ? $t('REMOTE_EXIT_FULL_TIP') : $t('VIDEO_FULLSCREEN')"
                  >
                    <IconExpand v-if="!scope.fullScreen" />
                    <IconLessen v-else />
                  </el-icon>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-file">
        <div :class="scope.fileName === '' ? 'no-file' : 'file-name'">
          <span>{{ scope.fileName }}</span>
        </div>
        <div class="sub-title">
          <span class="title-ip">{{ scope.IP }}</span>
          <span class="title-sn">{{ scope.SN }}</span>
        </div>
      </div>
    </div>
    <!--添加文件浏览标签并且在html页面上隐藏，通过btnOpen链接去触发click事件-->
    <input id="file" type="file" class="menus-file" accept=".rep" />

    <Dialog ref="dialogRef" :config="dialogConfig" @close="dialogClose"></Dialog>
  </div>
</template>
<style lang="scss" scoped>
.main {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 919px;
  background: var(--o-border-color-light);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: -512px;
    padding: 24px 24px 16px 24px;
    background: var(--o-bg-color-light);
    border-radius: 4px;
    .title {
      display: inline-flex;
      width: 1024px;
      margin-bottom: 8px;
      font-size: 16px;
      line-height: 24px;
      .title-icon {
        width: 26px;
        height: 26px;
        margin-right: 7px;
      }
      .video-icon {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-image: url('/src/assets/assets-bmc/default/video_y.svg');
      }
    }
  }
  #divFullscreen {
    height: 768px;
    position: relative;
    .image {
      background: black;
      outline: none;
    }
    #playPic {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 50%;
      top: 50%;
      margin-top: -50px;
      margin-left: -50px;
      background: url('/src/assets/assets-bmc/default/big-play.png') no-repeat;
    }

    .bottom-nav {
      background-image: linear-gradient(180deg, rgba(78, 88, 101, 0) 8%, #000000 100%);
      position: relative;
      bottom: 300px;
      height: 300px;
      pointer-events: none;
    }
    .full-nav {
      background-image: linear-gradient(180deg, rgba(78, 88, 101, 0) 8%, #000000 96%);
    }
  }
  /*2.设置进度栏板块*/
  .progressbar {
    width: 100%;
    padding: 0 24px;
    position: relative;
    top: 228px; /*播放进度条设置*/
    pointer-events: auto;
    .slider {
      display: flex;
      align-items: center;
      height: 16px;
      cursor: pointer;
    }
  }

  /*3.设置工具栏*/
  .toolbar {
    width: 100%;
    height: 32px;
    padding: 0 24px;
    position: relative;
    top: 236px;
    display: flex;
    pointer-events: auto;

    .sub-toolbar {
      display: flex;
      .el-icon {
        color: #ffffff;
        margin-right: 24px;
      }

      .sub1-menu > li {
        position: relative;
        float: left;
      }
    }
    .speed {
      font-size: 16px;
      color: #fffefe;
      line-height: 24px;
      padding: 4px 0;
      margin-right: 24px;
    }

    /*显示时间标签*/
    .time {
      font-size: 16px;
      color: #fffefe;
      line-height: 24px;
      padding: 4px 0;
    }
    .playOrPauseIcon {
      margin-right: 24px;
    }
    .sub2-toolbar {
      position: absolute;
      right: 24px;
      height: 100%;
      display: flex;
      position: right;

      .el-icon {
        color: #ffffff;
        margin-left: 24px;
      }

      .sub2-menu > li {
        position: relative;
        float: left;

        img {
          width: 100%;
        }
      }
    }
  }
  .bottom-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }
  .file-name {
    font-size: 16px;
    line-height: 22px;
  }
  .sub-title {
    font-size: 12px;
    color: #000000;
    line-height: 16px;
    .title-sn {
      margin-left: 24px;
    }
  }
  .menus-file {
    display: none;
  }
}
</style>
