<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>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, computed, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import CommonTable from "@/components/common/commonTable.vue";
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: "name",
    label: "标题",
    minWidth: 100
  },
  {
    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();
});
</script>

<style lang="less">
@import "@/styles/manage.less";
</style>
