<template>
 <div class="app-container">
   <div class="content total-form">
     <div class="pl-5 mb20 steps-left">
       <el-timeline>
         <el-timeline-item
           v-for="(voteActivity, index) in activities"
           :key="index"
           :color="index === currentIndex ? '#0bbd87': ''"
         >
           <a :style="{color:index === currentIndex ? '#0bbd87': ''}" @click="handleSteps(voteActivity,index)">{{ voteActivity.content }}</a>
         </el-timeline-item>
       </el-timeline>
     </div>
     <div class="steps-right">
       <el-form ref="form" :rules="rules" :model="formState" label-width="100px">
       <div id="section1">
         <div class="top-title">基础信息</div>
         <el-row style="display: flex; flex-wrap: wrap;">
           <el-col :span="12">
             <el-form-item label="所属幼儿园" required>
               <el-col :span="11">
                 <el-form-item>
                   <area-cascader :province-id.sync="formState.provinceId" :city-id.sync="formState.cityId" :placeholder="'请选择所在省市'" :level="2" @change="handleSelectArea" :handDisabled="handDisabled" />
                 </el-form-item>
               </el-col>
               <el-col :span="2" class="line"  style="text-align: center">-</el-col>
               <el-col :span="11">
                 <el-form-item prop="kindergartenId">
                   <el-select v-model="formState.kindergartenId" filterable placeholder="请选择" clearable :disabled="handDisabled">
                     <el-option
                       v-for="item in kindergroupOptions"
                       :key="item.id"
                       :label="item.kindergartenName"
                       :value="item.id"
                     />
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="姓名" prop="userName">
               <el-input
                 v-model.trim="formState.userName"
                 clearable
                 placeholder="请输入姓名"
                 :minlength="1"
                 :maxlength="10"
                 show-word-limit
               />
             </el-form-item>
           </el-col>
           <el-col  :span="12">
             <el-form-item label="手机号" prop="phone">
               <el-input
                 v-model.trim="formState.phone"
                 clearable
                 placeholder="请输入手机号"
                 :minlength="1"
                 :maxlength="11"
                 show-word-limit
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="性别" prop="sex">
               <el-radio-group v-model="formState.sex">
                 <el-radio
                   v-for="dict in dict.type[DictType.sys_sex]"
                   :key="dict.value"
                   :label="dict.value"
                 >{{ dict.label }}
                 </el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col   :span="12">
             <el-form-item label="邮箱" prop="email">
               <el-input
                 v-model.trim="formState.email"
                 clearable
                 placeholder="请输入邮箱"
                 maxlength="30"
                 show-word-limit
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="政治面貌">
               <el-select v-model="formState.politicalStatus" placeholder="请选择政治面貌" filterable style="width: 100%">
                 <el-option
                   v-for="dict in dict.type[DictType.political_status]"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                 />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="3">
             <el-form-item label="照片">
               <upload-image :text="'1寸照片'" :show-text="false" :value.sync="formState.inchPhotoOne" :max-size="2"  :limit="1" />
             </el-form-item>
           </el-col>
           <el-col :span="3">
             <el-form-item>
               <upload-image :text="'2寸照片'" :show-text="false" :value.sync="formState.inchPhotoTwo" :max-size="2"  :limit="1"/>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="">
               <span style="font-size: 13px;color: #8a8f97">支持上传jpg/png格式图片,单个图片不能超过2M</span>
             </el-form-item>
           </el-col>
         </el-row>
         <el-divider class="mini-divider-table" />
       </div>
       <div id="section2">
         <div class="top-title">任职信息</div>
         <el-row style="display: flex; flex-wrap: wrap;">
           <el-col  :span="12">
             <el-form-item label="工作岗位" >
               <el-col :span="11">
                 <el-select v-model="formState.mainPost" filterable placeholder="请选择主要岗位">
                   <el-option
                     v-for="dict in dict.type[DictType.post]"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
                   />
                 </el-select>
               </el-col>
               <el-col :span="2" class="line"  style="text-align: center">-</el-col>
               <el-col :span="11">
                 <el-select v-model="formState.otherPost" filterable placeholder="请选择其他岗位">
                   <el-option
                     v-for="dict in dict.type[DictType.post]"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
                   />
                 </el-select>
               </el-col>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="教师教育ID" prop="teacherEducationId">
               <el-input
                 v-model.trim="formState.teacherEducationId"
                 clearable
                 placeholder="请输入教师教育ID"
                 maxlength="17"
                 show-word-limit
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="在职状态">
               <el-select v-model="formState.jobStatus" placeholder="请选择在职状态" filterable style="width: 100%">
                 <el-option
                   v-for="dict in dict.type[DictType.job_status]"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                 />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="职称等级">
               <el-select v-model="formState.professionalTitleGrade" placeholder="请选择职称等级" filterable style="width: 100%">
                 <el-option
                   v-for="dict in dict.type[DictType.professional_title_grade]"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                 />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-col  :span="12">
               <el-form-item label="是否为骨干">
                 <el-col :span="11">
                   <el-radio-group v-model="formState.isBackbone">
                     <el-radio
                       v-for="dict in options.isBackboneType"
                       :key="dict.value"
                       :label="dict.value"
                     >{{ dict.label }}
                     </el-radio>
                   </el-radio-group>
                 </el-col>
                 <template v-if="formState.isBackbone === '1'">
                   <el-col :span="2" class="line" style="text-align: center">-</el-col>
                   <el-col :span="11">
                     <el-select v-model="formState.backboneType" placeholder="请选择骨干类型" filterable style="width: 100%">
                       <el-option
                         v-for="dict in dict.type[DictType.backbone_type]"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
                       />
                     </el-select>
                   </el-col>
                 </template>
               </el-form-item>
             </el-col>
             <el-col   v-if="formState.isBackbone === '1'" :span="12">
               <el-form-item label="骨干年限" >
                 <el-col :span="11">
                   <el-form-item prop="backboneStartTime">
                     <el-date-picker v-model="formState.backboneStartTime" type="date" placeholder="开始时间" value-format="yyyy-MM-dd" style="width: 100%;" />
                   </el-form-item>
                 </el-col>
                 <el-col class="line" :span="2" style="text-align: center">-</el-col>
                 <el-col :span="11">
                   <el-form-item prop="backboneEndTime">
                     <el-date-picker v-model="formState.backboneEndTime" placeholder="结束时间" value-format="yyyy-MM-dd" style="width: 100%;" />
                   </el-form-item>
                 </el-col>
               </el-form-item>
             </el-col>
           </el-col>
           <el-col :span="12">
             <el-form-item label="学科带头人" >
               <el-col :span="11">
                 <el-radio-group v-model="formState.isDisciplineLeader">
                   <el-radio
                     v-for="dict in options.subjectLeader"
                     :key="dict.value"
                     :label="dict.value"
                   >{{ dict.label }}
                   </el-radio>
                 </el-radio-group>
               </el-col>
               <template v-if="formState.isDisciplineLeader === '1'">
                 <el-col :span="2" class="line"  style="text-align: center">-</el-col>
                 <el-col :span="11">
                   <el-select v-model="formState.discipline" placeholder="请选择学科" filterable>
                     <el-option
                       v-for="dict in dict.type[DictType.discipline_type]"
                       :key="dict.value"
                       :label="dict.label"
                       :value="dict.value"
                     />
                   </el-select>
                 </el-col>
               </template>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="实际教龄" >
               <el-input-number :min="0" :max="99" v-model="formState.actualTeachingAge" disabled ></el-input-number>
             </el-form-item>
           </el-col>
           <el-divider class="mini-divider-table" />
           <el-row style="display: flex; flex-wrap: wrap;">
             <el-col :span="24">
               <el-form-item label="教师资格证" />
             </el-col>
             <el-col :span="24">
               <el-form label-position="top">
                 <div v-for="(item, index) in teacherCertificate" :key="index">
                   <el-row :gutter="20" type="flex" justify="center">
                     <el-col :span="2">
                       <el-form-item label="" />
                     </el-col>
                     <el-col :span="5">
                       <el-form-item label="资格证类型">
                         <el-select v-model="item.certificateType" placeholder="请选择教师资格证类型" filterable @change="SelectChange">
                           <el-option
                             v-for="dict in dict.type[DictType.certificate_type]"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"
                             :disabled="dict.disabled"
                           />
                         </el-select>
                         <span class="err_msg" v-if="item.status">当前行信息不可全部为空</span>
                       </el-form-item>
                     </el-col>
                     <el-col :span="5">
                       <el-form-item label="资格证号" prop="certificateCode" :rules="[{ validator: validateCode, trigger: 'blur' }]" >
                         <el-input :class="{ 'err_border': indices.some( (it)=> it == index && item.certificateCode !== '') }" v-model="item.certificateCode" maxlength="17" placeholder="请输入资格证号" @clear="handleClear(item,index)" clearable  show-word-limit />
                         <span class="err_msg" v-if="indices.some( (it)=> it == index && item.certificateCode !== '')">请输入17位数字整数</span>
                       </el-form-item>
                     </el-col>
                     <el-col :span="5">
                       <el-form-item label="领证时间">
                         <el-date-picker
                           v-model="item.certificateDate"
                           type="date"
                           placeholder="选择日期"
                           style="width: 100%"
                           value-format="yyyy-MM-dd"
                         />
                       </el-form-item>
                     </el-col>
                     <el-col :span="4" style="justify-content: center;align-items: center;display:flex">
                       <el-form-item label="资格证照片">
                         <upload-image :show-text="false" :value.sync="item.certificateUrl" :max-size="2" :limit="1"/>
                       </el-form-item>
                     </el-col>
                     <el-col :span="3" style="display: flex;align-items: center">
                       <div class="icons_type">
                         <i v-if="index + 1 === selectBookNumber && (selectBookNumber <  dict.type[DictType.certificate_type].length)" class="el-icon-circle-plus-outline icon_small icon_small_green" @click="handleAddItem(item,index)" />
                         <i v-if="index > 0" class="el-icon-delete icon_small icon_small_red" @click="handleDeleteItem(index,item)" />
                       </div>
                     </el-col>
                   </el-row>
                 </div>
               </el-form>
             </el-col>
             <el-divider class="mini-divider-table" />
             <el-col :span="24">
               <el-form-item label="其他证书" prop="year" />
             </el-col>
             <el-col :span="24">
               <el-form label-position="top">
                 <div v-for="(item, index) in otherCertificate" :key="index">
                   <el-row :gutter="20" type="flex" justify="center">
                     <el-col :span="2">
                       <el-form-item label="" />
                     </el-col>
                     <el-col :span="15">
                       <el-form-item label="证书名称">
                         <el-input v-model="item.certificateName" maxlength="30" placeholder="请输入证书名称" clearable  show-word-limit />
                         <span class="err_msg" v-if="item.status">当前行信息不可全部为空</span>
                       </el-form-item>
                     </el-col>
                     <el-col :span="4" style="display: flex;align-items: center;justify-content: center">
                       <el-form-item label="证书照片">
                         <upload-image :show-text="false" :value.sync="item.certificateUrl" :max-size="2"  :limit="1"/>
                       </el-form-item>
                     </el-col>
                     <el-col :span="3" style="display: flex;align-items: center">
                       <div class="icons_type">
                         <i v-if="index + 1 === selectOtherNumber && selectOtherNumber < 10" class="el-icon-circle-plus-outline icon_small icon_small_green" @click="handleOtherAdd(item,index)" />
                         <i v-if="index > 0" class="el-icon-delete icon_small icon_small_red" @click="handleOtherDelete(item,index)" />
                       </div>
                     </el-col>
                   </el-row>
                 </div>
               </el-form>
             </el-col>
           </el-row>
         </el-row>
         <el-divider class="mini-divider-table" />
       </div>
       </el-form>
     </div>
   </div>
   <div class="content" style="margin: 10px 0">
     <div class="footer-btns">
       <el-button type="primary" @click="handleCancel">取消</el-button>
       <el-button type="primary" :loading="loading" @click="handleSubmit()">保存</el-button>
     </div>
   </div>
 </div>
