<template>
  <div>
    <layout-card>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="通知标题">
          {{ detailItems.TITLE }}
        </el-descriptions-item>
        <el-descriptions-item label="通知等级">
          {{ detailItems.LEVEL }}
        </el-descriptions-item>
        <el-descriptions-item label="回复状态">
          <div style="display: flex; align-items: center">
            <el-switch
              v-model="detailItems.REPLYSTATUS"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <span style="margin-left: 8px">
              {{ detailItems.REPLYSTATUS === "1" ? "开" : "关" }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="企业下发人">
          {{ detailItems.CREATORNAME }}
        </el-descriptions-item>
        <el-descriptions-item label="运输企业">
          {{ detailItems.TRANSPORTATIONCOMPANY }}
        </el-descriptions-item>
        <el-descriptions-item label="通知内容">
          <div v-html="detailItems.NOTIFICATIONCONTENT"></div>
        </el-descriptions-item>
      </el-descriptions>
    </layout-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getSecurityNoticeInfo } from "@/request/safety_production_related.js";
import { useRoute } from "vue-router";
const route = useRoute();
const { NOTIFICATION_ID } = route.query;

const detailItems = ref({
  LEVEL: "",
  PERSON: "",
  TRANSPORTATIONCOMPANY: "",
  NOTIFICATIONCONTENT: "",
});

const fnGetData = async () => {
  const response = await getSecurityNoticeInfo({ NOTIFICATION_ID });
  detailItems.value = response.pd;
};
fnGetData();
</script>

<style scoped></style>
