<script setup lang="ts">
import ConfigTemplate from '../../ConfigTemplate.vue'

const props = defineProps<{ node: any }>()

const role = inject('role') as string

const form = reactive({
  trigger_type: '0',
  trigger_time: '',
  repeat_trigger: { num: '1', date_unit: '0', time: '', time_range: '' }
})
watchEffect(() => {
  Object.assign(form, props.node.data[role])
})
</script>

<template>
  <ConfigTemplate :model="form" :node="node">
    <el-form-item label="触发类型" prop="trigger_type">
      <el-radio-group v-model="form.trigger_type">
        <el-radio value="0">单次触发</el-radio>
        <el-radio value="1">重复触发</el-radio>
        <el-radio value="2">立即触发</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="form.trigger_type === '0'">
      <el-form-item label="触发时间" prop="trigger_time">
        <el-date-picker v-model="form.trigger_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
    </template>
    <template v-if="form.trigger_type === '1'">
      <el-form-item label="触发时间">
        <div style="display: flex">
          <span>每</span>
          <el-input type="number" style="width: 50px; margin-left: 5px" v-model="form.repeat_trigger.num" />
          <el-select style="width: 60px; margin: 0 5px" v-model="form.repeat_trigger.date_unit">
            <el-option value="0" label="天"></el-option>
            <el-option value="1" label="周"></el-option>
            <el-option value="2" label="月"></el-option>
          </el-select>
          <span>的</span>
          <el-time-picker v-model="form.repeat_trigger.time" style="width: 120px; margin: 0 5px" />
          <span>触发</span>
        </div>
      </el-form-item>
      <el-form-item label="起止时间">
        <p style="font-size: 12px; color: #ccc">提示: 不设起止日期，发布期间会按上面的触发时间规则一直重复触发</p>
        <el-date-picker
          v-model="form.repeat_trigger.time_range"
          type="datetimerange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          :popper-options="{ placement: 'top' }" />
      </el-form-item>
    </template>
  </ConfigTemplate>
</template>
