<template>
  <div class="manage-container">
    <div class="manage-wrap">
      <div class="manage-header">
        <div class="header-left"></div>
        <div class="header-right">
          <el-button type="primary" @click="costAdd">新增</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="previewStatement(row)"
              >查看</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="editStatement(row)"
              >编辑</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="deleteStatement(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";

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

let tableData = ref([]);
let tableColumns = ref([
  {
    prop: "projectName",
    label: "项目信息",
    showOverflowTooltip: true,
  },
  // {
  //   prop: "yjzbLen",
  //   label: "一级指标",
  //   showOverflowTooltip: true,
  // },
  // {
  //   prop: "ejzbLen",
  //   label: "二级指标",
  //   showOverflowTooltip: true,
  // },

  {
    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 getStatementData = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getCbglList",
    data: {
      page: currentPage.value,
      pagesize: pageSize.value,
    },
    callback: (data) => {
      const countValidRows = (arr) => {
        if (!Array.isArray(arr)) return 0;
        return arr.reduce((count, item) => {
          if (Array.isArray(item?.fj) && item.fj.length > 0) {
            count++;
          }
          return count;
        }, 0);
      };
      tableData.value = data.rows.map((it) => {
        return {
          ...it,
          yjzbLen: `${it.yjzb.length}行`,
          ejzbLen: `${it.ejzb.length}行`,
        };
      });

      total.value = data.count;
      loading.value = false;
    },
  });
};
// 分页
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  getStatementData();
};
const handleCurrentPageChange = (page) => {
  currentPage.value = page;
  getStatementData();
};
const costAdd = () => {
  router.push("/costAdd");
};
const editStatement = (item) => {
  router.push({
    name: "costAdd",
    query: {
      id: item.id,
    },
  });
};
const previewStatement = (item) => {
  router.push({
    name: "costAdd",
    query: {
      isPreview: true,
      id: item.id,
    },
  });
};
const deleteStatement = (item) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.$post({
        url: "/api/project/deleteCbgl",
        data: {
          id: item.id,
        },
        callback: (data) => {
          ElMessage.success("删除成功");
          getStatementData();
        },
      });
    })
    .catch(() => {});
};
onMounted(() => {
  getStatementData();
});
</script>

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