<template>
  <div class="teacherInfo">
    <div class="infoWrap">
      <div class="left">
        <h4>基本信息</h4>
        <el-form :model="topForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名"
                            :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.realName"
                          disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名(备注)"
                            :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.memo"
                          disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="老师编号"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.gender"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.birthdate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作类别"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.jobNature "></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入职日期"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.entryDate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="教学点"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.teacherSchools"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属分部"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.organName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="流动范围"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.flowOrganRange"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="老师简介"
                            :label-width="formLabelWidth">
                <el-input disabled
                          type='textarea'
                          v-model.trim="topForm.introduction"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开放陪练"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="isSupportExtraPracticeLesson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <h4>资料学历</h4>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业学校"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.graduateSchool"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电子邮箱"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.educationBackground"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业技能"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.subjectName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.technicalTitles"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件类型"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.certificateType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.certificateNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
             <el-row>
            <el-col :span="12">
              <el-form-item label="转正日期"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.formalStaffDate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="离职日期"
                            :label-width="formLabelWidth">
                <el-input disabled
                          v-model.trim="topForm.demissionDate"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="right">
        <div class="teacherIcon">
          <img v-if="topForm.avatar"
               :src="topForm.avatar"
               alt="">
          <img v-else
               src="@/assets/images/base/woman.png"
               alt="">
        </div>

      </div>
    </div>

  </div>
</template>
<script>
import { teacherGet } from '@/api/teacherManager'
import dayjs from 'dayjs';
export default {
  name: 'teacherInfo',
  data () {
    return {
      formLabelWidth: '80px',
      teacherId: this.$route.query.teacherId,
      topForm: {}
    }
  },
  activated () {
    this.teacherId = this.$route.query.teacherId
    this.teacherGet()
    // console.log(this.$route.query.teacherId);
  },
  mounted () {
    this.teacherId = this.$route.query.teacherId
    this.teacherGet()
  },
  methods: {
    teacherGet () {
      teacherGet({ teacherId: this.teacherId }).then(res => {
        if (res.code == 200) {
          let tempData = res.data
          tempData.subjectName = this.joinArray(tempData.subjectName)
          let sn = []
          tempData.teacherSchools.forEach(item => {
            sn.push(item.name)
          })
          tempData.teacherSchools = this.joinArray(sn, ',') // 教学点
          tempData.entryDate = this.formatTimer(tempData.entryDate)
          tempData.jobNature = this.jobNature(tempData.jobNature)
          tempData.birthdate = this.formatTimer(tempData.birthdate)
          tempData.gender = tempData.gender ? '男' : '女'
          this.topForm = res.data
          if(this.topForm.demissionDate){
             this.topForm.demissionDate = dayjs(this.topForm.demissionDate).format('YYYY-MM-DD')
          }
          if(this.topForm.formalStaffDate) {
            this.topForm.formalStaffDate = dayjs(this.topForm.formalStaffDate).format('YYYY-MM-DD')
          }

        }
      })
    },
    joinArray (value, type) {
      if (!type) {
        type = ' '
      }
      if (typeof value == 'object' && value != null) {
        return value.join(type)
      } else {
        return value
      }
    },
    formatTimer (value) {
      if (value) {
        return value.split(' ')[0]
      } else {
        return value
      }
    },
    jobNature (value) {
      let template = {
        PART_TIME: "兼职",
        FULL_TIME: "全职",
        TEMPORARY: "零时工"
      }
      return template[value]
    }
  },
  computed: {
    isSupportExtraPracticeLesson () {
      let str = ''
      this.topForm.isSupportExtraPracticeLesson ? str = '是' : str = "否"
      return str
    }
  }
}
</script>
<style lang="scss" scoped>
.teacherInfo {
  .infoWrap {
    margin-top: 20px;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      max-width: 1000px;
      width: 100%;
      h4 {
        margin-bottom: 20px;
      }
    }
    .right {
      margin-left: 100px;
      .teacherIcon {
        width: 150px;
        height: 150px;
        // border: 1px solid #444;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 150px;
          height: 150px;
        }
      }
    }
  }
}
/deep/.el-form-item {
  width: 100%;
}
/deep/.el-date-editor.el-input,
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-form-item__content {
  font-size: 14px !important;
  margin-right: 5%;
}
</style>