</template>
<script>
import { addTeacher, editTeacher, getKinderList, teacherDetails } from '@/api/system/teacher'
import AreaCascader from '@/components/Cascader/AreaCascader.vue'
import uploadImage from '@/components/Upload/uploadImage.vue'
import DictType from '@/utils/dict/DictType'
import regex from '@/utils/regex'
import { findAllIndices } from '@/utils/index'
import options from '@/utils/dict/options'
const initForm ={
  kindergartenId:undefined,
  userName:undefined,
  phone:undefined,
  sex:undefined,
  email:undefined,
  politicalStatus:undefined,
  inchPhotoOne:undefined,
  inchPhotoTwo:undefined,
  provinceId: null, // 所属区域，
  cityId: null,
  mainPost:undefined,
  otherPost:undefined,
  teacherEducationId:undefined,
  jobStatus:undefined,
  professionalTitleGrade:undefined,
  isBackbone:undefined,
  backboneType:undefined,
  BackboneYear:undefined,
  isDisciplineLeader:undefined,
  discipline:undefined,
  actualTeachingAge:undefined,
}
export default {
  components: { uploadImage, AreaCascader },
  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 {
      currentIndex:0,
      activities: [{
        content: '基础信息',
        anchor: 'section1'
      }, {
        content: '任职信息',
        anchor: 'section2'
      },],
      formState: Object.assign({}, initForm),
      loading:false,
      editTeacherId:this.$route.query.teacherId,
      rules:{
        kindergartenId:{ required: true, message: '请选择所属幼儿园', trigger: ['change','blur'] },
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur'},
          { pattern: regex.mobile, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        email: [
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur'
          }
        ],
        teacherEducationId:{
          pattern: /^\d{17}$/, message: '请输入17位数字整数', trigger: 'blur'
        },
        backboneStartTime: {
          validator: (voteRule, value, callback) => {
            if (this.formState.backboneStartTime && value > this.formState.backboneEndTime) {
              callback(new Error('骨干开始时间不能晚于结束时间'));
            } else {
              callback();
            }
          },
           trigger: 'blur'
        },
        backboneEndTime: {
          validator: (voteRule, value, callback) => {
            if (this.formState.backboneStartTime && value < this.formState.backboneStartTime) {
              callback(new Error('骨干结束时间不能早于开始时间'));
            } else {
              callback();
            }
          }, trigger: 'blur'}
      },
      cityId: 0,
      provinceId: 0,
      DictType,
      options,
      kindergroupOptions:[],
      majorWorkOptions:[],
      otherWorkOptions:[],
      otherCertificate: [{
        certificateName: "",
        certificateUrl: ""
      }],
      teacherCertificate: [{
        certificateType: "",
        certificateCode: "",
        certificateDate: "",
        certificateUrl: ""
      }],
      kindergartenId:this.$route.query.kindergartenId,
      indices:[],
      routerInfo:[],
    }
  },
  created() {
    this.getKindergartenList()
    if(this.editTeacherId) this.teacherDetails()
    this.routerInfo = this.$route.query.routerInfo
  },
  activated() {
    this.routerInfo = this.$route.query.routerInfo
  },
  watch:{
    // 'formState.cityId': {
    //   handler(val) {
    //     this.getKindergartenList(val)
    //     this.formState.kindergartenId = ''
    //   },
    // },
    "kindergartenId":{
      handler(val) {
        if (val) {
          this.formState.kindergartenId = val
        }
      },
      immediate: true
    },
  },
  computed:{
    selectBookNumber(){
      return this.teacherCertificate.length
    },
    selectOtherNumber(){
      return this.otherCertificate.length
    },
    handDisabled(){
      return this.editTeacherId ? true : false
    }
  },
  mounted() {
    const elScrollbar = document.querySelector('.main-container .el-scrollbar__wrap');
    elScrollbar.addEventListener('scroll', this.scrollFn )
  },
  methods:{
    /**
     * 页面滚动事件
     */
    scrollFn() {
      const  honerDistance =  document.getElementById('section2')?.getBoundingClientRect()?.top
      if(honerDistance <= 20) {
        this.currentIndex = 1
      } else {
        this.currentIndex = 0
      }
    },
    /**
     * 获取所有幼儿园列表
     */
    getKindergartenList(val) {
      // let params = {
      //   kindergartenType:
      //   kindergartenId:
      // }
      getKinderList().then(({data})=>{
        const options = data.filter((item=> item.accountStatus === '1'))
        val ? this.kindergroupOptions = options.filter(item=> item.cityId === val) : this.kindergroupOptions = options
      })
    },
    /**
     * 校验资格证书号
     * @param value
     * @param callback
     * @param rules
     */
    validateCode(){
      const pattern = /^\d{17}$/;
      const condition = (item) => !pattern.test(item.certificateCode);
      this.indices = findAllIndices( this.teacherCertificate.filter((item) => item.certificateCode !== ''), condition);
    },
    handleClear(){
      this.validateCode()
    },
    /**
     * 所在省市
     * @param str
     */
    handleSelectArea(str){
      this.getKindergartenList(this.formState.cityId)
      this.formState.kindergartenId = ''
      // str ? this.formState.cityId = str.split('/')[1] : this.formState.cityId = 0
      // this.formState.area = str
      // if(str) {
      //
      // }
    },
    /**
     * 教师资格证下拉禁用
     */
    SelectChange() {
      // eslint-disable-next-line no-return-assign
      this.dict.type[DictType.certificate_type].forEach(item => item.disabled = false)
      this.teacherCertificate.forEach(item => {
        if (item.certificateType !== '') {
          this.$set(this.dict.type[DictType.certificate_type][this.dict.type[DictType.certificate_type].findIndex(ditem => ditem.value === item.certificateType)], 'disabled', true)
        }
      })
    },
    /**
     * 编辑回显
     */
    teacherDetails(){
      teacherDetails(this.editTeacherId).then(({ data,code })=>{
        if(code === 200) {
          this.formState = data
          this.handleBook(JSON.parse(this.formState.qualifyCertificate))
        }
      })
    },
    /**
     * 添加教师资格证
     */
    handleAddItem(item,index) {
      const flag = !!item.certificateType || !!item.certificateCode || !!item.certificateDate || !!item.certificateUrl
      if(!flag){
        this.$set(item, 'status', true)
        return false
      }else {
        this.$set(item, 'status', false)
        this.teacherCertificate.push({
          certificateType:'',
          certificateCode:'',
          certificateDate:'',
          certificateUrl:''
        })
        return true
      }
    },
    /**
     * 删除教师资格证
     */
    handleDeleteItem(index, item) {
      this.teacherCertificate.filter(item=> item.certificateType)
      this.teacherCertificate.splice(index, 1)
      this.SelectChange()
    },
    /**
     * 增加其他证书
     */
    handleOtherAdd(item,index) {
      const flag = !!item.certificateName || !!item.certificateUrl
      if(!flag){
        this.$set(item, 'status', true)
        return false
      }else {
        this.$set(item, 'status', false)
        this.otherCertificate.push({
          certificateName: '',
          certificateUrl:''
        })
        return true
      }
    },

    /**
     * 删除其他证书
     */
    handleOtherDelete(item,index) {
      this.otherCertificate.filter(item=> !item.certificateType)
      this.otherCertificate.splice(index, 1)
    },

    /**
     * 处理编辑回显
     */
    handleBook(strArr){
      this.teacherCertificate = []
      this.otherCertificate =[]
      strArr.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)
        } else {
          this.otherCertificate.push(item)
        }
      })
      if(this.teacherCertificate.length === 0) {
        this.teacherCertificate.push({
          certificateType:'',
          certificateCode:'',
          certificateDate:'',
          certificateUrl:''
        })
      }
      if(this.otherCertificate.length === 0) {
        this.otherCertificate.push({
          certificateName: '',
          certificateUrl:''
        })
      }
    },
    /**
     * 保存
     */
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if( this.indices.length === 0){
            this.loading = true
            this.clearTrimRow()
            this.formState.qualifyCertificate = JSON.stringify([...this.teacherCertificate, ...this.otherCertificate])
            this.formState.kindergartenType = this.kindergroupOptions?.find(item => item.id == this.formState.kindergartenId)['kindergartenType']
            const fn = this.editTeacherId ? editTeacher : addTeacher
            this.formState.actualTeachingAge = (this.formState.actualTeachingAge === 0 || this.formState.actualTeachingAge === '' || this.formState.actualTeachingAge === undefined) ?  undefined : this.formState.actualTeachingAge
            let params = {
              ...this.formState
            }
            fn(params).then(({ data, code }) => {
              if (code === 200) {
                this.$message.success('保存成功')
                this.$tab.closeOpenPage({ path: '/information/addTeacher' })
                this.jumpFn()
              }
            }).catch((common) => {
              const { data, msg } = common
              if (msg == options.errMsg['phoneError']) {
                const h = this.$createElement
                const msg1 = '该手机号已在其他幼儿园下录入，是否继续添加为当前幼儿园教职工手机号?'
                const msg2 = '温馨提示：可通过手机号搜索所在幼儿园'
                this.$confirm( h('div', [h('p', msg1), h('p', msg2)]),'提示',{
                  confirmButtonText: '确认保存',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  params.staffInfo = data
                  fn(params).then(({ code }) => {
                    if (code === 200) {
                      this.$message.success('保存成功')
                      this.$tab.closeOpenPage({ path: '/information/addTeacher' })
                      this.jumpFn()
                    }
                  })
                })
              }
            }).finally(()=>{
              this.loading = false
            })
          }
        }
      })
    },
    clearTrimRow(){
     if(this.teacherCertificate.length > 1){
       this.teacherCertificate = this.teacherCertificate.filter(item=> !!item.certificateType || !!item.certificateCode || !!item.certificateDate || !!item.certificateUrl)
       this.teacherCertificate.forEach(item => delete item.status)
     }
      this.teacherCertificate.forEach(item => delete item.status)
     if(this.otherCertificate.length > 1){
       this.otherCertificate = this.otherCertificate.filter(item=> !!item.certificateName || !!item.certificateUrl)
       this.otherCertificate.forEach(item => delete item.status)
     }
      this.otherCertificate.forEach(item => delete item.status)
    },
    jumpFn(){
      if(this.routerInfo !== undefined  && Object.keys(this.routerInfo).length !== 0 ){
        const kindergartenName = this.routerInfo?.kindergartenName
        const kindergartenId = this.routerInfo?.kindergartenId
        const kindergartenType = this.routerInfo?.kindergartenType
        this.$router.push({ path: '/information/teacher',query: { kindergartenName,kindergartenId,kindergartenType,} })
        return false
      }
      this.$router.push({ path: '/information/teacher' })
    },
    /**
     * 取消
     */
    handleCancel() {
      this.$confirm('信息尚未保存，确认取消?', '提示', {
        confirmButtonText: '继续操作',
        cancelButtonText: '放弃保存',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$tab.closeOpenPage({ path: '/information/addTeacher' })
        this.jumpFn()
      });

    },
    /**
     * 锚点跳转
     */
    handleSteps(val, index) {
      this.currentIndex = index
      const options = {
        behavior: 'smooth',
        inline: 'nearest'
      }
      document.getElementById(val['anchor']).scrollIntoView(options)
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-timeline {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  justify-content: center;
}
::v-deep .el-timeline-item {
  flex: 1;
}
</style>
