<template>
  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
    <template #extra>
      <Extra/>
    </template>
    <a-card :bordered="false">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="userId"
        :columns="columns"
        :datasource="list"
        cache-key="proSystemUserTable"
      >
        <template #toolbar>
          <a-date-picker v-model:value="where.itemYear" value-format="YYYY" picker="year" @change="onYear"/>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'completed'">
<!--            <a-badge :count="record.balance" :number-style="{ backgroundColor: '#52c41a' }"/>-->
            {{ record.balance || 0 }}
          </template>
          <template v-if="column.key === 'incomplete'">
            {{ record.points || 0 }}
<!--            <a-badge :count="record.points" :number-style="{ backgroundColor: '#ff0000' }"/>-->
          </template>
          <template v-if="column.key === 'fans'">
            {{ record.fans || 0 }}
          </template>
        </template>
      </ele-pro-table>
    </a-card>
  </a-page-header>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import type {EleProTable} from 'ele-admin-pro/es';
import type {
  ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import {getPageTitle} from "@/utils/common";
import Extra from "@/views/pwl/pwlProject/components/extra.vue";
import {pwlProjectCount} from "@/api/pwl/pwlProject";
import {User} from "@/api/system/user/model";
import useSearch from "@/utils/use-search";
import {PwlProjectParam} from "@/api/pwl/pwlProject/model";

const list = ref<User[]>([]);

// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
  // {
  //   title: 'ID',
  //   dataIndex: 'userId',
  //   width: 90,
  //   showSorterTooltip: false
  // },
  {
    title: '姓名',
    dataIndex: 'realName',
    align: 'center'
  },
  {
    title: '未完成项目',
    dataIndex: 'incomplete',
    key: 'incomplete',
    align: 'center'
  },
  {
    title: '已完成项目',
    dataIndex: 'completed',
    key: 'completed',
    align: 'center'
  },
  {
    title: '签字报告数量',
    dataIndex: 'fans',
    key: 'fans',
    align: 'center'
  }
]);

// 表单数据
const {where} = useSearch<PwlProjectParam>({
  id: undefined,
  type: undefined,
  itemYear: undefined,
  keywords: undefined
});

onMounted(() => {
  pwlProjectCount().then(data => {
    list.value = data || [];
  })
});


</script>

<script lang="ts">
export default {
  name: 'PwlCount'
};
</script>
