<template>
  <el-dialog
    :model-value="visible"
    title="消息类型"
    width="800px"
    :append-to-body="true"
    :destroy-on-close="true"
    @open="onOpen"
    @close="onClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="left">
      <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="typeCode">
        <el-input v-model="form.typeCode" :readonly="mode !== 'insert'"></el-input>
      </el-form-item>
      <el-form-item label="发送人" prop="senderId">
        <el-input v-model="form.senderId" :readonly="mode === 'show'"></el-input>
      </el-form-item>
      <el-form-item label="接收人" prop="receiverId">
        <el-input v-model="form.receiverId" :readonly="mode === 'show'"></el-input>
      </el-form-item>
      <el-form-item label="发送通道" prop="channel">
        <el-input v-model="form.channel" :readonly="mode === 'show'"></el-input>
      </el-form-item>
      <el-form-item label="内容类型" prop="contentType" title="0-报文，3-文件">
        <el-input v-model="form.contentType" :readonly="mode === 'show'"></el-input>
      </el-form-item>
      <el-form-item label="收发标志">
        <el-switch v-model="form.messageDirect" :disabled="mode === 'show'"></el-switch>
      </el-form-item>
      <el-form-item label="是否反馈" title="接收报文类型用，是否需要发送响应报文给发送方">
        <el-switch v-model="form.respRequired" :disabled="mode === 'show'"></el-switch>
      </el-form-item>
      <el-form-item label="反馈类型" title="接收报文类型用，响应报文的类型，respRequired返回true时需要实现">
        <el-input v-model="form.respType" :readonly="mode === 'show'"></el-input>
      </el-form-item>
      <el-form-item label="是否响应" title="发送报文类型用，是否需要接收方发送响应报文">
        <el-switch v-model="form.requireResp" :disabled="mode === 'show'"></el-switch>
      </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 HeaiMessageTypeInfo } from '@cacp/ui'
import { initMessageType } from './types'
import { cloneDeep } from 'lodash-es'

const emits = defineEmits<{
  (e: 'on-close'): void
  (e: 'on-save', info: HeaiMessageTypeInfo): void
}>()
const props = defineProps<{
  mode: string
  visible: boolean
  info: HeaiMessageTypeInfo
}>()
watch(
    () => props.visible,
    (n, o) => {
      console.log(n, 'nnnn');
    }
  )
const rules: FormRules = {
  appCode: [{ required: true, message: '必须输入应用代码' }],
  typeCode: [{ required: true, message: '必须输入类型代码' }],
  senderId: [{ required: true, message: '必须输入发送者' }],
  receiverId: [{ required: true, message: '必须输入接收者' }],
  contentType: [{ required: true, message: '必须输入内容类型' }],
  channel: [{ required: true, message: '必须输入通道' }]
}

const formRef = ref<FormInstance>()
const form = ref<HeaiMessageTypeInfo>(initMessageType)

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>
