<template>
  <el-dialog v-model="visible" width="600" :title="`面试审核(${row.name})`">
    <el-form ref="dataFormRef" :model="dataForm" :rules="dataRule" label-width="120px">
      <el-form-item label="面试结果" prop="interview">
        <el-radio-group v-model="dataForm.interview" @change="handleInterviewChange">
          <el-radio :label="item.value" v-for="item in interviewDicList" :key="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="未通过原因" prop="interviewReason" v-if="dataForm.interview == '-1'">
        <el-input 
          type="textarea" 
          v-model="dataForm.interviewReason" 
          placeholder="请输入未通过的原因"
          :rows="4">
        </el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button> 
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { useMessage } from '/@/hooks/message'
import { interview } from "/@/api/recruit/recruitstudentsignup"
import { INTERVIEW_DIC_LIST } from '/@/config/global'
import type { FormInstance } from 'element-plus'

const interviewDicList = INTERVIEW_DIC_LIST.filter((item) => item.value != '0')
// 消息提示 hooks
const message = useMessage()

// Emits
const emit = defineEmits<{
  (e: 'refresh'): void
}>()

// 响应式数据
const visible = ref(false)
const row = reactive<any>({})
const dataFormRef = ref<FormInstance>()
const dataForm = reactive({
  interview: '1',
  interviewReason: ''
})

// 表单验证规则
const dataRule = reactive({
  interview: [
    { required: true, message: '请选择面试结果', trigger: 'change' }
  ],
  interviewReason: [] as any[]
})

// 初始化
const init = (rowData: any) => {
  visible.value = true
  Object.assign(row, rowData)
  dataForm.interview = rowData.interview || '1'
  dataForm.interviewReason = rowData.interviewReason || ''
  // 重置表单验证状态
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}

// 面试结果改变
const handleInterviewChange = () => {
  dataForm.interviewReason = ''
  if(dataForm.interview == '-1'){
    dataRule.interviewReason = [
      { required: true, message: '请输入未通过的原因', trigger: 'blur' }
    ]
  } else {
    dataRule.interviewReason = []
  }
}

// 确认
const confirm = () => {
  dataFormRef.value?.validate((valid: boolean) => {
    if (!valid) {
      return
    }
    interview({ 
      "id": row.id, 
      "interview": dataForm.interview, 
      "interviewReason": dataForm.interviewReason 
    }).then(() => {
      message.success('操作成功')
      visible.value = false
      emit('refresh')
    })
  })
}

// 暴露方法给父组件
defineExpose({
  init
})
</script>

<style scoped>

</style>
