<template>
  <div class="r-1">
    <el-form ref="recommendRef" :model="form" :rules="formRules" label-width="15vw">

      <el-form-item label="推荐专家姓名：" prop="expertName">
        <el-input v-model="form.expertName" placeholder="此处输入专家姓名" />
      </el-form-item>

      <el-form-item label="专家手机号：" prop="expertPhone">
        <el-input v-model="form.expertPhone" placeholder="此处输入手机号" />
      </el-form-item>

      <el-form-item label="推荐理由：" prop="reason">
        <el-input type="textarea" :rows="6" v-model="form.reason" placeholder="此处输入推荐理由" />
      </el-form-item>

      <div class="btn">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        <!-- <el-button type="warning" @click="jumpToRecords">推荐记录</el-button> -->
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { addExpertRecommend } from '@/api/expert/expertRecommend/index';
import router from '@/router';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false)
const initForm = {
  expertName: '',
  expertPhone: '',
  reason: '',
}
const form = ref({ ...initForm });
const recommendRef = ref<ElFormInstance>();
//提交
const submitForm = async () => {

  ElMessageBox.confirm('确认提交以上信息吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    recommendRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        buttonLoading.value = true;
        const res = await addExpertRecommend(form.value).finally(()=>{buttonLoading.value = false});
        if(res.code == 200){
          proxy?.$modal.msgSuccess("提交成功");

        }
        reset();

      }

    });
  }).catch(() => {

  })

}
//重置表单
const reset = () => {
  form.value = { ...initForm };
  recommendRef.value?.resetFields();
}
//跳转推荐记录
// const jumpToRecords = () => {
//   router.push({ path: '/expert/recommendRecord'})
// }

onActivated(() => {

})

onMounted(() => {

})


const formRules = ref({
  expertName: [{ required: true, message: '专家姓名不能为空', trigger: 'blur' }],
  expertPhone: [{ required: true, message: '专家姓名不能为空', trigger: 'blur' }],
  reason: [{ required: true, message: '专家姓名不能为空', trigger: 'blur' }],
})
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 5vh;
  width: 40%;
}

.btn {
  margin-top: 1vh;
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;

  .el-button {
    width: 30%;
  }
}
</style>