<template>
  <div class="ZhiGan_ModalTimeLine">
    <n-timeline :icon-size="option.dataStyle.iconSize" :size="option.dataStyle.size">
      <n-timeline-item
        class="list"
        v-for="(item, index) in option.dataset"
        :key="item"
        :type="item.type"
      >
        <template #icon></template>
        <template #header>
          <!-- 标题 -->
          <div v-if="option.dataStyle.showTitle">
            <div
              v-if="index == 0"
              :style="{
                color: option.dataStyle.titleColorFirst,
                fontSize: `${option.dataStyle.titleFontSizeFirst}px`,
              }"
            >
              {{ item.title }}
            </div>
            <div
              v-else
              :style="{
                color: option.dataStyle.titleColor,
                fontSize: `${option.dataStyle.titleFontSize}px`,
              }"
            >
              {{ item.title }}
            </div>
          </div>
        </template>
        <template #default>
          <div v-if="option.dataStyle.showTime">
            <!-- 时间 -->
            <div
              v-if="index == 0"
              :style="{
                color: option.dataStyle.timeColorFirst,
                fontSize: `${option.dataStyle.timeFontSizeFirst}px`,
              }"
            >
              {{ item.time }}
            </div>
            <div
              v-else
              :style="{
                color: option.dataStyle.timeColor,
                fontSize: `${option.dataStyle.timeFontSize}px`,
              }"
            >
              {{ item.time }}
            </div>
          </div>
          <!-- 虚线 -->
          <span v-if="option.dataStyle.showLine">-------------------------------</span>
          <!-- 文本 -->
          <div v-if="option.dataStyle.showContent">
            <div
              v-if="index == 0"
              :style="{
                color: option.dataStyle.contentColorFirst,
                fontSize: `${option.dataStyle.contentFontSizeFirst}px`,
              }"
            >
              {{ item.content }}
            </div>
            <div
              v-else
              :style="{
                color: option.dataStyle.contentColor,
                fontSize: `${option.dataStyle.contentFontSize}px`,
              }"
            >
              {{ item.content }}
            </div>
          </div>
          <!-- 图片 -->
          <!-- 数组 -->
          <div
            v-if="Array.isArray(item.imageurl) && option.dataStyle.showImage"
            class="timeLineImageDivs"
          >
            <div class="timeLineImageDiv" v-for="url in item.imageurl" :key="url">
              <n-image
                :src="url"
                :preview-disabled="option.dataStyle.previewDisabled"
                :object-fit="option.dataset.imageFit"
                :width="`${option.dataStyle.imageWidth - 2 * option.dataStyle.imageBorderWidth - 2 * option.dataStyle.imagePadding}`"
                :height="`${option.dataStyle.imageHeight - 2 * option.dataStyle.imageBorderWidth - 2 * option.dataStyle.imagePadding}`"
                lazy
              />
            </div>
          </div>
          <!-- 单个 -->
          <div
            v-if="typeof item.imageurl === 'string' && option.dataStyle.showImage"
            class="timeLineImageDivs"
          >
            <div class="timeLineImageDiv">
              <n-image
                :src="item.imageurl"
                :preview-disabled="option.dataStyle.previewDisabled"
                :object-fit="option.dataset.imageFit"
                :width="`${option.dataStyle.imageWidth - 2 * option.dataStyle.imageBorderWidth - 2 * option.dataStyle.imagePadding}`"
                :height="`${option.dataStyle.imageHeight - 2 * option.dataStyle.imageBorderWidth - 2 * option.dataStyle.imagePadding}`"
                lazy
              />
            </div>
          </div>
          <!-- 视频 -->
          <!-- 数组 -->
          <div
            v-if="Array.isArray(item.videos) && option.dataStyle.showVideo"
            class="timeLineVideoDivs"
          >
            <div
              class="timeLineVideoDiv"
              v-for="(videoItem, videoIndex) in item.videos"
              :key="videoIndex"
            >
              <div class="timeLineVideoDivTitle">{{ videoItem.title }}</div>
              <img
                v-if="isEdit || option.status.hide"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
              />
              <MonitorHK
                v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '海康'"
                :index="index + '-' + videoIndex"
                :serialNumberValue="videoItem.videourl"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :timestamp="option.dataStyle.timestamp"
              />
              <MonitorLC
                v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '乐橙'"
                :deviceId="videoItem.videourl"
                :channelId="0"
                :index="index + '-' + videoIndex"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :timestamp="option.dataStyle.timestamp"
                :videoMuted="option.dataStyle.videoMuted"
              />
              <MonitorTX
                v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '腾讯'"
                :videourl="videoItem.videourl"
                :index="index + '-' + videoIndex"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :timestamp="option.dataStyle.timestamp"
                :videoLoop="option.dataStyle.videoLoop"
                :videoMuted="option.dataStyle.videoMuted"
                :videoFit="option.dataStyle.videoFit"
              />
            </div>
          </div>
          <!-- 单个 -->
          <div
            v-if="!Array.isArray(item.videos) && item.videos && option.dataStyle.showVideo"
            class="timeLineVideoDivs"
          >
            <div class="timeLineVideoDiv">
              <div class="timeLineVideoDivTitle">{{ item.videos.title }}</div>
              <img
                v-if="isEdit || option.status.hide"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
              />
              <MonitorHK
                v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '海康'"
                :index="index + '-' + videoIndex"
                :serialNumberValue="item.videos.videourl"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :timestamp="option.dataStyle.timestamp"
              />
              <MonitorLC
                v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '乐橙'"
                :deviceId="item.videos.videourl"
                :channelId="0"
                :index="index"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :timestamp="option.dataStyle.timestamp"
                :videoMuted="option.dataStyle.videoMuted"
              />
              <MonitorTX
                v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '腾讯'"
                :videourl="item.videos.videourl"
                :index="index + '-0'"
                :width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
                :timestamp="option.dataStyle.timestamp"
                :videoLoop="option.dataStyle.videoLoop"
                :videoMuted="option.dataStyle.videoMuted"
                :videoFit="option.dataStyle.videoFit"
              />
            </div>
          </div>
        </template>
      </n-timeline-item>
    </n-timeline>
  </div>
