<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="mx-auto w-[1440px] px-4 py-0 mb-10">
    <bread-crumb
      :breadcrumbItems="
        route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
      "
    />

    <!-- 主要内容卡片 -->
    <div class="rounded-lg bg-white p-6 shadow-sm">
      <!-- 标题区域 -->
      <div class="mb-6">
        <h1 class="mb-4 text-xl font-medium text-gray-900">
          东湖新区排水管网改造工程环境污染问题
        </h1>
        <div class="flex items-center space-x-4 text-sm text-gray-500">
          <span
            class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700"
          >
            已回复
          </span>
          <span>留言人: 李**</span>
          <span>时间: 2024年1月15日 09:23</span>
        </div>
      </div>

      <!-- 问题描述 -->
      <div class="mb-6">
        <p class="text-gray-600">
          施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题：
          <br />施工现场未按要求设置防尘设施 <br />运输车辆未做好防尘措施
          <br />现场积尘较多，未及时清理
          <br />建议加强监管力度，落实各项防尘措施，保障居民生活环境。
        </p>
        <!-- 附件区域 -->
        <div
          v-if="attachments.length > 0"
          class="mt-1 border-t border-gray-200 pt-3"
        >
          <h3 class="mb-3 text-sm font-medium text-gray-900 weight-bold">
            附件：
          </h3>
          <div class="space-y-1">
            <div
              v-for="(file, index) in attachments"
              :key="index"
              class="group flex cursor-pointer items-center rounded-md p-1 hover:bg-gray-50"
              @click="handlePreview(file)"
            >
              <el-icon class="mr-2 text-gray-400" color="blue">
                <Document
                  v-if="
                    file.type === 'pdf' ||
                    file.type === 'doc' ||
                    file.type === 'docx'
                  "
                />
                <Picture
                  v-else-if="
                    file.type === 'jpg' ||
                    file.type === 'png' ||
                    file.type === 'jpeg'
                  "
                />
                <Grid v-else-if="file.type === 'xlsx'" />
              </el-icon>
              <span class="text-sm text-gray-600 group-hover:text-blue-600">{{
                file.name
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 预览弹窗 -->
      <el-dialog
        custom-class="preview-dialog"
        v-model="previewVisible"
        :title="currentFile?.name"
        destroy-on-close
        style="margin-top: 10vh; width: 80%"
      >
        <div style="min-height: 75vh">
          <img
            class="center-block h-full w-full object-contain"
            v-if="
              currentFile?.type === 'jpg' ||
              currentFile?.type === 'png' ||
              currentFile?.type === 'jpeg'
            "
            :src="currentFile.url"
            style="height: 75vh"
          />

          <vue-office-pdf
            v-if="currentFile?.type === 'pdf'"
            class="h-full w-full min-h-[600px]"
            :src="currentFile.url"
            style="height: 75vh"
          />
          <vue-office-docx
            v-if="currentFile?.type === 'doc' || currentFile?.type === 'docx'"
            :src="currentFile.url"
            style="height: 75vh"
          />
          <vue-office-excel
            v-if="currentFile?.type === 'xlsx'"
            :src="currentFile.url"
            style="height: 75vh"
          />
          <!-- <vue-office-pptx
              v-if="currentFile?.type === 'ppt'"
              :src="currentFile.url"
              style="height: 75vh"
            /> -->
        </div>
      </el-dialog>

      <!-- 官方回复 -->
      <div class="rounded-lg bg-gray-50 p-5">
        <h2 class="mb-4 text-lg font-medium text-red-500">官方回复：</h2>
        <div class="space-y-4 text-gray-600">
          <p>
            网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查：
            <br />1.
            关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施：
            <br />增设雾炮机和喷淋设备，加强施工现场降尘
            <br />对裸露土地进行苫盖，设置防尘网
            <br />增加洒水车频次，保持路面湿润 <br />2.
            目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。
            <br />感谢您对我们工作的监督，我们将持续改进服务质量。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  Document,
  Picture,
  Grid,
  DataBoard,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { ref } from "vue";
import { getMessageDetail } from "@/api/wm/wm";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePptx from "@vue-office/pptx";
import "@vue-office/excel/lib/index.css";
import "@vue-office/docx/lib/index.css";

const route = useRoute();

const breadcrumbItems = ref([
  { title: "首页", path: "/wm/wmhome" },
  { title: route.query.title, path: route.query.pathType },
  { title: "详情", path: "" },
]);

const breadcrumbItems2 = ref([
  { title: "首页", path: "/wm/wmhome" },
  { title: "详情", path: "" },
]);

// 获取留言详情
getMessageDetail(route.query.id).then((res) => {});

interface FileItem {
  name: string;
  type: string;
  url: string;
}

const attachments = ref<FileItem[]>([
  {
    name: "现场照片1.jpeg",
    type: "jpeg",
    url: "https://q7.itc.cn/images01/20240805/c433884dec2943c7ac15098e4f940e96.jpeg",
  },
  {
    name: "污染情况报告.pdf",
    type: "pdf",
    url: "http://static.shanhuxueyuan.com/test.pdf",
  },
  {
    name: "监测数据.xlsx",
    type: "xlsx",
    url: "http://static.shanhuxueyuan.com/demo/excel.xlsx",
  },
]);

const previewVisible = ref(false);
const currentFile = ref<FileItem | null>(null);

const handlePreview = (file: FileItem) => {
  currentFile.value = file;
  previewVisible.value = true;
};
</script>

<style scoped>
.min-h-screen {
  min-height: 1024px;
}
</style>
