<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="工作量管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-button type="primary" @click="openAddModal">
          <template #icon><icon-plus /></template>
          <template #default>新增工作量记录</template>
        </a-button>
      </template>
      
      <!-- 工作量显示 -->
      <template #workload="{ record }">
        <span class="font-medium text-blue-600">{{ record.workload }}小时</span>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link status="danger" @click="deleteRecord(record)">删除</a-link>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
let searchForm = reactive({
  userName: '',
  projectName: '',
  startDate: '',
  endDate: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'userName',
    label: '员工姓名',
    type: 'input' as const,
    props: {
      placeholder: '请输入员工姓名'
    }
  },
  {
    field: 'projectName',
    label: '项目名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入项目名称'
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '员工姓名', dataIndex: 'userName', width: 120 },
  { title: '部门', dataIndex: 'deptName', width: 120 },
  { title: '项目名称', dataIndex: 'projectName', width: 200, ellipsis: true, tooltip: true },
  { title: '工作内容', dataIndex: 'workContent', width: 250, ellipsis: true, tooltip: true },
  { title: '工作量(小时)', dataIndex: 'workload', slotName: 'workload', width: 120 },
  { title: '工作日期', dataIndex: 'workDate', width: 120 },
  { title: '创建时间', dataIndex: 'createTime', width: 160 },
  { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    userName: '张三',
    deptName: '技术部',
    projectName: '企业管理系统',
    workContent: '前端开发',
    workload: 8,
    workDate: '2024-01-15',
    createTime: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    userName: '李四',
    deptName: '技术部',
    projectName: '移动端应用',
    workContent: '后端接口开发',
    workload: 6,
    workDate: '2024-01-15',
    createTime: '2024-01-15 11:20:00'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
  showTotal: true,
  showPageSize: true
})

// 搜索和重置
const search = async () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    userName: '',
    projectName: '',
    startDate: '',
    endDate: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新增工作量记录功能开发中...')
}

const editRecord = (record: any) => {
  Message.info(`编辑工作量记录: ${record.userName}`)
}

const deleteRecord = (record: any) => {
  Message.info(`删除工作量记录: ${record.userName}`)
}

onMounted(() => {
  search()
})
</script> 