<template>
  <el-card id="certification-card-body">
    <template #header>
      <span style="font-weight: bold; font-size: larger">
        身份认证
      </span>
    </template>
    <div>
      <el-tabs v-model="activeTab" class="main-card__tab" type="card">
        <el-tab-pane :disabled="role!=='STUDENT'&&role!=='TEACHER'" label="教师认证" name="TEACHER">
          <div class="certification-card-item">
            认证角色： 教师
          </div>
          <div class="certification-card-item">
            当前状态：
            <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
            <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
            <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
            <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
          </div>
          <div class="certification-card-item">
            真实姓名：
            <el-input v-model="teacher.realName" :disabled="disabled" class="certification-card-input" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" maxlength="20"
                      placeholder="请输入真实姓名"></el-input>
          </div>
          <div class="certification-card-item">
            所属单位：
            <el-input v-model="teacher.organization" :disabled="disabled" class="certification-card-input" maxlength="20" placeholder="请输入单位名称"></el-input>
          </div>
          <div class="certification-card-item">
            教师工号：
            <el-input v-model="teacher.jobNumber" :disabled="disabled" class="certification-card-input" maxlength="20" oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入教师工号"></el-input>
          </div>
          <div class="certification-card-item">
            <el-button v-if="state === 'UNIDENTIFIED'" :loading="loading" class="main-card__tab__button" type="primary" @click="apply('TEACHER')">提交审核</el-button>
            <el-button v-if="state === 'REJECTED'" :loading="loading" class="main-card__tab__button" type="primary" @click="reapply('TEACHER')">再次提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane :disabled="role!=='STUDENT'&&role!=='ASSISTANT'" label="助教认证" name="ASSISTANT">
          <div class="certification-card-item">
            认证角色： 助教
          </div>
          <div class="certification-card-item">
            当前状态：
            <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
            <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
            <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
            <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
          </div>
          <div class="certification-card-item">
            真实姓名：
            <el-input v-model="assistant.realName" :disabled="disabled" class="certification-card-input" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" maxlength="20"
                      placeholder="请输入真实姓名"></el-input>
          </div>
          <div class="certification-card-item">
            所属课程：
            <el-input v-model="assistant.organization" :disabled="disabled" class="certification-card-input" maxlength="20" placeholder="请输入课程名称"></el-input>
          </div>
          <div class="certification-card-item">
            学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
            <el-input v-model="assistant.jobNumber" :disabled="disabled" class="certification-card-input" maxlength="20" oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入学号"></el-input>
          </div>
          <div class="certification-card-item">
            <el-button v-if="state === 'UNIDENTIFIED'" :loading="loading" class="main-card__tab__button" type="primary" @click="apply('ASSISTANT')">提交审核</el-button>
            <el-button v-if="state === 'REJECTED'" :loading="loading" class="main-card__tab__button" type="primary" @click="reapply('ASSISTANT')">再次提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane :disabled="role!=='STUDENT'&&role!=='HR'" label="HR认证" name="HR">
          <div class="certification-card-item">
            认证角色： HR
          </div>
          <div class="certification-card-item">
            当前状态：
            <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
            <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
            <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
            <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
          </div>
          <div class="certification-card-item">
            真实姓名：
            <el-input v-model="hr.realName" :disabled="disabled" class="certification-card-input" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" maxlength="20"
                      placeholder="请输入真实姓名"></el-input>
          </div>
          <div class="certification-card-item">
            所属单位：
            <el-input v-model="hr.organization" :disabled="disabled" class="certification-card-input" maxlength="20" placeholder="请输入单位名称"></el-input>
          </div>
          <div class="certification-card-item">
            工作证号：
            <el-input v-model="hr.jobNumber" :disabled="disabled" class="certification-card-input" maxlength="20" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入工作证号"></el-input>
          </div>
          <div class="certification-card-item">
            <el-button v-if="state === 'UNIDENTIFIED'" :loading="loading" class="main-card__tab__button" type="primary" @click="apply('HR')">提交审核</el-button>
            <el-button v-if="state === 'REJECTED'" :loading="loading" class="main-card__tab__button" type="primary" @click="reapply('HR')">再次提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane :disabled="role!=='STUDENT'&&role!=='STAFF'" label="职员认证" name="STAFF">
          <div class="certification-card-item">
            认证角色： 职员
          </div>
          <div class="certification-card-item">
            当前状态：
            <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
            <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
            <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
            <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
          </div>
          <div class="certification-card-item">
            真实姓名：
            <el-input v-model="staff.realName" :disabled="disabled" class="certification-card-input" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" maxlength="20"
                      placeholder="请输入真实姓名"></el-input>
          </div>
          <div class="certification-card-item">
            所属单位：
            <el-input v-model="staff.organization" :disabled="disabled" class="certification-card-input" maxlength="20" placeholder="请输入单位名称"></el-input>
          </div>
          <div class="certification-card-item">
            职员工号：
            <el-input v-model="staff.jobNumber" :disabled="disabled" class="certification-card-input" maxlength="20" oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入职员工号"></el-input>
          </div>
          <div class="certification-card-item">
            <el-button v-if="state === 'UNIDENTIFIED'" :loading="loading" class="main-card__tab__button" type="primary" @click="apply('STAFF')">提交审核</el-button>
            <el-button v-if="state === 'REJECTED'" :loading="loading" class="main-card__tab__button" type="primary" @click="reapply('STAFF')">再次提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "CertificationCard",
  data() {
    return {
      activeTab: "TEACHER",
      role: "STUDENT",
      state: "UNIDENTIFIED",
      disabled: false,
      teacher: {
        realName: "",
        organization: "",
        jobNumber: ""
      },
      staff: {
        realName: "",
        organization: "",
        jobNumber: ""
      },
      hr: {
        realName: "",
        organization: "",
        jobNumber: ""
      },
      assistant: {
        realName: "",
        organization: "",
        jobNumber: ""
      },
      pageLoading: true,
      loading: false
    };
  },
  mounted() {
    this.$apis.superGetInfoAPI({
      realName: this.realName,
      jobNumber: this.jobNumber,
      organization: this.organization
    }).then((res) => {
      if (res.data.code === 0) {
        const data = res.data;
        switch (data.role) {
          case "TEACHER":
            this.teacher.realName = data.realName;
            this.teacher.jobNumber = data.jobNumber;
            this.teacher.organization = data.organization;
            break;
          case "STAFF" :
            this.staff.realName = data.realName;
            this.staff.jobNumber = data.jobNumber;
            this.staff.organization = data.organization;
            break;
          case "HR":
            this.hr.realName = data.realName;
            this.hr.jobNumber = data.jobNumber;
            this.hr.organization = data.organization;
            break;
          case "ASSISTANT":
            this.assistant.realName = data.realName;
            this.assistant.jobNumber = data.jobNumber;
            this.assistant.organization = data.organization;
        }
        this.state = data.state;
        this.disabled = (this.state === "IDENTIFYING" || this.state === "IDENTIFIED");
        this.activeTab = data.role;
        this.role = data.role;
      }
    })
      .catch((e) => {
        console.error(e);
      });
    this.pageLoading = false;
  },
  methods: {
    apply(role) {
      let realName, organization, jobNumber;
      this.loading = true;
      switch (role) {
        case "TEACHER" :
          realName = this.teacher.realName;
          organization = this.teacher.organization;
          jobNumber = this.teacher.jobNumber;
          break;
        case "STAFF" :
          realName = this.staff.realName;
          organization = this.staff.organization;
          jobNumber = this.staff.jobNumber;
          break;
        case "HR" :
          realName = this.hr.realName;
          organization = this.hr.organization;
          jobNumber = this.hr.jobNumber;
          break;
        case "ASSISTANT" :
          realName = this.assistant.realName;
          organization = this.assistant.organization;
          jobNumber = this.assistant.jobNumber;
          break;
      }
      if (realName.length === 0) {
        this.$message({
          showClose: true,
          message: "真实姓名不得为空",
          type: "error"
        });
        this.loading = false;
        return;
      }
      if (organization.length === 0) {
        this.$message({
          showClose: true,
          message: "请选择所属单位",
          type: "error"
        });
        this.loading = false;
        return;
      }
      if (jobNumber.length === 0) {
        this.$message({
          showClose: true,
          message: "工号不得为空",
          type: "error"
        });
        this.loading = false;
        return;
      }
      this.$apis.superApplyAPI({
        realName: realName,
        jobNumber: jobNumber,
        organization: organization,
        role: role
      }).then((res) => {
          if (res.data.code === 0) {
            this.state = "IDENTIFYING";
            this.disabled = true;
            this.$message({
              showClose: true,
              message: "提交成功，请耐心等待审核结果",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "error"
            });
          }
        }
      ).catch((e) => {
        console.error(e);
      });
      this.loading = false;
    },
    reapply(role) {
      let realName, organization, jobNumber;
      this.loading = true;
      switch (role) {
        case "TEACHER" :
          realName = this.teacher.realName;
          organization = this.teacher.organization;
          jobNumber = this.teacher.jobNumber;
          break;
        case "STAFF" :
          realName = this.staff.realName;
          organization = this.staff.organization;
          jobNumber = this.staff.jobNumber;
          break;
        case "HR" :
          realName = this.hr.realName;
          organization = this.hr.organization;
          jobNumber = this.hr.jobNumber;
          break;
        case "ASSISTANT" :
          realName = this.assistant.realName;
          organization = this.assistant.organization;
          jobNumber = this.assistant.jobNumber;
          break;
      }
      if (realName.length === 0) {
        this.$message({
          showClose: true,
          message: "真实姓名不得为空",
          type: "error"
        });
        this.loading = false;
        return;
      }
      if (organization.length === 0) {
        this.$message({
          showClose: true,
          message: "请选择所属单位",
          type: "error"
        });
        this.loading = false;
        return;
      }
      if (jobNumber.length === 0) {
        this.$message({
          showClose: true,
          message: "工号不得为空",
          type: "error"
        });
        this.loading = false;
        return;
      }
      this.$apis.superReapplyAPI({
        realName: realName,
        jobNumber: jobNumber,
        organization: organization,
        role: role
      }).then((res) => {
          if (res.data.code === 0) {
            this.state = "IDENTIFYING";
            this.$message({
              showClose: true,
              message: "提交成功，请耐心等待审核结果",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "error"
            });
          }
        }
      ).catch((e) => {
        console.error(e);
      });
      this.loading = false;
    }
  }
};
</script>

<style scoped>
:deep(.el-card__body) {
  padding: 48px;
}

.certification-card-item {
  margin-left: 10px;
  margin-top: 30px;
  width: 60%;
}

.certification-card-input {
  width: 300px;
}
</style>