<template>
  <div class="control-panel">
    <div class="changeGridBar">
      <div class="changeGrid">
        <el-tooltip class="box-item" effect="dark" content="一屏" placement="bottom">
          <img
            :src="currentGrid === GridType.oneGrid ? oneGrid_selected : oneGrid"
            class="changeGridIcon"
            :class="currentGrid === GridType.oneGrid ? 'selectedGridIcon' : ''"
            @click="changeGridType(GridType.oneGrid)"
          />
        </el-tooltip>
      </div>

      <div class="changeGrid">
        <el-tooltip effect="dark" content="四屏" placement="bottom">
          <img
            :src="currentGrid === GridType.fourGrids ? fourGrids_selected : fourGrids"
            class="changeGridIcon"
            :class="currentGrid === GridType.fourGrids ? 'selectedGridIcon' : ''"
            @click="changeGridType(GridType.fourGrids)"
          />
        </el-tooltip>
      </div>

      <div class="changeGrid">
        <el-tooltip class="box-item" effect="dark" content="九屏" placement="bottom">
          <img
            :src="currentGrid === GridType.nineGrids ? nineGrids_selected : nineGrids"
            class="changeGridIcon"
            :class="currentGrid === GridType.nineGrids ? 'selectedGridIcon' : ''"
            @click="changeGridType(GridType.nineGrids)"
          />
        </el-tooltip>
      </div>

      <div class="changeGrid">
        <el-tooltip class="box-item" effect="dark" content="十六屏" placement="bottom">
          <img
            :src="currentGrid === GridType.sixteenGrids ? sixteenGrids_selected : sixteenGrids"
            class="changeGridIcon"
            :class="currentGrid === GridType.sixteenGrids ? 'selectedGridIcon' : ''"
            @click="changeGridType(GridType.sixteenGrids)"
          />
        </el-tooltip>
      </div>

      <div>|</div>
    </div>

    <div class="controlBtns">
      <div class="lockAndSetTime">
        <div class="pausePlay" @click="handleClickLock">
          <el-tooltip class="box-item" effect="dark" :content="isPaused ? '恢复轮播' : '取消轮播'" placement="bottom">
            <div v-if="isPaused">
              <img src="@/assets/icons/nine-square-grid/lock.png" />
            </div>
            <div v-else>
              <img src="@/assets/icons/nine-square-grid/unlock.png" />
            </div>
          </el-tooltip>
        </div>

        <div class="setIntervalTime" v-show="isPlaying && !isPaused">
          <div>相机轮播时间间隔:</div>
          <el-input
            v-model="playIntervalTime"
            ref="inputRef"
            placeholder="默认60"
            class="intervalTimeInputBar"
            @blur="handelStartPlay"
            @keyup.enter="handelStartPlay"
          >
            <template #append>
              <div>秒</div>
            </template>
          </el-input>
        </div>
      </div>

      <div class="RoundAndFullScreen">
        <div class="controlRound">
          <div
            class="previousRound"
            :class="currentRound === 1 || currentRound === 0 ? 'disableChangeRound' : ''"
            @click="playPreviousRound"
          >
            <el-tooltip class="box-item" effect="dark" content="上一轮" placement="bottom">
              <ArrowLeft />
            </el-tooltip>
          </div>

          <div class="rounds">
            <div class="currentRound">{{ currentRound }}</div>
            <div class="totalRound">/{{ totalRound }}</div>
          </div>

          <div
            class="nextRound"
            @click="playNextRound"
            :class="currentRound === totalRound ? 'disableChangeRound' : ''"
          >
            <el-tooltip class="box-item" effect="dark" content="下一轮" placement="bottom">
              <ArrowRight />
            </el-tooltip>
          </div>
        </div>

        <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
          <img
            src="@/assets/icons/nine-square-grid/fullScreen2.png"
            class="fullScreenIcon"
            @click="isFullScreen ? exitFullscreen() : fullScreen('video-grid', 'all')"
          />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { storeToRefs } from 'pinia';
  import { ElInput, ElTooltip } from 'element-plus';
  import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
  import { userGridType } from '@/store/modules/userGridType';
  import { GridType } from '@/views/disaster/monitor/splitScreenRetrieval/type';
  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
  import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
  import { modifyCameraGroupApi } from '@/api/nine-square-grid';
  import oneGrid from '@/assets/icons/nine-square-grid/oneGrid.png';
  import oneGrid_selected from '@/assets/icons/nine-square-grid/oneGrid-selected.png';
  import fourGrids from '@/assets/icons/nine-square-grid/fourGrids.png';
  import fourGrids_selected from '@/assets/icons/nine-square-grid/fourGrids-selected.png';
  import nineGrids from '@/assets/icons/nine-square-grid/nineGrids.png';
  import nineGrids_selected from '@/assets/icons/nine-square-grid/nineGrids-selected.png';
  import sixteenGrids from '@/assets/icons/nine-square-grid/sixteenGrids.png';
  import sixteenGrids_selected from '@/assets/icons/nine-square-grid/sixteenGrids-selected.png';

  const inputRef = ref();

  const { currentGrid } = storeToRefs(userGridType());
  const { changeGridType } = userGridType();

  const { isFullScreen } = storeToRefs(userSplitScreenFullScreen());
  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();

  const { playingGroup, isPlaying, isPaused, playIntervalTime, totalRound, currentRound } = storeToRefs(
    useCameraGroupList(),
  );
  const { groupStartPlay, continuePlay, pausePlay, playPreviousRound, playNextRound } = useCameraGroupList();

  function handelStartPlay() {
    // 如果输入为0或非数字则返回
    if (playIntervalTime.value === null || playIntervalTime.value === 0 || !Number(playIntervalTime.value)) {
      inputRef.value.blur();
      playIntervalTime.value = 60;
      return;
    }

    inputRef.value.blur();
    playingGroup.value!.playIntervalSec = Number(playIntervalTime.value);
    groupStartPlay(Number(playIntervalTime.value));
    // inputRef.value.focus();
    modifyCameraGroupApi({
      groupId: playingGroup.value?.id!,
      playIntervalSec: playIntervalTime.value,
    });
  }

  function handleClickLock() {
    isPaused.value = !isPaused.value;
    if (isPaused.value) {
      pausePlay();
    } else {
      continuePlay();
    }

    if (isPlaying.value) {
      playingGroup.value!.isPaused = isPaused.value;
      modifyCameraGroupApi({
        groupId: playingGroup.value?.id!,
        isPaused: Number(isPaused.value),
      });
    }
  }

  watch(
    () => isPlaying.value,
    (newValue) => {
      if (newValue) {
        inputRef.value.focus();
        inputRef.value.select();
      }
    },
  );
