<template>
  <div>
    <div class="con-title">紫荆在读证明申请</div>
    <div class="con-box">
      <el-button type="text" @click="goBack">返回列表</el-button>
      <div class="main-form">
        <el-form label-width="180px" :disabled="isView" ref="ruleForm" :model="ruleForm" :rules="rules">
          <el-form-item label="姓名" prop="personal_name">
            <el-input v-model="ruleForm.personal_name" readonly />
          </el-form-item>
          <el-form-item label="班级" prop="class_name">
            <el-input v-model="ruleForm.class_name" readonly />
          </el-form-item>
          <el-form-item label="Marywood ID" prop="sofia_id">
            <el-input v-model="ruleForm.sofia_id" readonly />
          </el-form-item>
          <el-form-item label="在读证明收件人是否为本人" prop="is_self">
            <el-radio-group v-model="ruleForm.is_self">
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收件人名字" prop="receive_name" v-if="ruleForm.is_self !== '1'">
            <el-input v-model="ruleForm.receive_name" />
          </el-form-item>
          <el-form-item label="收件人联系电话" prop="telephone">
            <el-input v-model="ruleForm.telephone" />
          </el-form-item>
          <el-form-item label="在读证明邮寄地址" prop="email">
            <el-input type="textarea" v-model="ruleForm.email" :autosize="{ minRows: 3 }" />
          </el-form-item>
          <template v-if="isView">
            <el-form-item label="审批状态" style="margin: 0">
              {{ statusText }}
            </el-form-item>
            <el-form-item label="审批时间" style="margin: 0" v-if="detail.approve_time1">
              {{ detail.approve_time1 }}
            </el-form-item>
            <el-form-item label="审批备注" style="margin: 0" v-if="detail.remark1 || detail.remark2">
              {{ detail.remark1 || detail.remark2 }}
            </el-form-item>
          </template>
          <el-form-item v-if="!this.isView">
            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
              {{ $t('pages.affairsHall.shareAdd.savesubmit') }}
            </el-button>
            <el-button type="info" @click="onRemove" v-if="hasAbort">撤回申请</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import editMixins from '../../mixins/edit'
export default {
  mixins: [editMixins],
  data() {
    return {
      ruleForm: {
        affair_id: '',
        personal_name: '',
        class_name: '',
        sofia_id: '',
        is_self: '1',
        receive_name: '',
        telephone: '',
        email: ''
      },
      rules: {
        personal_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }],
        sofia_id: [{ required: true, message: '请输入Marywood ID', trigger: 'blur' }],
        receive_name: [{ required: true, message: '请输入收件人名字', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入收件人联系电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入在读证明邮寄地址', trigger: 'blur' }]
      }
    }
  },
  beforeMount() {
    if (this.isEdit || this.isView) {
      this.getDetail()
    } else {
      // 获取学生信息
      this.getStudent()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-form {
  max-width: 600px;
  margin: 0 auto;
}
.el-date-editor.el-input {
  width: 100%;
}
</style>
