<template>
  <div>
    <!-- 延时方式选择 -->
    <div style="margin-bottom: 20px">
      <p class="mb-2 block">延时方式</p>
      <a-radio-group v-model="config_.type" size="small" button-style="solid">
        <a-radio-button value="FIXED">固定时长</a-radio-button>
        <a-radio-button value="AUTO">自动计算</a-radio-button>
      </a-radio-group>
    </div>

    <!-- 固定延时 -->
    <div v-if="config_.type === 'FIXED'" class="flex">
      <a-input-number
        v-model="config_.time"
        style="width: 100px"
        :min="0"
        size="small"
        placeholder="时间"
      />
      <a-select
        v-model="config_.unit"
        style="width: 75px"
        size="small"
        placeholder="请选择"
      >
        <a-select-option value="D">天</a-select-option>
        <a-select-option value="H">小时</a-select-option>
        <a-select-option value="M">分钟</a-select-option>
      </a-select>
      <span class="inline-block ml-2" style="line-height: 28px">后进入下一步</span>
    </div>

    <!-- 自动计算 -->
    <div v-else class="flex">
      <span class="inline-block mr-2" style="line-height: 28px">至当天</span>
      <a-time-picker
        v-model="config_.dateTime"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        style="width: 150px"
        size="small"
        placeholder="任意时间点"
      />
      <span class="inline-block ml-2" style="line-height: 28px">后进入下一步</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DelayNodeConfig',
  props: {
    config: {
      type: Object,
      default: () => ({
        type: 'FIXED',
        time: 0,
        unit: 'M',
        dateTime: '00:00:00'
      })
    }
  },
  computed: {
    config_: {
      get() {
        return this.config;
      },
      set(val) {
        this.$emit('update:config', val);
      }
    }
  }
};
</script>

<style scoped lang="less">
/* 样式留空，如有扩展需求可在此添加 */
</style>
