<template>
    <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>
</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";
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 = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/message/getUserMessages",
    data: {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
    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">
@import "@/styles/manage.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>
