<template>
  <div class="banner-box" ref="root">
    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
        <div class="camera-container">
          <CameraItem
            ref="cameraRef"
            :name="item.name"
            :avatar="item.avatar"
            :key="item + index"
            :sourceSrc="item.url"
            :index="index"
          />
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import 'video.js/dist/video-js.min.css'
import { option as configOption } from './config'
import { CameraItem } from './components'

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

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

const responsiveComputeValue = ref(0)

const option = shallowReactive({
  dataset: configOption.dataset
})

const computedCols = computed(() => {
  if (option.dataset.length <= 1) return 1
  if (option.dataset.length <= 4) return 2
  return 3
})

const cameraRef = ref<InstanceType<typeof CameraItem>>()

const responsive = (value: number) => {
  responsiveComputeValue.value = value
  if (option.dataset.length <= 2) responsiveComputeValue.value = value
  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
}

watch(
  () => props.chartConfig.option.dataset,
  newData => {
    option.dataset = newData
    responsive(h.value)
  },
  {
    immediate: true,
    deep: true
  }
)

watch(
  () => h.value,
  newData => responsive(newData),
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
.banner-box {
  .camera-container {
    height: v-bind('`${responsiveComputeValue}px`');
  }
}
</style>