<template>
  <div class="manage-container">
    <div class="manage-wrap">
      <search-form @search="handleSearch" />
      <div class="manage-header">
        <div class="header-left"></div>
        <div class="header-right">
          <el-button type="primary" @click="workForHousingAdd">新增</el-button>
        </div>
      </div>
      <div class="manage-content" v-loading="loading">
        <common-table
          :autoHeight="true"
          :maxRows="10"
          :data="tableData"
          :columns="tableColumns"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          :index="true"
          :indexLabel="'序号'"
          title=""
          :border="true"
          @size-change="handleSizeChange"
          @current-page-change="handleCurrentPageChange"
        >
          <template #operations="{ row, index }">
            <el-button
              link
              type="primary"
              size="small"
              @click="previewRecord(row)"
              >查看</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="editRecord(row)"
              >编辑</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="deleteRecord(row)"
              >删除</el-button
            >
          </template>
        </common-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import CommonTable from "@/components/common/commonTable.vue";
import SearchForm from "@/components/common/SearchForm.vue";

const handleSearch = (formData) => {
  currentPage.value = 1;

  getProjectData(formData);
};

const router = useRouter();
const { proxy } = getCurrentInstance();

let tableData = ref([]);
let tableColumns = ref([
  {
    prop: "djbh",
    label: "登记编号",
    showOverflowTooltip: true,
  },
  {
    prop: "xmmc",
    label: "项目名称",
    showOverflowTooltip: true,
  },
  {
    prop: "htbh",
    label: "合同编号",
    showOverflowTooltip: true,
  },
  {
    prop: "kklx",
    label: "抵扣类型",
    width: 100,
  },
  {
    prop: "htje",
    label: "合同金额",
    width: 120,
  },
  {
    prop: "djrq",
    label: "登记日期",
    width: 120,
  },
  {
    prop: "jbr",
    label: "经办人",
    width: 100,
  },
  {
    prop: "operations",
    label: "操作",
    width: 170,
    slot: "operations",
    fixed: "right",
    align: "center",
  },
]);

let loading = ref(false);
let total = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);

// 获取列表数据
const getProjectData = (params = {}) => {
  loading.value = true;
  // TODO: 替换为实际的后端接口
  // proxy.$post({
  //   url: "/api/workForHousing/getList",
  //   data: {
  //     page: currentPage.value,
  //     pagesize: pageSize.value,
  //     ...params,
  //   },
  //   callback: (data) => {
  //     tableData.value = data.rows;
  //     total.value = data.count;
  //     loading.value = false;
  //   },
  // });

  // 临时模拟数据
  setTimeout(() => {
    tableData.value = [
      {
        id: 1,
        djbh: "DJ202403001",
        xmmc: "某某工程项目",
        htbh: "HT202403001",
        kklx: "工程款",
        htje: "1000000",
        djrq: "2024-03-15",
        jbr: "张三",
      },
      {
        id: 2,
        djbh: "DJ202403002",
        xmmc: "另一个工程项目",
        htbh: "HT202403002",
        kklx: "材料款",
        htje: "500000",
        djrq: "2024-03-16",
        jbr: "李四",
      },
    ];
    total.value = 2;
    loading.value = false;
  }, 500);
};

// 分页
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  getProjectData();
};

const handleCurrentPageChange = (page) => {
  currentPage.value = page;
  getProjectData();
};

// 新增
const workForHousingAdd = () => {
  router.push("/workForHousingAdd");
};

// 编辑
const editRecord = (item) => {
  router.push({
    name: "workForHousingAdd",
    query: {
      id: item.id,
    },
  });
};

// 查看
const previewRecord = (item) => {
  router.push({
    name: "workForHousingAdd",
    query: {
      isPreview: true,
      id: item.id,
    },
  });
};

// 删除
const deleteRecord = (item) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // TODO: 替换为实际的后端接口
      // proxy.$post({
      //   url: "/api/workForHousing/delete",
      //   data: {
      //     id: item.id,
      //   },
      //   callback: (data) => {
      //     ElMessage.success("删除成功");
      //     getProjectData();
      //   },
      // });

      // 临时模拟删除
      ElMessage.success("删除成功");
      getProjectData();
    })
    .catch(() => {});
};

onMounted(() => {
  getProjectData();
});
</script>

<style scoped lang="less"></style>
