<script lang="ts" setup>
import {charts} from "~/config/charts";
import type {PropType} from "vue";
import type {serverValueItem} from "~/components/SettingCard.vue";
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";


const mainLayoutStore = useMainLayoutStore()
const visible = ref(false)
const cardRef = ref(null)
const {width} = useElementBounding(cardRef)
const rangeNum = ref(6)
const targetIsVisible = useElementVisibility(cardRef)
const isSwitched = ref(false)
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  chart: {
    type: String,
    required: true
  },
  values: {
    type: Array as PropType<serverValueItem[]>,
    required: true
  },
  isDraggable: {
    type: Boolean,
    required: false
  }
})

watch(() => mainLayoutStore.SelectServer.value, () => {
  isSwitched.value = true
  setTimeout(() => {
    isSwitched.value = false
  })
})
watchDebounced(
    width,
    () => {
      //更新图表过滤
      rangeNum.value = Math.floor(width.value / 40)
      //最大12
      rangeNum.value = rangeNum.value > 24 ? 24 : rangeNum.value
    },
    {debounce: 500, maxWait: 1000},
)
// watchDebounced(
//     ()=>useColorMode().value,
//
//     {debounce: 500, maxWait: 1000}
// )
watch(()=>useColorMode().value,()=>{
  isSwitched.value = true
  setTimeout(() => {
    isSwitched.value = false
  })
})
const valueIds = computed(() => props.values.map(x => x.dataType))
const valueNames = computed(() => props.values.map(x => x.dataName))
const items = [
  {
    label: '全屏查看',
    command: () => {

    }
  }, {
    label: '刷新',
    command: () => {
    }
  }, {
    label: '弹出',
    command: () => {
    }
  }, {
    label: '删除',
    command: () => {
      mainLayoutStore.deleteLayout(props.id)
    }
  }, {
    label: '设置',
    command: () => {
      visible.value = true
    }
  }
];
</script>

<template>
  <div :id="`card_${id}`" ref="cardRef" class="card-layout ">
    <div :id="'item' + id" class="card-title vue-draggable-handle">
      <h3>{{ title ?? "默认标题" }}</h3>
    </div>
    <div class="card-content">
      <component :is="charts.find(x => x.id === chart)?.component" v-if="targetIsVisible&&!isSwitched"
                 :rangeNum="rangeNum"
                 :valueIds="valueIds"
                 :valueNames="valueNames"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "base";

.card-layout {
  height: 100%;
  width: 100%;
  background: $light-bg-color;
  display: grid;
  grid-template-rows: 40px 1fr;
  
  .dark-mode & {
    background: $dark-bg-color;
  }
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  
  h3 {
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    color: #333;
  }
}
.card-content{
  padding: 0 20px 20px;
}
</style>
