<template>
    <el-dialog
      :model-value="visible"
      title="消息类型0"
      width="800px"
      :append-to-body="true"
      :destroy-on-close="true"
      @open="onOpen"
      @close="onClose"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
        <el-form-item label="应用代码" prop="appCode">
          <el-input v-model="form.appCode" :readonly="mode !== 'insert'"></el-input>
        </el-form-item>
        <el-form-item label="人员代码" prop="flowCode">
          <el-input v-model="form.flowCode" :readonly="mode !== 'insert'"></el-input>
        </el-form-item>
        <el-form-item label="流程名称" prop="flowName">
          <el-input v-model="form.flowName" :readonly="mode === 'show'"></el-input>
        </el-form-item>
        <el-form-item label="流程定义描述" prop="flowDescription">
          <el-input v-model="form.flowDescription" :readonly="mode === 'show'"></el-input>
        </el-form-item>
        <el-form-item label="流程节点定义列表" prop="flowDesignTable">
          <el-table :data="form.stateList" stripe>
            <el-table-column label="应用代码" prop="appCode"> </el-table-column>
            <el-table-column label="流程定义代码" prop="flowCode"> </el-table-column>
            <el-table-column label="流程节点代码" prop="stateCode"> </el-table-column>
            <el-table-column label="流程节点名称" prop="stateName"> </el-table-column>
            <el-table-column label="流程节点描述" prop="stateDescription"> </el-table-column>
            <el-table-column label="流程节点类型" prop="stateType"> </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="流程事件定义列表" prop="flowEventList" title="0-报文，3-文件">
          <el-table :data="form.eventList" stripe>
            <el-table-column label="应用代码" prop="appCode"> </el-table-column>
            <el-table-column label="流程代码" prop="flowCode"> </el-table-column>
            <el-table-column label="流程事件代码" prop="eventCode"> </el-table-column>
            <el-table-column label="流程事件源节点" prop="sourceCode"> </el-table-column>
            <el-table-column label="流程事件目标节点" prop="targetCode"> </el-table-column>
            <el-table-column label="流程事件描述" prop="flowEventDescription"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
  
      <template #footer>
        <div>
          <el-button @click="onClose">关闭</el-button>
          <el-button v-if="mode !== 'show' && mode !== ''" type="primary" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, watch } from 'vue'
  import type { FormRules, FormInstance } from 'element-plus'
  
  import { type FlowMangeDataType, flowMangeDataType } from './types'
  // import { FlowMangeDataType } from './types'
  import { cloneDeep } from 'lodash-es'
  
  const emits = defineEmits<{
    (e: 'on-close'): void
    (e: 'on-save', info: FlowMangeDataType): void
  }>()
  const props = defineProps<{
    mode: string
    visible: boolean
    info: FlowMangeDataType
  }>()

  watch(
    () => props.visible,
    (n, o) => {
      console.log(n, 'nnnn');
    }
  )
  
  const rules: FormRules = {
    appCode: [{ required: true, message: '必须输入应用代码' }],
    flowCode: [{ required: true, message: '必须输入类型代码' }],
    flowName: [{ required: true, message: '必须输入发送者' }],
    flowDescription: [{ required: true, message: '必须输入接收者' }],
  }
  
  const formRef = ref<FormInstance>()
  const form = ref<FlowMangeDataType>(flowMangeDataType)
  
  async function onOpen() {
    form.value = cloneDeep(props.info)
  }
  
  function onClose() {
    formRef.value.resetFields()
    emits('on-close')
  }
  function onSave() {
    formRef.value!.validate((valid) => {
      if (valid) {
        emits('on-save', form.value)
      }
    })
  }
  </script>
  