<template>
  <a-modal v-model:visible="props.visible" title="消息详情" width="800px"
  style="top:20px;"  @cancel="dialogClose">
  <a-descriptions  :column="2" bordered :labelStyle="{width:'110px'}">
    <a-descriptions-item label="消息标题:">{{formData.title}}</a-descriptions-item>
    <a-descriptions-item label="消息类型:">{{getTyepText(formData.type)}}</a-descriptions-item>
    <a-descriptions-item label="业务类型:">{{formData.bizType==1?'订单':'其他'}}</a-descriptions-item>
    <a-descriptions-item label="消息状态:">{{formData.status==1?'已读':'未读'}}</a-descriptions-item>
    <a-descriptions-item label="消息内容:">{{formData.content}}</a-descriptions-item>
</a-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <a-button @click="dialogClose">关闭</a-button>
      </span>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import {getMessageDetail} from "@/api/dashboard/message";
import {onMounted, reactive} from "vue";

const emit = defineEmits(["success", "update:visible"]);
const formData = reactive({
  id: "",
  title: "",
  type:'',
  bizType:'',
  status:'',
  content:''
});

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  messageId: {
    type: Number,
    required: true,
    default: 0
  }
});


const dialogClose = () => {
  emit("update:visible", false);
};

const setFormData = async () => {
  const data = await getMessageDetail(props.messageId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};
const getTyepText =(type)=>{
  let typeText = ''
    switch (type) {
      case 1:
          typeText='系统通知'
          break;
        case 2:
          typeText='用户私信 '
          break;
        case 3:
          typeText='代办事项'
          break;
        default:
          break;
    }
    return typeText 
}

onMounted(() => {
  if (props.messageId) {
    setFormData();
  }
});

</script>
