<template>
  <div class="manage-container">
    <div class="manage-wrap">
      <search-form @search="handleSearch" />

      <div
        class="system-manage-container message-container"
        v-loading="loading"
      >
        <div class="system-manage-content manage-content">
          <common-table
            :autoHeight="true"
            :maxRows="10"
            :rowHeight="40"
            :data="tableData"
            :columns="tableColumns"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            title=""
            :index="true"
            :border="true"
            @size-change="handleSizeChange"
            @current-page-change="handleCurrentPageChange"
          >
            <template #operations="{ row, index }">
              <el-button
                link
                type="primary"
                size="small"
                @click="handlePreview(row, index)"
              >
                查看
              </el-button>
              <el-button
                link
                type="danger"
                size="small"
                @click="handleDelete(row, index)"
              >
                删除
              </el-button>
            </template>
          </common-table>
        </div>
        <el-dialog
          v-model="messageDialogVisible"
          title=""
          width="500"
          align-center
          @close="closeDialog"
        >
          <div class="message-wrap">
            <div class="message-title">{{ messageInfo.title }}</div>
            <div class="message-content">
              <div class="label">消息类型：</div>
              <div class="info">
                {{
                  messageInfo.type === 2
                    ? "项目初步审核"
                    : messageInfo.type === 3
                      ? "项目终审"
                      : "系统消息"
                }}
              </div>
            </div>
            <div class="message-content">
              <div class="label">时间：</div>
              <div class="info">
                {{
                  proxy
                    .moment(messageInfo.createdAt)
                    .format("YYYY-MM-DD HH:mm:SS")
                }}
              </div>
            </div>
            <div class="message-content">
              <div class="label">备注：</div>
              <div class="info">{{ messageInfo.content }}</div>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="closeDialog">关闭</el-button>
              <el-button type="primary" @click="toProjectPage"
                >去处理</el-button
              >
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import CommonTable from "@/components/common/commonTable.vue";
import SearchForm from "@/components/common/SearchForm.vue";
const handleSearch = (formData) => {
  currentPage.value = 1;

  loadTableData(formData);
};
const router = useRouter();
const { proxy } = getCurrentInstance();
const loading = ref(false);
// 表格数据
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
// 表格列配置
const tableColumns = [
  {
    prop: "title",
    label: "标题",
    minWidth: 100,
  },
  {
    prop: "type",
    label: "消息类型",
    width: 120,
    align: "center",
    formatter: (data) => {
      return data.type === 2
        ? "项目初步审核"
        : data.type === 3
          ? "项目终审"
          : "系统消息";
    },
  },
  {
    prop: "isRead",
    label: "状态",
    width: 90,
    align: "center",
    formatter: (data) => {
      return data.isRead ? "已读" : "未读";
    },
  },
  {
    prop: "createdAt",
    label: "时间",
    width: 180,
    align: "center",
    formatter: (data) => {
      return proxy.moment(data.createdAt).format("YYYY-MM-DD HH:mm:SS");
    },
  },
  {
    prop: "operations",
    label: "操作",
    width: 100,
    slot: "operations",
    fixed: "right",
    align: "center",
  },
];
const loadTableData = (formData = {}) => {
  loading.value = true;
  proxy.$post({
    url: "/api/message/getUserMessages",
    data: {
      page: currentPage.value,
      pageSize: pageSize.value,
      ...formData,
    },
    callback: (data) => {
      tableData.value = data.rows;
      total.value = data.count;
      loading.value = false;
    },
    error: (err) => {
      loading.value = false;
      ElMessage.error("加载数据失败");
    },
  });
};
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  loadTableData();
};

const handleCurrentPageChange = (page) => {
  currentPage.value = page;
  loadTableData();
};
onMounted(() => {
  loadTableData();
});
// 获取信息详情
let messageDialogVisible = ref(false);
let messageInfo = ref({});
const handlePreview = (item) => {
  proxy.$post({
    url: "/api/message/getMessageInfo",
    data: {
      id: item.id,
    },
    callback: (data) => {
      messageDialogVisible.value = true;
      messageInfo.value = data;
    },
    error: (err) => {
      ElMessage.error("加载数据失败");
    },
  });
};
const closeDialog = () => {
  messageInfo.value = {};
  messageDialogVisible.value = false;
};
// 跳转到对应项目
const toProjectPage = () => {
  router.push({
    name: "addProject",
    query: {
      projectId: messageInfo.value.projectId,
      isPreview: true,
    },
  });
};
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定删除该条消息？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    proxy.$post({
      url: "/api/message/deleteMessage",
      data: { id: row.id },
      callback: (data) => {
        ElMessage.success("删除成功");
        loadTableData();
      },
      error: (err) => {
        ElMessage.error("删除失败:", err);
      },
    });
  });
};
</script>

<style lang="less">
.message-wrap {
  .message-title {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
  }
  .message-content {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    .label {
      width: 80px;
      text-align: justify;
      text-align-last: justify;
    }
    .info {
      flex: 1;
      width: 0;
    }
  }
}
</style>
