<template>
  <div class="go-content-box" >
    <n-date-picker class="content" @confirm="handleOnConfirm" v-bind={...attribute} v-model:value="dataset" type="datetimerange" />
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'

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

//修改默认宽高距离位置
props.chartConfig.attr.w = 600
props.chartConfig.attr.h = 100
props.chartConfig.attr.x = 200
props.chartConfig.attr.y = 200

const { dataset,attribute }= toRefs(props.chartConfig.option)

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

const handleOnConfirm=(values:[number, number])=>{
  window['$message'].success(`您选中了时间段[${values}]`)
}



</script>

<style lang="scss" scoped>
.go-content-box {
  display: flex;
  align-items: center;
  justify-content: center;
  .content{
    width:v-bind('w + "px"');
    height:v-bind('h + "px"');
  }
}
</style>