<!-- 代码已包含 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-3">
        <h1 class="mb-2 text-xl font-medium text-gray-900">
          {{ detail.title }}
        </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-green-600"
          >
            {{ detail.replyStatus == "1" ? "已回复" : "未回复" }}
          </span> -->
          <el-tag
            size="small"
            class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-green-600"
            :type="detail.replyStatus === '1' ? 'success' : 'warning'"
          >
            {{ detail.replyStatus === "1" ? "已回复" : "未回复" }}
          </el-tag>

          <span>留言人: ***</span>
          <span>时间: {{ detail.contentDatetime }}</span>
        </div>
      </div>

      <!-- 问题描述 -->
      <div class="mb-6">
        <!-- <div class="space-y-4 text-gray-600" v-html="detail.content"></div> -->
        <el-input
          type="textarea"
          :rows="16"
          disabled
          :autosize="true"
          v-model="detail.content"
          :style="{ width: '100%', color: 'red' }"
          placeholder="留言内容"
        >
        </el-input>
        <!-- 附件区域 -->
        <!-- <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="gray">
                <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" v-if="detail.reply != null">
        <h2 class="mb-4 text-lg font-medium text-red-500">官方回复：</h2>
        <!-- <div type="textarea" class="space-y-4 text-gray-600" v-html="detail.reply"></div> -->

        <el-input
          type="textarea"
          :rows="16"
          disabled
          :autosize="true"
          v-model="detail.reply"
          :style="{ width: '100%', color: 'red' }"
          placeholder="留言内容"
        >
        </el-input>
      </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: "" },
]);

const detail = ref({});

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

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;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #4b4b4b;
  font-size: 15px;
  padding: 20px;
  line-height: 2;
}
:deep(.el-textarea) {
  --el-input-border-color: #fff;
  --el-input-border-color-hover: #fff;
}
</style>
