<!--
  Description: 新增/编辑订阅管理
  Author: 李亚光
  Date: 2025-05-27
 -->
<script name="addSubscribeDialog" lang="ts" setup>
const $emits = defineEmits(['closeRefresh'])
import { addSubscribe, editSubscribe } from '@/api/basic/subscribe'
import { getDictByCode } from '@/api/system/dict'
import { ElMessage } from 'element-plus'
const $route = useRoute()
// 对话框类型：create,update
const dialogStatus = ref('create')
const dialogVisible = ref(false)
const ruleFormRef = ref()
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
}
const subscribeInfo = ref({
  id: '',
  groupId: '',
  messageType: '',
  subscribeType: '',
})
const subscribeInfoRules = ref({
  messageType: [{ required: true, message: '消息类型不能为空', trigger: 'blur' }],
  subscribeType: [{ required: true, message: '订阅类型不能为空', trigger: 'blur' }],
}) // 表单验证规则

// ----------初始化、关闭对话框相关-----------------
function initDialog(dialogstatus: string, row: any) {
  dialogStatus.value = dialogstatus
  dialogVisible.value = true
  if (dialogstatus === 'create') {
    subscribeInfo.value = {
      id: '',
      groupId: '',
      messageType: '',
      subscribeType: '',
    }
    nextTick(() => {
      ruleFormRef.value?.clearValidate()
    })
  }
  else {
    subscribeInfo.value = row
  }
}
defineExpose({ initDialog })
const messageTypeLoading = ref(false)
const subscribeTypeLoading = ref(false)
const messageTypeList = ref<{ id: string, name: string, value: string }[]>([])
const subscribeTypeList = ref<{ id: string, name: string, value: string }[]>([])
// 获取字典
const fetchDict = () => {
  // 消息类型
  messageTypeLoading.value = true
  getDictByCode('messageType').then(res => {
    messageTypeList.value = res.data
    messageTypeLoading.value = false
  }).catch(() => {
    messageTypeLoading.value = false
  })
  // 订阅方式
  subscribeTypeLoading.value = true
  getDictByCode('subscribeType').then(res => {
    subscribeTypeList.value = res.data
    subscribeTypeLoading.value = false
  }).catch(() => {
    subscribeTypeLoading.value = false
  })

}
fetchDict()

const btnLoading = ref(false)
const saveForm = () => {
  console.log($route.query.id, '$route.query.id')
  ruleFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      btnLoading.value = true;
      (dialogStatus.value === 'create' ? addSubscribe : editSubscribe)({...subscribeInfo.value,groupId: $route.query.id}).then(res => {
        ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
        dialogVisible.value = false
        $emits('closeRefresh')
        btnLoading.value = false
      }).catch(() => {
        btnLoading.value = false
      })
    }
  })
}
const dialogClose = () => {
  dialogVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="`${textMap[dialogStatus]}订阅`" :append-to-body="true"
    :close-on-click-modal="false" width="450px">
    <el-form ref="ruleFormRef" :model="subscribeInfo" :rules="subscribeInfoRules" label-position="right"
      label-width="110px" border stripe>
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item label="消息类型" prop="messageType">
            <el-select v-model="subscribeInfo.messageType" placeholder="请选择消息类型" style="width: 100%;"
              :loading="messageTypeLoading">
              <el-option v-for="item in messageTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item label="订阅类型" prop="subscribeType">
            <el-select v-model="subscribeInfo.subscribeType" placeholder="请选择订阅类型" style="width: 100%;"
              :loading="subscribeTypeLoading">
              <el-option v-for="item in subscribeTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item label="订阅方式URL" prop="">
            <el-input v-model="subscribeInfo.groupName" placeholder="请输入URL" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item label="消息队列地址" prop="">
            <el-input v-model="subscribeInfo.groupName" placeholder="请输入队列地址" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item label="队列名" prop="">
            <el-input v-model="subscribeInfo.groupName" placeholder="请输入队列名" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item label="订阅开关" prop="">
            <el-switch v-model="subscribeInfo.value1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="btnLoading" :disabled="btnLoading" type="primary" @click="saveForm">
          保存
        </el-button>
        <el-button @click="dialogClose">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>