<script setup>
import { Position, Handle } from '@vue-flow/core'

const props = defineProps(['label', 'data', 'process', 'disabled'])

const dialogVisible = ref(false)

const formRef = ref(null)
const form = reactive({
  time: '一次性触发',
  condition: '无条件触发',
  desc: ''
})

watch(dialogVisible, value => {
  if (value) {
    Object.assign(form, props.data)
  } else {
    formRef.value?.resetFields()
  }
})

const rules = reactive({
  time: [{ required: true, message: '请选择', trigger: 'blur' }],
  condition: [{ required: true, message: '请选择', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入', trigger: 'blur' }]
})

const timeList = ['一次性触发', '周期性触发']
const conditionList = ['无条件触发', '固定条件触发', '动态条件触发']

const handleSubmit = async () => {
  await formRef.value?.validate()
  Object.assign(props.data, { ...form })
  dialogVisible.value = false
}

const handleClick = () => {
  if (props.disabled) return
  dialogVisible.value = true
}
</script>

<template>
  <div class="flow-node flow-node-start" @click="handleClick">
    <div class="flow-node__label">{{ label }}</div>
    <Handle type="source" :position="Position.Right" />
    <p class="flow-node-tips" v-if="process == 1 && !disabled">点击节点维护自动化营销旅程的触发条件</p>

    <el-dialog v-model="dialogVisible" title="自动化营销旅程设计-旅程触发" append-to-body width="600">
      <el-form label-suffix=":" label-width="140" :model="form" :rules="rules" ref="formRef">
        <el-form-item label="旅程触发时机" prop="time">
          <el-radio-group v-model="form.time">
            <el-radio v-for="item in timeList" :key="item" :label="item" :value="item"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="旅程触发条件" prop="condition">
          <el-radio-group v-model="form.condition">
            <el-radio v-for="item in conditionList" :key="item" :label="item" :value="item"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="旅程触发条件说明" prop="desc">
          <el-input type="textarea" v-model="form.desc" show-word-limit maxlength="200" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row justify="center">
          <el-button plain auto-insert-space @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<style>
@import './style.css';
</style>