</template>

<script setup lang="ts">
  import { PropType, toRefs, watch, reactive, ref, onMounted, onBeforeUnmount } 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 Title from './svg/title.vue';
  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 option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
    status: props.chartConfig.status,
  });

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

  watch(
    () => option.status.hide,
    () => {
      if (!option.status.hide) {
      }
    },
  );

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

    // 组件通信
    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[]) => {
    option.dataset = resData;
  });
</script>

<style lang="scss" scoped>
  .ZhiGan_ModalTimeLine {
    overflow-y: auto;
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
    background: v-bind('`${option.dataStyle.background}`');
    border: 1px solid v-bind('`${option.dataStyle.borderColor}`');
    display: block;
  }

  .ZhiGan_ModalTimeLine::-webkit-scrollbar {
    display: none;
  }

  .ZhiGan_ModalTimeLine {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .timeLineImageDivs {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
    justify-content: v-bind('option.dataStyle.imageAlign');
    margin-top: v-bind('`${option.dataStyle.imageMarginTop}px`');
  }

  .timeLineImageDiv {
    display: flex;
    align-items: center;
    width: v-bind('`${option.dataStyle.imageWidth}px`');
    height: v-bind('`${option.dataStyle.imageHeight}px`');
    border: v-bind('`${option.dataStyle.imageBorderWidth}px`') solid
      v-bind('`${option.dataStyle.imageBorderColor}`');
    padding: v-bind('`${option.dataStyle.imagePadding}px`');
  }

  .timeLineVideoDivs {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
    justify-content: v-bind('option.dataStyle.videoAlign');
    margin-top: v-bind('`${option.dataStyle.videoMarginTop}px`');
  }

  .timeLineVideoDiv {
    display: flex;
    align-items: center;
    width: v-bind('`${option.dataStyle.videoWidth}px`');
    height: v-bind('`${option.dataStyle.videoHeight}px`');
    border: v-bind('`${option.dataStyle.videoBorderWidth}px`') solid
      v-bind('`${option.dataStyle.videoBorderColor}`');
    padding: v-bind('`${option.dataStyle.videoPadding}px`');

    position: relative;

    .timeLineVideoDivTitle {
      position: absolute;
      z-index: 100;
      top: 5px;
      left: 5px;
      font-size: v-bind('`${option.dataStyle.videoTitleFontSize}px`');
      color: v-bind('`${option.dataStyle.videoTitleFontColor}`');
    }
  }

  ::v-deep .n-timeline-item-timeline__line {
    background-color: v-bind('option.dataStyle.lineColor') !important;
  }

  ::v-deep .n-timeline-item-timeline {
    margin-left: v-bind('`${option.dataStyle.timelineMarginLeft}px`') !important;
  }
</style>
