<template>
  <node :title="config.name" :mode="mode" :show-error="showError" :content="content" :error-info="errorInfo"
        @selected="emit('selected')" @delNode="emit('delNode')" @insertNode="type => emit('insertNode', type)"
        placeholder="请设置延时时间" :header-bgc="headerBgc" :header-icon="Clock"/>
</template>
<!--延时器节点-->
<script setup>
import Node from './Node.vue'
import {defineProps, defineEmits, computed, defineExpose} from "vue";
const emit = defineEmits()
import {Clock} from '@element-plus/icons-vue'
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  },
  mode: {
    type: String,
    default: 'design'
  }
})


const showError = ref(false)
const errorInfo = ref('')


const headerBgc = computed(() => {
  if (props.mode === 'design' || props.mode === 'view') {
    return '#F05D2E'
  } else {
    return props.config.props.headerBgc
  }
})

const content = computed(() => {
  if (props.config.props.type === 'FIXED') {
    return `等待 ${props.config.props.time} ${getName(props.config.props.unit)}`
  } else if (props.config.props.type === 'AUTO') {
    return `至当天 ${props.config.props.dateTime}`
  } else {
    return null
  }
})
//校验数据配置的合法性
const validate = (err) => {
  showError.value = false
  try {
    if (props.config.props.type === "AUTO") {
      if ((props.config.props.dateTime || "") === "") {
        showError.value = true
        errorInfo.value = "请选择时间点"
      }
    } else {
      if (props.config.props.time <= 0) {
        showError.value = true
        errorInfo.value = "请设置延时时长"
      }
    }
  } catch (e) {
    showError.value = true
    errorInfo.value = "配置出现问题"
  }
  if (showError) {
    err.push(`${props.config.name} 未设置延时规则`)
  }
  return !showError
}
const getName = (unit) => {
  switch (unit) {
    case 'D':
      return '天';
    case 'H':
      return '小时';
    case 'M':
      return '分钟';
    default:
      return '未知';
  }
}
defineExpose({
  validate
})
</script>
