<template>
  <div class="videoDiv">
    <div class="showVideo">
      <!-- <MonitorHK
        v-if="props.nowPreviewRecord.manufacturer == '海康'"
        :serialNumberValue="props.nowPreviewRecord.url"
        :width="1300"
        :height="800"
      />
      <MonitorLC
        v-if="props.nowPreviewRecord.manufacturer == '乐橙'"
        :deviceId="props.nowPreviewRecord.url"
        :channelId="0"
        :width="1300"
        :height="800"
        :videoMuted="true"
      />
      <MonitorTX
        v-if="props.nowPreviewRecord.manufacturer == '腾讯'"
        :serialNumberValue="props.nowPreviewRecord.url"
        :width="1300"
        :height="820"
      />
      <MonitorQX
        v-if="props.nowPreviewRecord.manufacturer == '青犀'"
        :serialNumberValue="props.nowPreviewRecord.url"
        :width="1300"
        :height="800"
        :videoLoop="false"
        :videoMuted="true"
        :videoFit="'contain'"
      /> -->
      <video :src="props.nowPreviewRecord.url" class="video-player" controls muted autoplay></video>
    </div>

    <div class="bottomDiv">
      <div class="buttonList">
        <!-- 下载 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>下载</span>
            </template>
            <DownloadOutlined @click="fetchAndDownloadVideo(props.nowPreviewRecord.url)" />
          </a-tooltip>
        </div>
        <!-- 删除 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>删除</span>
            </template>
            <DeleteOutlined @click="deleteVideo" />
          </a-tooltip>
        </div>
      </div>
      <div class="imageList">
        <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
          <div
            :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
            v-if="li.type == 'video'"
          >
            <img :src="li.gifZoomImage" :width="60" :height="40" />
          </div>
        </div>
      </div>
    </div>

    <!-- 上一张、下一张图片 -->
    <div class="leftButton" @click="clickLeftOrRightButton('left')">
      <LeftOutlined style="color: #ffffff; font-size: 20px" />
    </div>
    <div class="rightButton" @click="clickLeftOrRightButton('right')">
      <RightOutlined style="color: #ffffff; font-size: 20px" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import {
    DownloadOutlined,
    DeleteOutlined,
    LeftOutlined,
    RightOutlined,
  } from '@ant-design/icons-vue';
  import { MonitorHK } from './preview';
  import { MonitorLC } from './preview';
  import { MonitorTX } from './preview';
  import { MonitorQX } from './preview';

  const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
  const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);

  // 上一张、下一张图片
  function clickLeftOrRightButton(direction) {
    const list = props.previewRecordList.filter((item) => item.type == 'video');
    for (let index = 0; index < list.length; index++) {
      if (list[index].id == props.nowPreviewRecord.id) {
        if (direction == 'left') {
          if (index == 0) {
            chooseNowPreviewRecord(list[list.length - 1]);
          } else {
            chooseNowPreviewRecord(list[index - 1]);
          }
        }
        if (direction == 'right') {
          if (index == list.length - 1) {
            chooseNowPreviewRecord(list[0]);
          } else {
            chooseNowPreviewRecord(list[index + 1]);
          }
        }
      }
    }
  }
  // 下载
  async function fetchAndDownloadVideo(url) {
    try {
      const response = await fetch(url, {
        mode: 'cors',
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const blob = await response.blob();
      const urlObject = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = urlObject;
      link.download = props.nowPreviewRecord.name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(urlObject);
    } catch (error) {
      console.error('Error downloading image:', error);
    }
  }
  // 删除
  function deleteVideo() {}
  // 选择
  function chooseNowPreviewRecord(value) {
    emit('chooseNowPreviewRecord', value);
  }
</script>
<style lang="less" scoped>
  .videoDiv {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
  }

  .showVideo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 820px;
  }

  .bottomDiv {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    background: #1c1c1c;
    display: block;

    .buttonList {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40px;

      .button {
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 6px;
        margin-right: 6px;
        color: #ffffff;
        font-size: 22px;
      }
    }

    .imageList {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 60px;

      .bottom_div {
        padding: 5px;
        margin-left: 5px;
        margin-right: 5px;
      }

      .bottom_div_choose {
        padding: 4px;
        border: 1px solid yellow;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }

  // 上一张、下一张
  .leftButton {
    position: absolute;
    left: 40px;
    top: 45%;
    z-index: 200;
    background: #9c9c9c;
    border-radius: 50px;
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rightButton {
    position: absolute;
    right: 40px;
    top: 45%;
    z-index: 200;
    background: #9c9c9c;
    border-radius: 50px;
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-player {
    height: 820px;
    margin: 10px;
  }
</style>
