<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="showFieldsModal"
            >表头筛选</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="previewProject(row)"
              >查看</el-button
            >
          </template>
        </common-table>
      </div>
      <el-dialog
        v-model="filedsModalShow"
        modal-class="fields-modal"
        title="筛选查询"
        width="50%"
        top="10vh"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-table
          :data="tableFields"
          style="width: 100%; height: 500px"
          empty-text="暂无数据"
          border
          @selection-change="handleFieldsSelectChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="comment" label="名称" />
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancelFieldsModal">取消</el-button>
            <el-button type="primary" @click="confirmFieldsModal"
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
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: "projectCode",
    label: "项目编号",
    showOverflowTooltip: true,
  },
  {
    prop: "projectLzType",
    label: "状态",
    width: 120,
    align: "center",
    formatter: (data) => {
      return data.projectLzType === "1"
        ? "待立项"
        : data.projectLzType === "3"
          ? "立项审批中"
          : data.projectLzType === "5"
            ? "已立项"
            : data.projectLzType === "7"
              ? "决策填报中"
              : data.projectLzType === "8"
                ? "决策审批中"
                : data.projectLzType === "9"
                  ? "已决策"
                  : "待立项";
    },
  },
  {
    prop: "operations",
    label: "操作",
    width: 90,
    slot: "operations",
    fixed: "right",
    align: "center",
  },
]);
// 获取可显示表头项
let filedsModalShow = ref(false);
let tableFields = reactive([]);
const getTableFields = () => {
  proxy.$post({
    url: "/api/project/getProjectFields",
    data: {},
    callback: (data) => {
      tableFields = (data[0] && data[0].attributes) || [];
    },
  });
};
const showFieldsModal = () => {
  filedsModalShow.value = true;
};
let selectFields = ref([]);
const handleFieldsSelectChange = (datas) => {
  selectFields.value = datas;
};
const cancelFieldsModal = () => {
  selectFields.value = [];
  filedsModalShow.value = false;
};
const confirmFieldsModal = () => {
  tableColumns.value = selectFields.value
    .map((item) => {
      return {
        prop: item.fieldName,
        label: item.comment,
        showOverflowTooltip: true,
      };
    })
    .concat([
      {
        prop: "projectLzType",
        label: "状态",
        width: 120,
        align: "center",
        formatter: (data) => {
          return data.projectLzType === "1"
            ? "待立项"
            : data.projectLzType === "3"
              ? "立项审批中"
              : data.projectLzType === "5"
                ? "已立项"
                : data.projectLzType === "7"
                  ? "决策填报中"
                  : data.projectLzType === "8"
                    ? "决策审批中"
                    : data.projectLzType === "9"
                      ? "已决策"
                      : "待立项";
        },
      },
    ]);
  filedsModalShow.value = false;
};

let loading = ref(false);
let total = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);
// 获取列表数据
const getProjectData = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/listProject",
    data: {
      page: currentPage.value,
      pagesize: pageSize.value,
      attributes: [],
      menuType: "xmdak",
    },
    callback: (data) => {
      tableData.value = data.rows;
      total.value = data.count;
      loading.value = false;
    },
  });
};

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

const previewProject = (item) => {
  router.push({
    name: "addProject",
    query: {
      isPreview: true,
      projectId: item.id,
    },
  });
};
</script>

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