<template>
    <div>
        <a-row>
            <a-col v-for="(item,index) in 6" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <j-card :bordered="false">
                    <j-select show-search v-model:value="monitorIds[index]" :options="monitorList" size="small" placeholder="请选择" style="width: 100%;"></j-select>
                    <ThreeChart :chartId="'box' + index" :type="type === 'Prps'?1:2" :height="400" />
                </j-card>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts" name='Prpd'>
import ThreeChart from '@/components/Chart/index.vue'
type KeyType = 'Prpd' | 'PrpdTotal' | 'Prps' | 'EventStatistics' | 'EventList';
interface Props {
    type:KeyType,
    monitorList:{ label: string; value: number; }[],
    monitorIds:number[]
}
const props = withDefaults(defineProps<Props>(), {
    type:'Prpd',
    monitorIds: () => [],
    monitorList: () =>[],
});
onMounted(() => {
    console.log(props.type)
});
watch(()=>props.type,(newValue,oldValue)=>{
    console.log(newValue)
})
</script>

<style lang='less' scoped>

</style>