<template>
  <div class="salary-management">
    <GiPageLayout>
      <template #header>
        <a-row justify="space-between" align="center">
          <a-col>
            <h1>工资管理系统</h1>
          </a-col>
          <a-col>
            <a-space>
              <a-button type="primary" @click="handleAdd">
                <template #icon><icon-plus /></template>
                新建工资单
              </a-button>
              <a-button @click="handleExport">
                <template #icon><icon-download /></template>
                导出Excel
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </template>

      <a-card>
        <a-row :gutter="16" class="search-section">
          <a-col :span="6">
            <a-input
              v-model="searchParams.keyword"
              placeholder="搜索员工姓名/工号"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-select
              v-model="searchParams.employeeType"
              placeholder="员工类型"
              allow-clear
            >
              <a-option value="intern">实习生</a-option>
              <a-option value="fulltime">正式员工</a-option>
              <a-option value="parttime">兼职员工</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-range-picker
              v-model="searchParams.dateRange"
              style="width: 100%"
            />
          </a-col>
          <a-col :span="6">
            <a-space>
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-space>
          </a-col>
        </a-row>

        <a-table
          :data="tableData"
          :columns="columns"
          :loading="loading"
          row-key="id"
          :scroll="{ x: 1500 }"
        >
          <template #action="{ record }">
            <a-space>
              <a-button type="text" @click="handleEdit(record)">编辑</a-button>
              <a-button type="text" @click="handleDetail(record)">详情</a-button>
              <a-button type="text" status="danger" @click="handleDelete(record)">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </a-card>
    </GiPageLayout>

    <SalaryFormDrawer
      v-model:visible="drawerVisible"
      :data="currentData"
      :mode="drawerMode"
      @success="handleSuccess"
    />

    <SalaryDetailModal
      v-model:visible="detailVisible"
      :data="currentData"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import SalaryFormDrawer from './components/SalaryFormDrawer.vue'
import SalaryDetailModal from './components/SalaryDetailModal.vue'
import type { SalaryRecord } from './types'

const loading = ref(false)
const drawerVisible = ref(false)
const detailVisible = ref(false)
const drawerMode = ref<'add' | 'edit'>('add')
const currentData = ref<SalaryRecord | null>(null)

const searchParams = reactive({
  keyword: '',
  employeeType: '',
  dateRange: [],
})

const tableData = ref<SalaryRecord[]>([])

const columns = [
  { title: '员工姓名', dataIndex: 'employeeName', fixed: 'left', width: 100 },
  { title: '员工类型', dataIndex: 'employeeType', width: 100 },
  { title: '项目名称', dataIndex: 'projectName', width: 150 },
  { title: '工作天数', dataIndex: 'workDays', width: 80 },
  { title: '基本工资', dataIndex: 'baseSalary', width: 100 },
  { title: '绩效奖金', dataIndex: 'performanceBonus', width: 100 },
  { title: '各类补助', dataIndex: 'allowances', width: 100 },
  { title: '应发总额', dataIndex: 'totalPayable', width: 100 },
  { title: '实发金额', dataIndex: 'netPay', width: 100 },
  { title: '状态', dataIndex: 'status', width: 80 },
  { title: '创建时间', dataIndex: 'createdAt', width: 150 },
  { title: '操作', slotName: 'action', fixed: 'right', width: 150 },
]

const loadData = async () => {
  loading.value = true
  try {
    // 模拟数据
    tableData.value = [
      {
        id: '1',
        employeeId: 'E001',
        employeeName: '张三',
        employeeType: 'intern',
        idCard: '123456789012345678',
        phone: '13800000000',
        bankCard: '6222021234567890',
        bankName: '中国银行',
        projectName: '海上风电项目A',
        projectPeriod: '2025-06',
        workDays: 22,
        offshoreDays: 5,
        baseSalary: 3500,
        baseSalaryStandard: 3500,
        performanceBonus: 2200,
        allowances: 660,
        performanceItems: [],
        allowanceItems: [],
        totalPayable: 6360,
        deductions: 0,
        netPay: 6360,
        status: 'approved',
        approvalFlow: [],
        salaryMonth: '2025-07',
        createdAt: '2025-07-01',
        updatedAt: '2025-07-01',
      },
    ]
  } finally {
    loading.value = false
  }
}

const handleAdd = () => {
  drawerMode.value = 'add'
  currentData.value = null
  drawerVisible.value = true
}

const handleEdit = (record: SalaryRecord) => {
  drawerMode.value = 'edit'
  currentData.value = record
  drawerVisible.value = true
}

const handleDetail = (record: SalaryRecord) => {
  currentData.value = record
  detailVisible.value = true
}

const handleDelete = async (_record: SalaryRecord) => {
  try {
    await Modal.confirm({
      title: '确认删除',
      content: '确定要删除这条记录吗？',
    })
    Message.success('删除成功')
    loadData()
  } catch {
    // 用户取消
  }
}

const handleSearch = () => {
  loadData()
}

const handleReset = () => {
  searchParams.keyword = ''
  searchParams.employeeType = ''
  searchParams.dateRange = []
  loadData()
}

const handleExport = () => {
  // 导出Excel逻辑
  Message.success('导出功能开发中...')
}

const handleSuccess = () => {
  drawerVisible.value = false
  loadData()
}

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

<style scoped>
.salary-management {
  padding: 16px;
}

.search-section {
  margin-bottom: 16px;
}
</style>
