<template>
  <div class="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="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>
        </template>
        <template #default>
          <!-- 时间 -->
          <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
            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
            v-if="item.imageurl"
            :style="{
              display: 'flex',
              alignItems: 'center',
              justifyContent: `${option.dataStyle.imageAlign}`,
              borderRadius: `${option.dataStyle.imageBorderRadius}px`,
              overflow: 'hidden',
              marginTop: `${option.dataStyle.imageMarginTop}px`,
            }"
          >
            <n-image
              preview-disabled
              :src="item.imageurl"
              :object-fit="option.dataset.imageFit"
              :width="`${option.dataStyle.imageWidth}`"
              :height="`${option.dataStyle.imageHeight}`"
              lazy
            />
          </div>
          <div
            v-if="item.videourl"
            :style="{
              display: 'flex',
              alignItems: 'center',
              justifyContent: `${option.dataStyle.videoAlign}`,
              marginTop: `${option.dataStyle.videoMarginTop}px`,
            }"
          >
            <video
              preload="auto"
              crossOrigin="anonymous"
              playsinline
              autoplay
              :loop="option.dataStyle.videoLoop"
              :muted="option.dataStyle.videoMuted"
              :width="`${option.dataStyle.videoWidth}`"
              :height="`${option.dataStyle.videoHeight}`"
              :src="item.videourl"
            ></video>
          </div>
        </template>
      </n-timeline-item>
    </n-timeline>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import Title from './svg/title.vue';

  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,
  });
</script>

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

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

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

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

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