<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <!-- 操作按钮 -->
      <el-row>
        <div class="mb15" style="width: 100%;">
          <el-button 
            type="primary"
            icon="FolderAdd"
            @click="handleAdd">新 增
          </el-button>
        </div>
      </el-row>

      <!-- 表格 -->
      <el-table
        ref="tableRef"
        :data="state.dataList"
        v-loading="state.loading"
        border
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        class="data-table"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        
        <el-table-column label="姓名/工号" min-width="150" align="center">
          <template #default="scope">
            <TeacherNameNo :name="scope.row.teacherName" :no="scope.row.teacherNo" />
          </template>
        </el-table-column>
        
        <el-table-column prop="year" label="年份" width="100" align="center" />
        
        <el-table-column prop="salary" label="13月工资" min-width="120" align="center" show-overflow-tooltip />
        
        <el-table-column prop="assessmentTarget" label="重点考核目标" min-width="150" align="center" show-overflow-tooltip />
        
        <el-table-column prop="specialPerformance1" label="专项绩效1" min-width="120" align="center" show-overflow-tooltip />
        
        <el-table-column prop="specialPerformance2" label="专项绩效2" min-width="120" align="center" show-overflow-tooltip />
        
        <el-table-column prop="meritpay" label="年终奖励性绩效" min-width="150" align="center" show-overflow-tooltip />
        
        <el-table-column label="操作" min-width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button
              v-if="hasAuth('professional_professionalyearbounds_edit')"
              icon="edit-pen"
              link
              type="primary"
              @click="handleEdit(scope.row)">修改
            </el-button>
            <el-button
              v-if="hasAuth('professional_professionalyearbounds_del')"
              icon="delete"
              link
              type="danger"
              style="margin-left: 12px"
              @click="handleDel(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-bind="state.pagination"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
      />

      <!-- 新增/编辑弹窗 -->
      <el-dialog
        v-model="dialogVisible"
        :title="form.id ? '修改' : '新增'"
        width="800px"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <el-form
          ref="formRef"
          :model="form"
          :rules="formRules"
          label-width="120px"
        >
          <el-form-item label="工号" prop="teacherNo">
            <el-input
              v-model="form.teacherNo"
              placeholder="请输入工号"
              clearable
            />
          </el-form-item>
          
          <el-form-item label="姓名" prop="teacherName">
            <el-input
              v-model="form.teacherName"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          
          <el-form-item label="年份" prop="year">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="请选择年份"
              format="YYYY"
              value-format="YYYY"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item label="13月工资" prop="salary">
            <el-input-number
              v-model="form.salary"
              :min="0"
              :precision="2"
              placeholder="请输入13月工资"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item label="重点考核目标" prop="assessmentTarget">
            <el-input-number
              v-model="form.assessmentTarget"
              :min="0"
              :precision="2"
              placeholder="请输入重点考核目标"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item label="专项绩效1" prop="specialPerformance1">
            <el-input-number
              v-model="form.specialPerformance1"
              :min="0"
              :precision="2"
              placeholder="请输入专项绩效1"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item label="专项绩效2" prop="specialPerformance2">
            <el-input-number
              v-model="form.specialPerformance2"
              :min="0"
              :precision="2"
              placeholder="请输入专项绩效2"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item label="年终奖励性绩效" prop="meritpay">
            <el-input-number
              v-model="form.meritpay"
              :min="0"
              :precision="2"
              placeholder="请输入年终奖励性绩效"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defineAsyncComponent } from 'vue'
import { useAuth } from '/@/hooks/auth'
import { BasicTableProps, useTable } from '/@/hooks/table'
import { useMessage, useMessageBox } from '/@/hooks/message'
import { fetchList, addObj, putObj, delObj } from '/@/api/professional/salaries/professionalyearbounds'

const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
const { hasAuth } = useAuth()

// 消息提示 hooks
const message = useMessage()
const messageBox = useMessageBox()

// 表格引用
const tableRef = ref()
const formRef = ref()

// 弹窗状态
const dialogVisible = ref(false)
const submitLoading = ref(false)

// 表单数据
const form = reactive({
  id: '',
  teacherNo: '',
  teacherName: '',
  year: '',
  salary: null as number | null,
  assessmentTarget: null as number | null,
  specialPerformance1: null as number | null,
  specialPerformance2: null as number | null,
  meritpay: null as number | null
})

// 表单验证规则
const formRules = {
  teacherNo: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  teacherName: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  year: [
    { required: true, message: '请选择年份', trigger: 'change' }
  ]
}

// 配置 useTable
const state: BasicTableProps = reactive<BasicTableProps>({
  pageList: async (params: any) => {
    const response = await fetchList(params)
    return {
      data: {
        records: response.data.records || [],
        total: response.data.total || 0
      }
    }
  },
  queryForm: {}
})

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)

// 打开新增窗口
const handleAdd = () => {
  Object.assign(form, {
    id: '',
    teacherNo: '',
    teacherName: '',
    year: '',
    salary: null,
    assessmentTarget: null,
    specialPerformance1: null,
    specialPerformance2: null,
    meritpay: null
  })
  dialogVisible.value = true
}

// 打开编辑窗口
const handleEdit = async (row: any) => {
  Object.assign(form, {
    id: row.id || '',
    teacherNo: row.teacherNo || '',
    teacherName: row.teacherName || '',
    year: row.year || '',
    salary: row.salary || null,
    assessmentTarget: row.assessmentTarget || null,
    specialPerformance1: row.specialPerformance1 || null,
    specialPerformance2: row.specialPerformance2 || null,
    meritpay: row.meritpay || null
  })
  dialogVisible.value = true
}

// 删除
const handleDel = (row: any) => {
  messageBox.confirm('是否确认删除该条记录').then(async () => {
    try {
      await delObj(row.id)
      message.success('删除成功')
      getDataList(false) // 删除后保持当前页
    } catch (error: any) {
      message.error(error.msg)
    }
  }).catch(() => {
    // 用户取消
  })
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      submitLoading.value = true
      try {
        if (form.id) {
          await putObj(form)
          message.success('修改成功')
        } else {
          await addObj(form)
          message.success('添加成功')
        }
        dialogVisible.value = false
        getDataList(false) // 提交后保持当前页
      } catch (error: any) {
        // 错误处理已在数据请求层统一处理，此处不需要提示
      } finally {
        submitLoading.value = false
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.data-table {
  width: 100% !important;
}
</style>
