<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="工资管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
      :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-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>工资核算</template>
          </a-button>
          <a-button @click="exportSalary">
            <template #icon><icon-download /></template>
            <template #default>导出工资单</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 基本工资 -->
      <template #baseSalary="{ record }">
        <span class="font-medium text-blue-600">￥{{ record.baseSalary.toLocaleString() }}</span>
      </template>
      
      <!-- 实发工资 -->
      <template #netSalary="{ record }">
        <span class="font-medium text-green-600">￥{{ record.netSalary.toLocaleString() }}</span>
      </template>
      
      <!-- 状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="confirmSalary(record)" v-if="record.status === 'draft'">确认</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: '',
  deptName: '',
  salaryMonth: '',
  status: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'userName',
    label: '员工姓名',
    type: 'input' as const,
    props: {
      placeholder: '请输入员工姓名'
    }
  },
  {
    field: 'deptName',
    label: '部门',
    type: 'input' as const,
    props: {
      placeholder: '请输入部门名称'
    }
  },
  {
    field: 'status',
    label: '状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择状态',
      options: [
        { label: '草稿', value: 'draft' },
        { label: '已确认', value: 'confirmed' },
        { label: '已发放', value: 'paid' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '员工姓名', dataIndex: 'userName', width: 120, fixed: 'left' },
  { title: '员工工号', dataIndex: 'userCode', width: 120 },
  { title: '部门', dataIndex: 'deptName', width: 120 },
  { title: '岗位', dataIndex: 'position', width: 120 },
  { title: '工资月份', dataIndex: 'salaryMonth', width: 100 },
  { title: '基本工资', dataIndex: 'baseSalary', slotName: 'baseSalary', width: 120 },
  { title: '岗位津贴', dataIndex: 'positionAllowance', width: 100 },
  { title: '绩效奖金', dataIndex: 'performanceBonus', width: 100 },
  { title: '加班费', dataIndex: 'overtimePay', width: 100 },
  { title: '其他补贴', dataIndex: 'otherAllowance', width: 100 },
  { title: '应发合计', dataIndex: 'grossSalary', width: 120 },
  { title: '个人所得税', dataIndex: 'personalTax', width: 100 },
  { title: '社保扣除', dataIndex: 'socialInsurance', width: 100 },
  { title: '公积金扣除', dataIndex: 'housingFund', width: 100 },
  { title: '其他扣除', dataIndex: 'otherDeduction', width: 100 },
  { title: '实发工资', dataIndex: 'netSalary', slotName: 'netSalary', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '操作', slotName: 'action', width: 150, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    userName: '张三',
    userCode: 'EMP001',
    deptName: '技术部',
    position: '前端工程师',
    salaryMonth: '2024-01',
    baseSalary: 12000,
    positionAllowance: 2000,
    performanceBonus: 3000,
    overtimePay: 800,
    otherAllowance: 500,
    grossSalary: 18300,
    personalTax: 1245,
    socialInsurance: 1200,
    housingFund: 960,
    otherDeduction: 0,
    netSalary: 14895,
    status: 'confirmed'
  },
  {
    id: 2,
    userName: '李四',
    userCode: 'EMP002',
    deptName: '技术部',
    position: '后端工程师',
    salaryMonth: '2024-01',
    baseSalary: 11000,
    positionAllowance: 1800,
    performanceBonus: 2500,
    overtimePay: 600,
    otherAllowance: 300,
    grossSalary: 16200,
    personalTax: 975,
    socialInsurance: 1100,
    housingFund: 880,
    otherDeduction: 0,
    netSalary: 13245,
    status: 'paid'
  },
  {
    id: 3,
    userName: '王五',
    userCode: 'EMP003',
    deptName: '市场部',
    position: '市场专员',
    salaryMonth: '2024-01',
    baseSalary: 8000,
    positionAllowance: 1000,
    performanceBonus: 1500,
    overtimePay: 400,
    otherAllowance: 200,
    grossSalary: 11100,
    personalTax: 445,
    socialInsurance: 800,
    housingFund: 640,
    otherDeduction: 0,
    netSalary: 9215,
    status: 'draft'
  }
])

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

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'draft': 'orange',
    'confirmed': 'blue',
    'paid': 'green'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'draft': '草稿',
    'confirmed': '已确认',
    'paid': '已发放'
  }
  return textMap[status] || status
}

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

const reset = () => {
  Object.assign(searchForm, {
    userName: '',
    deptName: '',
    salaryMonth: '',
    status: '',
    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 exportSalary = () => {
  Message.info('导出工资单功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看工资详情: ${record.userName}`)
}

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

const confirmSalary = (record: any) => {
  Message.info(`确认工资: ${record.userName}`)
}

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