<script setup lang="ts">
import { reuls_validator } from './relus'
import { ElNotification, ElMessage } from 'element-plus'
import { Salary_Post } from '@/api/salary/index'
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { StarFilled } from '@element-plus/icons-vue'

const formRef = ref<FormInstance>()
const form = ref({
  Id: '',
  T_base: '',
  T_post: '',
  T_seniority: '',
  T_perf: '',
  T_perf_score: '',
  T_back_payment: '',
  T_tax: '',
  T_attendance: '',
  T_cut_payment: '',
  T_pension_insurance: '',
  T_unemployment_insurance: '',
  T_medical_insurance: '',
  T_large_medical_insurance: '',
  T_housing_fund: '',
  T_remark: '',
  T_State: ''
})
const rules = reactive<FormRules>(reuls_validator)
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const formLabelWidth = ref('10rem')
// const submitSalary = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   if (!props.T_uuid) {
//     ElMessage.warning('请选择员工!!!')
//     return
//   }
//   formEl.validate(async valid => {
//     if (valid) {
//       const T_date = props.year + '-' + props.month
//       const res: any = await Salary_Post({ ...form.value, T_uuid: props.T_uuid, T_date })
//       if (res.Code === 200) {
//         ElNotification({
//           title: '提交成功',
//           message: '薪资已添加！！！',
//           type: 'success'
//         })
//         resetForm(formRef.value)
//       }
//     } else {
//       return false
//     }
//   })
// }
  const submitSalary = (formEl: FormInstance | undefined) => {
    if (!formEl || !props.T_uuid) {
      !props.T_uuid && ElMessage.warning('请选择员工!!!')
      return
    }
  
    formEl.validate((valid) => {  // 移除 async 声明
      if (valid) {
        const handleSubmit = async () => {  // 内部声明异步函数
          const T_date = `${props.year}-${props.month}`
          const res: any = await Salary_Post({ 
            ...form.value, 
            T_uuid: props.T_uuid, 
            T_date 
          })
          
          if (res.Code === 200) {
            ElNotification.success({
              title: '提交成功',
              message: '薪资已添加！！！'
            })
            resetForm(formRef.value)
          }
        }
        handleSubmit()
      }
    })
  }
const DataEcho = (data: any) => {
  form.value = { ...data }
}

interface PropsType {
  T_uuid: string
  year: string
  month: string
}
const props = defineProps<PropsType>()

defineExpose({
  DataEcho
})
</script>

<template>
  <el-card class="form-card" style="flex: 1">
    <el-row :gutter="24">
      <el-col :span="12" style="margin-left: 4rem" v-if="form.T_State">
        <el-tag v-if="form.T_State == '1'" type="success" effect="dark">未发布 </el-tag>
        <el-tag v-else-if="form.T_State == '2'" type="warning" effect="dark">已发布 </el-tag>
        <el-tag v-else type="danger" effect="dark">未提交</el-tag>
      </el-col>
    </el-row>
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-row :gutter="24">
        <el-col :span="12" class="form-card-left">
          <el-form-item label="基础工资：" :label-width="formLabelWidth" prop="T_base">
            <el-input v-model="form.T_base" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="岗位工资：" :label-width="formLabelWidth" prop="T_post">
            <el-input v-model="form.T_post" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="工龄工资：" :label-width="formLabelWidth" prop="T_seniority">
            <el-input v-model="form.T_seniority" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="绩效金额：" :label-width="formLabelWidth" prop="T_perf">
            <el-input v-model="form.T_perf" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="绩效得分：" :label-width="formLabelWidth" prop="T_perf_score">
            <el-input v-model="form.T_perf_score" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="其他补款：" :label-width="formLabelWidth" prop="T_back_payment">
            <el-input v-model="form.T_back_payment" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="需缴个人所得税：" :label-width="formLabelWidth" prop="T_tax">
            <el-input v-model="form.T_tax" autocomplete="off" placeholder="￥" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form-card-right">
          <el-form-item label="考勤扣款：" :label-width="formLabelWidth" prop="T_attendance">
            <el-input v-model="form.T_attendance" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="其他扣款：" :label-width="formLabelWidth" prop="T_cut_payment">
            <el-input v-model="form.T_cut_payment" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="需缴养老保险：" :label-width="formLabelWidth" prop="T_pension_insurance">
            <el-input v-model="form.T_pension_insurance" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="需缴医疗保险：" :label-width="formLabelWidth" prop="T_medical_insurance">
            <el-input v-model="form.T_medical_insurance" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="需缴住房公积金：" :label-width="formLabelWidth" prop="T_housing_fund">
            <el-input v-model="form.T_housing_fund" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="需缴纳失业保险：" :label-width="formLabelWidth" prop="T_unemployment_insurance">
            <el-input v-model="form.T_unemployment_insurance" autocomplete="off" placeholder="￥" />
          </el-form-item>
          <el-form-item label="需缴大额医疗保险：" :label-width="formLabelWidth" prop="T_large_medical_insurance">
            <el-input v-model="form.T_large_medical_insurance" autocomplete="off" placeholder="￥" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
            <el-input
              v-model="form.T_remark"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="d-flex" style="flex-direction: column">
      <el-button type="primary" class="submit" @click="submitSalary(formRef)">提交</el-button>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
@import './index.scss';
</style>
