<template>
  <div class="ZhiGan_ModalVideo">
    <div class="modalTitle">
      <n-tooltip trigger="hover" :placement="option.dataStyle.selectPlacement || 'left'">
        <template #trigger>
          <n-button>
            <span
              calss="modalTitle_title"
              :style="{
                color: option.dataStyle.titleFontColor,
                fontSize: option.dataStyle.titleFontSize + 'px',
              }"
            >
              {{ titleName }}
            </span>
          </n-button>
        </template>
        <n-select
          v-model:value="option.dataStyle.serialNumberValue"
          :options="option.dataset"
          label-field="title"
          value-field="serialNumber"
          placeholder="请选择查看的视频"
        />
      </n-tooltip>
    </div>
    <div class="modalVideo">
      <!-- 编辑状态 -->
      <!-- 无视频url的情况 -->
      <img
        v-if="isEdit || option.status.hide"
        :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :height="`${h - option.dataStyle.modalTitleHeight - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
      />
      <MonitorHK
        ref="MonitorHKRef"
        v-if="!isEdit && !option.status.hide && manufacturer == '海康'"
        :serialNumberValue="option.dataStyle.serialNumberValue"
        :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :height="`${h - option.dataStyle.modalTitleHeight - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :timestamp="option.dataStyle.timestamp"
      />
      <MonitorLC
        ref="MonitorLCRef"
        v-if="!isEdit && !option.status.hide && manufacturer == '乐橙'"
        :deviceId="option.dataStyle.serialNumberValue"
        :channelId="0"
        :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :height="`${h - option.dataStyle.modalTitleHeight - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :timestamp="option.dataStyle.timestamp"
        :videoMuted="option.dataStyle.videoMuted"
      />
      <MonitorTX
        ref="MonitorTXRef"
        v-if="!isEdit && !option.status.hide && manufacturer == '腾讯'"
        :serialNumberValue="option.dataStyle.serialNumberValue"
        :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :height="`${h - option.dataStyle.modalTitleHeight - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
        :timestamp="option.dataStyle.timestamp"
        :videoLoop="option.dataStyle.videoLoop"
        :videoMuted="option.dataStyle.videoMuted"
        :videoFit="option.dataStyle.videoFit"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import {
    PropType,
    toRefs,
    reactive,
    ref,
    onMounted,
    onBeforeUnmount,
    watch,
    computed,
    nextTick,
  } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import dayjs from 'dayjs';
  import { MonitorHK, MonitorLC, MonitorTX } from './video/index';

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const chartEditStore = useChartEditStore();

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
    status: props.chartConfig.status,
  });

  // 是否是编辑状态
  const isEdit = window.location.href.includes('/chart/home/');
  // 标题
  const titleName = ref('');
  const manufacturer = ref('');

  // 切换视频
  watch(
    () => option.dataStyle.serialNumberValue,
    (newValue) => {
      let data = getDataBySerialNumberValue(newValue);
      titleName.value = data.title;
      manufacturer.value = data.manufacturer;
    },
  );

  // 获取视频信息
  function getDataBySerialNumberValue(value) {
    return option.dataset.find((item) => item.serialNumber === value);
  }

  // 初始化视频控件
  onMounted(() => {
    // 用于规避视频id重复
    if (!option.dataStyle.timestamp) {
      option.dataStyle.timestamp = dayjs().unix();
    }
    if (!option.dataStyle.serialNumberValue) {
      option.dataStyle.serialNumberValue = option.dataset[0].serialNumber;
    }

    let data = getDataBySerialNumberValue(option.dataStyle.serialNumberValue);
    titleName.value = data.title;
    manufacturer.value = data.manufacturer;

    // 组件通信
    const sql = props.chartConfig.request?.requestSQLContent?.sql;
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
      // 数据callback处理（预览时触发）
      useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
        option.dataset = resData;
      });
    });
  });

  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    if (resData) {
      option.dataset = resData;
    }
  });
</script>

<style lang="scss" scoped>
  .ZhiGan_ModalVideo {
    overflow-y: auto;
    position: relative;
    border: v-bind('`${option.dataStyle.borderWidth}px`') solid
      v-bind('`${option.dataStyle.borderColor}`');
    background: v-bind('`${option.dataStyle.backgroud}`');
    padding: v-bind('`${option.dataStyle.padding}px`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }
  .ZhiGan_ModalVideo::-webkit-scrollbar {
    display: none;
  }
  .ZhiGan_ModalVideo {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .modalTitle {
    position: relative;
    width: 100%;
    height: v-bind('`${option.dataStyle.modalTitleHeight}px`');
    background: v-bind('`${option.dataStyle.titleBackgroud}`');

    display: inline-flex;
    align-items: center;
    justify-content: left;

    .modalTitle_title {
      padding-left: 10px;
      width: 100%;
      height: v-bind('`${option.dataStyle.modalTitleHeight}px`');
      font-size: v-bind('`${option.dataStyle.titleFontSize}px`');
      color: v-bind('`${option.dataStyle.titleFontColor}`');
    }
  }

  .modalVideo {
    width: 100%;
    height: v-bind('`${h - option.dataStyle.modalTitleHeight}px`');
  }

  ::v-deep .n-button--medium-type {
    width: 100% !important;
  }

  video {
    display: block;
    object-fit: v-bind('option.dataStyle.videoFit');
  }

  ::v-deep .n-base-selection {
    --n-border: 0px solid #ffffff00 !important;
    background: #ffffff00 !important;
  }
  ::v-deep .n-base-selection--selected {
    --n-border: 0px solid #ffffff00 !important;
  }
  ::v-deep .n-base-selection-label {
    background: #ffffff00 !important;
  }
  ::v-deep .n-base-selection-input {
    background: #ffffff00 !important;
    font-size: v-bind('`${ option.dataStyle.titleFontSize }px`') !important;
    color: v-bind('`${option.dataStyle.titleFontColor}`') !important;
    width: 230px !important;
  }
  ::v-deep .n-base-selection-input__content {
    font-size: v-bind('`${ option.dataStyle.titleFontSize }px`') !important;
    color: v-bind('`${option.dataStyle.titleFontColor}`') !important;
  }
  ::v-deep .n-base-select-option-show--checkmark {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 900;
    font-size: v-bind('`${ option.dataStyle.titleFontSize }px`') !important;
    color: v-bind('`${option.dataStyle.titleFontColor}`') !important;
    text-align: left;
    font-style: normal;
  }

  ::v-deep .n-button--medium-type {
    --n-border: 1px solid #ffffff00 !important;
    --n-border-hover: 1px solid #ffffff00 !important;
    --n-border-disabled: 1px solid #ffffff00 !important;
    --n-border-pressed: 1px solid #ffffff00 !important;
  }

  ::v-deep .vjs-live-control .vjs-live-display {
    width: 100px !important;
  }
</style>
