<!--教职工详情-->
<template>
  <div class="app-container">
    <div class="electricPileDetails">
      <div class="basicInformation">
        <div class="title">基础信息</div>
        <div class="basicInformationContent">
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">所属幼儿园:</div>
                <TooltipOver class="textValue" :text="getkinderLabel(kindergroupOptions,formState.kindergartenId)"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">姓名:</div>
                <TooltipOver class="textValue" :text="formState.userName"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">手机号:</div>
                <TooltipOver class="textValue" :text="formState.phone"></TooltipOver>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">性别:</div>
                <TooltipOver class="textValue" :text="formState.sex"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">邮箱:</div>
                <TooltipOver class="textValue" :text="formState.email"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">政治面貌:</div>
                <TooltipOver class="textValue" :text="formState.politicalStatus"></TooltipOver>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                <div class="textLabel">照片:</div>
                <div>
                  <el-image
                    v-for="fit in picturesArr"
                    class="img-station"
                    :src="fit.url"
                    :preview-src-list="srcList"
                    @click="vbs(fit.url)"
                    :initial-index="2"
                    fit="cover">
                    <div slot="error"  class="img-station img_error_ttx">
                     <span class="img_text">未上传照片</span>
                    </div>
                  </el-image>
                <div style="display: flex;align-items: center;justify-content:center;">
                 <div class="img_text" style="text-align: center;flex: 1">1寸照片</div>
                 <div class="img_text" style="flex: 1;text-align: center;">2寸照片</div>
                </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-divider class="mini-divider-table" />
        <div class="title">任职信息</div>
        <div class="basicInformationContent">
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">工作岗位:</div>
                <TooltipOver class="textValue" :text="formState.mainPost"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">教师教育ID:</div>
                <TooltipOver class="textValue" :text="formState.teacherEducationId"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">在职状态:</div>
                <TooltipOver class="textValue" :text="formState.jobStatus"></TooltipOver>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">职称等级:</div>
                <TooltipOver class="textValue" :text="formState.professionalTitleGrade"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">是否为骨干:</div>
                <TooltipOver class="textValue" :text="formState.isBackbone"></TooltipOver>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">是否为学科带头人:</div>
                <TooltipOver class="textValue" :text="formState.isDisciplineLeader"></TooltipOver>
              </div>
            </el-col>
          </el-row>
          <template v-if="formState.isBackbone === '是'">
            <el-row type="flex">
              <el-col :span="8">
                <div class="mustIcon">
                  <div class="textLabel">骨干类型:</div>
                  <TooltipOver class="textValue" :text="formState.backboneType"></TooltipOver>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mustIcon">
                  <div class="textLabel">骨干开始年限:</div>
                  <TooltipOver class="textValue" :text="formState.backboneStartTime"></TooltipOver>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mustIcon">
                  <div class="textLabel">骨干结束年限:</div>
                  <TooltipOver class="textValue" :text="formState.backboneEndTime"></TooltipOver>
                </div>
              </el-col>

            </el-row>
          </template>
          <el-row type="flex">
             <template v-if="formState.isDisciplineLeader === '是'">
               <el-col :span="8">
                 <div class="mustIcon">
                   <div class="textLabel">学科:</div>
                   <TooltipOver class="textValue" :text="formState.discipline"></TooltipOver>
                 </div>
               </el-col>
             </template>
                <el-col :span="8">
                  <div class="mustIcon">
                    <div class="textLabel">实际教龄:</div>
                    <TooltipOver class="textValue" :text="formState.actualTeachingAge"></TooltipOver>
                  </div>
                </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                <div class="textLabel">教师资格证:</div>
                <div v-for="(item,index) in teacherCertificate" :key="index" class="overflow">
                  <el-image
                    class="img-station"
                    :src="item.certificateUrl"
                    @click="vbs(item.certificateUrl)"
                    :initial-index="1"
                    :preview-src-list="srcList"
                    fit="cover">
                    <div slot="error"  class="img-station img_error_ttx">
                      <span class="img_text">未上传照片</span>
                    </div>
                  </el-image>
                    <TooltipOver class="textValue img_text" :text="item.certificateType"></TooltipOver>
                    <TooltipOver class="textValue img_text" :text="item.certificateCode"></TooltipOver>
                    <TooltipOver class="textValue img_text" :text="item.certificateDate">{{item.certificateDate ? '领取' : ''}}</TooltipOver>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                  <div class="textLabel">其他证书:</div>
                  <div v-for="(item,index) in otherCertificate" :key="index" class="overflow">
                    <el-image
                      class="img-station"
                      :src="item.certificateUrl"
                      @click="vbs(item.certificateUrl)"
                      :initial-index="1"
                      :preview-src-list="srcList"
                      fit="cover">
                      <div slot="error"  class="img-station img_error_ttx">
                        <span class="img_text">未上传照片</span>
                      </div>
                    </el-image>
                    <TooltipOver class="textValue img_text" :text="item.certificateName"></TooltipOver>
                  </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import options from '@/utils/dict/options'