</script>

<style lang="scss" scoped>
  .control-panel {
    height: 54px;
    width: 100%;
    background: #f4f7ff;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px 4px 0 0;

    .changeGridBar {
      display: flex;
      align-items: center;
      padding-left: 10px;
      margin-right: 19px;
      .changeGrid {
        margin-right: 32px;
        .changeGridIcon {
          width: 25px;
          color: white;
        }
        .changeGridIcon:hover {
          outline: 1px solid #1777ff;
          color: #1777ff;
        }
      }
    }

    .controlBtns {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .lockAndSetTime {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .pausePlay {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 19px;
          img {
            height: 24px;
            width: 24px;
          }
        }
        .setIntervalTime {
          width: 230px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .intervalTimeInputBar {
            margin-left: 10px;
            width: 110px;
          }
        }
      }

      .RoundAndFullScreen {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .controlRound {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 69px;
          .previousRound,
          .nextRound {
            width: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #000;
            border-radius: 4px;
            margin-right: 14px;
            cursor: pointer;
            &:hover {
              background-color: rgba(255, 255, 255, 0.2);
            }
          }
          .disableChangeRound {
            color: #909399;
            pointer-events: none;
          }
          .rounds {
            display: flex;
            line-height: 59px;
            color: #ffffff;
            font-weight: 400;
            font-size: 20px;
            margin-right: 14px;
            .currentRound {
              color: #1777ff;
            }
            .totalRound {
              color: rgb(0, 0, 0, 0.3);
            }
          }
        }

        .fullScreenIcon {
          width: 25px;
          color: white;
          margin-right: 20px;
        }
        .fullScreenIcon:hover {
          color: #1777ff;
        }
      }
    }
  }

  :deep(.el-input) {
    background-color: #f4f7ff;
  }
  :deep(.el-input__inner) {
    color: #333333;
    border: 0px;
  }
  :deep(.el-input__wrapper) {
    background-color: #f4f7ff;
  }
  :deep(.el-input-group__append) {
    width: 0px;
    background-color: #f4f7ff;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f4f7ff;
  }
  :deep(.el-tooltip__trigger) {
    outline: none;
    border: none;
  }
</style>
