<template>
  <div class="WuRenJiShiShiHuaMian">
    <video
      preload="auto"
      crossOrigin="anonymous"
      playsinline
      autoplay
      :object-fit="option.dataset.fit"
      :loop="option.dataStyle.videoLoop"
      :muted="option.dataStyle.videoMuted"
      :width="`${w - option.dataStyle.padding - option.dataStyle.borderWidth}`"
      :height="`${h - option.dataStyle.padding - option.dataStyle.borderWidth}`"
      :src="option.dataset"
    />
  </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 dayjs from 'dayjs';

  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>
  .WuRenJiShiShiHuaMian {
    overflow-y: auto;
    border: v-bind('`${option.dataStyle.borderWidth}px`') solid
      v-bind('`${option.dataStyle.borderColor}`');
    background: v-bind('`${option.dataStyle.backgroud}`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }
  .WuRenJiShiShiHuaMian::-webkit-scrollbar {
    display: none;
  }
  .WuRenJiShiShiHuaMian {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  video {
    display: block;
    object-fit: v-bind('option.dataStyle.videoFit');
    padding-top: v-bind('`${option.dataStyle.padding}px`');
    padding-left: v-bind('`${option.dataStyle.padding}px`');
  }
</style>