import { getKinderList, teacherDetails } from '@/api/system/teacher'
import TooltipOver from '@/views/components/TooltipOver/index.vue'
import { getDictLabel,getkinderLabel } from '@/utils/dict/config'
import DictType from '@/utils/dict/DictType'

const initForm = {
}
export default {
  components:{TooltipOver},
  dicts: [DictType.political_status, DictType.sys_sex,DictType.post,DictType.job_status,DictType.professional_title_grade,DictType.backbone_type,DictType.certificate_type,DictType.discipline_type],
  data() {
    return {
      options,
      DictType,
      dialogVisible: false,
      formState: Object.assign({}, initForm),
      srcList:[],
      picturesArr:[],
      teacherId:this.$route.query.teacherId,
      kindergroupOptions:[],
      otherCertificate: [],
      teacherCertificate: [],
    }
  },
  mounted() {
    this.getKindergartenList()
    if(this.teacherId) this.teacherDetails()
  },
  methods: {
    getkinderLabel,
    /**
     * 查看详情
     */
    teacherDetails(){
      teacherDetails(this.teacherId).then(({ data,code })=>{
        if(code === 200) {
          this.formState = data
          this.formState.sex = getDictLabel(this.dict.type[DictType.sys_sex],this.formState.sex)
          this.formState.politicalStatus = getDictLabel(this.dict.type[DictType.political_status],this.formState.politicalStatus)
          this.formState.mainPost = getDictLabel(this.dict.type[DictType.post],this.formState.mainPost)
          this.formState.jobStatus=getDictLabel(this.dict.type[DictType.job_status],this.formState.jobStatus)
          this.formState.professionalTitleGrade = getDictLabel(this.dict.type[DictType.professional_title_grade],data.professionalTitleGrade)
          this.formState.isBackbone=getDictLabel(this.options.isBackboneType,this.formState.isBackbone)
          this.formState.backboneType=getDictLabel( this.dict.type[DictType.backbone_type],this.formState.backboneType)
          this.formState.isDisciplineLeader = getDictLabel(this.options.subjectLeader,this.formState.isDisciplineLeader)
          this.formState.discipline=getDictLabel(this.dict.type[DictType.discipline_type],this.formState.discipline)
          this.picturesArr.push({url:this.formState.inchPhotoOne},{url:this.formState.inchPhotoTwo})
          this.handleBook(JSON.parse(this.formState.qualifyCertificate))
        }
      })
    },
    /**
     * 获取所有幼儿园列表
     */
    getKindergartenList() {
      getKinderList().then(({data})=>{
        this.kindergroupOptions = data
      })
    },
    /**
     * 处理预览照片
     * @param val
     */
    vbs(val) {
      this.srcList = [];
      this.srcList.push(val);
    },
    /**
     * 处理资格证书
     */
     handleBook(valArr){
      valArr.forEach(item => {
        const type  = item.hasOwnProperty('certificateType')
        const name = item.hasOwnProperty('certificateName')
        const date = item.hasOwnProperty('certificateDate')
        if (type && !name && date) {
          this.teacherCertificate.push(item)
          this.teacherCertificate.forEach(item=>{
            item.certificateType = getDictLabel(this.dict.type[DictType.certificate_type],item.certificateType)
          })
        } else {
          this.otherCertificate.push(item)
        }
      })
    }
  }

}
</script>
<style scoped lang="scss">
.electricPileDetails {
  .basicInformation {
    .basicInformationContent {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);

      .el-row {
        margin-bottom: 15px;
      }

      .textValue {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }

  .title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 900;
    line-height: 23px;
    color: rgba(0, 0, 0, 0.85);
    margin: 24px 0 19px;
    text-align: left !important;
  }
}

.mustIcon {
  display: flex !important;
  overflow: hidden;
  .textLabel {
    width: 150px;
    padding-left: 30px;
    display: inline-block;
    white-space: nowrap;
    padding-right: 13px;
    text-align: right;
    box-sizing: border-box
  }

  .textValue {
    overflow: hidden;
    flex: 1;
  }
}
.overflow {
  width: 130px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>


