EmploymentSite/h5app/src/views/pages/jobhunt/edit.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onBack" style="padding-left:10px;width:24px;height:24px;"></ion-icon>
        </ion-buttons>
        <ion-title>求职人员信息登记</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="stepFlex">
        <div v-for="(record,key) in stepList" :key="key" class="stepFlex-item">
          <div
              :class="[(record.val < curStepData?.statusVal || curStepData?.statusVal == stepList.val) ? 'greenCircle' :record.val == curStepData?.statusVal ? 'now' : 'grayCircle']"></div>
          <div v-if="key !== stepList.length - 1"
               :class="[record.val < curStepData?.statusVal ? 'greenLine' : 'grayLine']"></div>
          <div class="stepFlex-item-label">
            <p class="stepFlex-item-label-title">{{ record.title }}</p>
            <p class="stepFlex-item-label-desc">{{ record.desc }}</p>
          </div>
        </div>
      </div>

      <form autocomplete="off">
        <div class="bw-vue-form">
          <ion-list  v-if="curStepData.statusVal==1">
            <div class="form-title">基本信息</div>
            <div class="form-input">
            <ion-label>姓名<span class="danger">*</span></ion-label>
            <ion-input name="name" id="name" class="custom" :clear-input="true"
                     placeholder="请输入姓名" v-model="baseData.name" >
            </ion-input>
<!--              <ion-note slot="error">姓名不能为空</ion-note>-->
            </div>
            <div class="form-input">
              <ion-label>公民身份号码<span class="danger">*</span></ion-label>
              <ion-input name="identityNumber" id="identityNumber"  class="custom" :clear-input="true"
                     placeholder="请输入身份证号码" v-model="baseData.identityNumber" ></ion-input>
<!--              <ion-note slot="error">公民身份号码不能为空</ion-note>-->
            </div>
            <div class="form-select">
              <ion-label>性别<span class="danger">*</span></ion-label>
              <ion-select name="sex" id="sex" okText="确定" cancelText="取消" v-model="baseData.sex"
                          interface="action-sheet"  placeholder="请选择性别" style="width:100%;text-align:left;" >
                <ion-select-option v-for=" (it,key) in genderList" :key="key"  :value="it.value" >{{ it.name }}</ion-select-option>
              </ion-select>
<!--              <ion-note slot="error">性别不能为空</ion-note>-->
            </div>
            <div class="form-input">
             <ion-label>联系电话<span class="danger">*</span></ion-label>
             <ion-input name="userMobile" id="userMobile"  style="text-align: left;" class="custom" :clear-input="true"
                       placeholder="请输入联系电话" v-model="baseData.userMobile" ></ion-input>
            <!--              <ion-note slot="error">联系电话不能为空</ion-note>-->
            </div>
            <div class="form-select">
              <ion-label>所属驿站<span class="danger">*</span></ion-label>
              <ion-select disabled name="siteID"  id="siteID" okText="确定" cancelText="取消" v-model="baseData.siteID"
                          interface="action-sheet" placeholder="请选择所属驿站"  style="width:100%;text-align:left;">
                <ion-select-option v-for=" (it,key) in siteInfoList" :key="key" :value="it.value">
                  {{ it.text }}
                </ion-select-option>
              </ion-select>
              <!--          <ion-note slot="error">所属驿站不能为空</ion-note>-->
            </div>
            <ion-label style="padding-left: 10px;">所属街道<span class="danger">*</span></ion-label>
            <div class="form-select">
              <ion-select disabled name="regionCode"  id="regionCode" okText="确定" cancelText="取消" v-model="baseData.regionCode"
                          interface="action-sheet" placeholder="请选择市/县" style="width:50%;float:left;" @ionChange="regionChange()" >
                <ion-select-option v-for=" (it,key) in regionList" :key="key" :value="it.code">
                  {{ it.name }}
                </ion-select-option>
              </ion-select>
              <ion-select interface="action-sheet" placeholder="请选择所属街道" cancel-text="取消"
                          id="streetCode" v-model="baseData.streetCode" style="width: 50%;float: left;">
                <ion-select-option v-for="(record,key) in streetList" :key="key"
                                   v-model:value="record.code">
                  {{ record.name }}
                </ion-select-option>
              </ion-select>
            </div>
<!--            <div class="form-select">-->
<!--              <ion-label>市/县<span class="danger">*</span></ion-label>-->
<!--              <ion-select disabled name="regionCode"  id="regionCode" okText="确定" cancelText="取消" v-model="baseData.regionCode"-->
<!--                          interface="action-sheet" placeholder="请选择市/县" style="width:100%;text-align:left;" @ionChange="regionChange()" >-->
<!--                <ion-select-option v-for=" (it,key) in regionList" :key="key" :value="it.code">-->
<!--                  {{ it.name }}-->
<!--                </ion-select-option>-->
<!--              </ion-select>-->
<!--            </div>-->
<!--            <div class="form-select">-->
<!--              <ion-label>所在街道<span class="danger">*</span></ion-label>-->
<!--              <ion-select name="streetCode"  id="streetCode" okText="确定" cancelText="取消" v-model="baseData.streetCode"-->
<!--                          interface="action-sheet" placeholder="请选择镇/街" style="width:100%;text-align:left;">-->
<!--                <ion-select-option v-for=" (it,key) in streetList" :key="key" :value="it.code">-->
<!--                  {{ it.name }}-->
<!--                </ion-select-option>-->
<!--              </ion-select>-->
<!--            </div>-->
            <div class="form-input">
              <ion-label>住址<span class="danger">*</span></ion-label>
              <ion-input name="address" id="address"  style="text-align: left;"  class="custom" :clear-input="true"
                     placeholder="请输入住址" v-model="baseData.address" ></ion-input>
<!--          <ion-note slot="error">地址不能为空</ion-note>-->
            </div>
            <div class="form-select">
              <ion-label>就业状态<span class="danger">*</span></ion-label>
              <ion-select name="jobStatusID"  id="jobStatusID" okText="确定" cancelText="取消" v-model="baseData.jobStatusID"
                      interface="action-sheet" placeholder="请选择就业状态"  style="width:100%;text-align:left;" >
                <ion-select-option v-for=" (it,key) in jobUserStatusList" :key="key" :value="it.value">{{ it.name }}</ion-select-option>
              </ion-select>
                <!--          <ion-note slot="error">就业状态不能为空</ion-note>-->
            </div>
            <div class="form-select">
              <ion-label>重点人员类别<span class="danger">*</span></ion-label>
              <ion-select name="keyPersonTypeID"  id="keyPersonTypeID" okText="确定" cancelText="取消" v-model="baseData.keyPersonTypeID"
                          interface="action-sheet" placeholder="请选择重点人员类别"  style="width:100%;text-align:left;" >
                <ion-select-option v-for=" (it,key) in keyPersonTypeList" :key="key" :value="it.value">
                  {{ it.name }}
                </ion-select-option>
              </ion-select>
              <!--          <ion-note slot="error">重点人员类别不能为空</ion-note>-->
            </div>

        <div class="form-title">
          其他信息
          <div style="float: right;">
            <ion-label style="color: red;font-size: 14px;" @click="expand=!expand">{{expand?"收起":"展开"}}</ion-label>
          </div>
        </div>
        <div v-if="expand">
          <div class="form-input">
            <ion-label>社会保障卡号</ion-label>
            <ion-input name="socialSecurityCard" id="socialSecurityCard"  style="text-align: left;"  class="custom" :clear-input="true"
                       placeholder="请输入社会保障卡号" v-model="baseData.socialSecurityCard" ></ion-input>
          </div>
          <div class="form-select">
          <ion-label>政治面貌</ion-label>
            <ion-select name="politicsStatusID"  id="politicsStatusID" okText="确定" cancelText="取消" v-model="baseData.politicsStatusID"
                        interface="action-sheet" placeholder="请选择政治面貌" style="width:100%;text-align:left;" >
              <ion-select-option v-for=" (it,key) in politicsStatusList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-select">
            <ion-label>民族</ion-label>
            <ion-select name="nationID"  id="nationID" okText="确定" cancelText="取消" v-model="baseData.nation"
                        interface="action-sheet" placeholder="请选择民族" style="width:100%;text-align:left;" >
              <ion-select-option v-for=" (it,key) in nationTypeList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-input">
            <ion-label>毕业院校</ion-label>
            <ion-input name="finishSchool" id="finishSchool"  style="text-align: left;"  class="custom" :clear-input="true"
                       placeholder="请输入毕业院校" v-model="baseData.finishSchool" ></ion-input>
          </div>
          <div class="form-input">
            <ion-label>专业</ion-label>
            <ion-input name="professionID" id="profession"  style="text-align: left;"  class="custom" :clear-input="true"
                       placeholder="请输入专业" v-model="baseData.profession" ></ion-input>
          </div>
          <div class="form-select">
            <ion-label>是否非全日制</ion-label>
            <ion-select name="isFullTime"  id="isFullTime" okText="确定" cancelText="取消" v-model="baseData.isFullTime"
                        interface="action-sheet" placeholder="请选择是否非全日制" style="width:100%;text-align:left;" >
              <ion-select-option v-for=" (it,key) in isFullTimeList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-input">
            <ion-label>职业资格类别</ion-label>
            <div>
              <ion-input placeholder="请选择职业资格类别" label-placement="stacked" style="float: left;width:78%;"
                         v-model="baseData.occupationalCategoryName" class="custom">
              </ion-input>
              <ion-item style="width:22%;float: right;padding:0px;margin: 0px;">
                <category-selection  :OccupationalID="baseData.occupationalCategory" @SetOccupationalID="onSetOccupationalID"></category-selection>
              </ion-item>
            </div>
<!--            <ion-select name="occupationalCategory"  id="occupationalCategory" okText="确定" cancelText="取消" v-model="baseData.occupationalCategory"-->
<!--                        interface="action-sheet" placeholder="请选择职业资格类别" style="width:100%;text-align:left;" >-->
<!--              <ion-select-option v-for=" (it,key) in occupationalCategoryList" :key="key" :value="it.value">-->
<!--                {{ it.name }}-->
<!--              </ion-select-option>-->
<!--            </ion-select>-->
          </div>
          <div class="form-select">
            <ion-label>职业资格等级</ion-label>
            <ion-select name="occupationalLevel"  id="occupationalLevel" okText="确定" cancelText="取消" v-model="baseData.occupationalLevel"
                        interface="action-sheet" placeholder="请选择职业资格类别" style="width:100%;text-align:left;" >
              <ion-select-option v-for=" (it,key) in occupationalLevelList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-input">
            <ion-label>籍贯</ion-label>
            <ion-input name="nativePlace" id="nativePlace"  style="text-align: left;" class="custom" :clear-input="true"
                       v-model="baseData.nativePlace" placeholder="请输入籍贯" ></ion-input>
          </div>
<!--          <div class="form-input">-->
<!--          <ion-label>出生地</ion-label>-->
<!--            <ion-input name="birthPlace" id="birthPlace"  style="text-align: left;" class="custom" :clear-input="true"-->
<!--                       v-model="baseData.birthPlace" placeholder="请输入出生地" ></ion-input>-->
<!--          </div>-->
          <div class="form-select" >
            <ion-label>出生日期</ion-label>
            <ion-datetime-button datetime="birthDay" style="position:absolute;left:10px;"></ion-datetime-button>
            <ion-modal :keep-contents-mounted="true">
              <ion-datetime name="birthDay" id="birthDay" placeholder="日期"
                            v-model="baseData.birthDay"  :prefer-wheel="true"
                            dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                            :show-default-buttons="true">
              </ion-datetime>
            </ion-modal>
          </div>
          <div style="width:100%;overflow: hidden;height: 30px;"></div>
          <div class="form-select">
            <ion-label>户口性质</ion-label>
            <ion-select name="familyNatureID"  id="familyNatureID" okText="确定" cancelText="取消" v-model="baseData.familyNatureID"
                        interface="action-sheet" placeholder="请选择户口性质" style="width:100%;text-align:left;">
              <ion-select-option v-for=" (it,key) in familyNatureList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-select">
          <ion-label>最高学历</ion-label>
            <ion-select name="cultureRank"  id="cultureRank" okText="确定" cancelText="取消" v-model="baseData.cultureRank"
                        interface="action-sheet" placeholder="请选择最高学历" style="width:100%;text-align:left;">
              <ion-select-option v-for=" (it,key) in cultureRankList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-select">
            <ion-label>健康状况</ion-label>
            <ion-select name="healthID"  id="healthID" okText="确定" cancelText="取消" v-model="baseData.healthID"
                        interface="action-sheet" placeholder="请选择健康状况" style="width:100%;text-align:left;">
              <ion-select-option v-for=" (it,key) in userHealthList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-select">
            <ion-label>血型</ion-label>
            <ion-select name="bloodTypeID"  id="bloodTypeID" okText="确定" cancelText="取消" v-model="baseData.bloodTypeID"
                        interface="action-sheet" placeholder="请选择血型" style="width:100%;text-align:left;">
              <ion-select-option v-for=" (it,key) in bloodTypeList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-input">
            <ion-label>身高(cm)</ion-label>
            <ion-input name="height" id="height"  style="text-align: left;"  class="custom" :clear-input="true"
                       placeholder="请输入身高" v-model="baseData.height" ></ion-input>
          </div>
          <div class="form-input">
            <ion-label>视力</ion-label>
            <ion-input name="vision" id="vision"  style="text-align: left;" class="custom" :clear-input="true"
                       placeholder="如1.0" v-model="baseData.vision" ></ion-input>
          </div>
          <div class="form-input">
            <ion-label>体重(kg)</ion-label>
            <ion-input name="weight" id="weight"  style="text-align: left;" class="custom" :clear-input="true"
                       placeholder="请输入体重" v-model="baseData.weight" ></ion-input>
          </div>
          <div class="form-select">
            <ion-label>婚姻状况</ion-label>
            <ion-select name="maritalStatusID"  id="maritalStatusID" okText="确定" cancelText="取消" v-model="baseData.maritalStatusID"
                        interface="action-sheet" placeholder="请选择婚姻状况" style="width:100%;text-align:left;">
              <ion-select-option v-for=" (it,key) in maritalStatusList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
<!--      <div class="form-select">
            <ion-label>省份</ion-label>
            <ion-select name="provinceCode"  id="provinceCode" okText="确定" cancelText="取消" v-model="baseData.provinceCode"
                        interface="action-sheet" placeholder="请选择省份" style="width:100%;text-align:left;" @change="provinceChange()" >
              <ion-select-option v-for=" (it,key) in provinceList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>-->

          <div class="form-input">
            <ion-label>联系人员</ion-label>
            <ion-input name="userName" id="userName"  style="text-align: left;" class="custom" :clear-input="true"
                       placeholder="请输入联系人员" v-model="baseData.userName" ></ion-input>
          </div>
          <div class="form-input">
            <ion-label>电子邮箱</ion-label>
            <ion-input name="email" id="email"  style="text-align: left;" class="custom" :clear-input="true"
                       placeholder="请输入电子邮箱" v-model="baseData.email" ></ion-input>
          </div>
          <div class="form-input">
            <ion-label>家庭住址</ion-label>
            <ion-textarea name="familyAddress" id="familyAddress"  class="custom" rows="4"
                          placeholder="请输入家庭住址" v-model="baseData.familyAddress" style="border-bottom: 1px solid #fff2e8;"></ion-textarea>
          </div>
          <div class="form-input">
            <ion-label>兴趣爱好</ion-label>
            <ion-textarea name="hobby" id="hobby"  class="custom" rows="4"
                          placeholder="请输入兴趣爱好" v-model="baseData.hobby" style="border-bottom: 1px solid #fff2e8;" ></ion-textarea>
          </div>
        </div>
      </ion-list>

          <ion-list  v-if="curStepData.statusVal==2" >
            <div class="form-title">
              教育经历
              <ion-icon :icon="addCircleOutline"  class="iconBtn" style="float:right;"
                        @click="onPathForward('./educationEdit',null,null,null,2)"></ion-icon>
            </div>
            <div class="bw-vue-list">
              <div class="list-content" v-if="!loading">
                <ion-list>
                  <div v-for="(record,key) in educationList" :key="key" >
                    <ion-item-sliding>
                      <ion-item detail @click="onPathForward('./educationEdit',record.educationID,null,null,2)">
                        <ion-label>
                          <h2>{{record.schoolName}}</h2>
                          <p>{{dayjs(record.schoolTime).format("YYYY-MM-DD")}}至{{dayjs(record.overTime).format("YYYY-MM-DD")}}</p>
                        </ion-label>
                      </ion-item>
                      <ion-item-options>
                        <ion-item-option color="danger" @click="setDelAlertOpen(true, record.educationID)">
                          <ion-icon :icon="trashOutline"></ion-icon>
                        </ion-item-option>
                      </ion-item-options>
                    </ion-item-sliding>
                  </div>
                </ion-list>
              </div>
            </div>
            <b-empty v-if="educationList.length==0"  :loading="loading" />
          </ion-list>

          <ion-list  v-if="curStepData.statusVal==3" >
            <div class="form-title">
              工作经验
              <ion-icon :icon="addCircleOutline"  class="iconBtn" style="float:right;"
                        @click="onPathForward('./experienceEdit',null,null,null,3)"></ion-icon>
            </div>
            <div class="bw-vue-list">
              <div class="list-content" v-if="!loading">
                <ion-list>
                  <div v-for="(record,key) in experienceList" :key="key">
                    <ion-item-sliding>
                      <ion-item detail @click="onPathForward('./experienceEdit',null,record.experienceID,null,3)">
                        <ion-label>
                          <h2>{{record.workAddress}}</h2>
                          <p>{{dayjs(record.startTime).format("YYYY-MM-DD")}}至{{dayjs(record.endTime).format("YYYY-MM-DD")}}</p>
                        </ion-label>
                      </ion-item>
                      <ion-item-options>
                        <ion-item-option color="danger" @click="setDelAlertOpen(true, record.experienceID)">
                          <ion-icon :icon="trashOutline"></ion-icon>
                        </ion-item-option>
                      </ion-item-options>
                    </ion-item-sliding>
                  </div>
                </ion-list>
              </div>
            </div>
            <b-empty v-if="experienceList.length==0"  :loading="loading" />
          </ion-list>

          <ion-list  v-if="curStepData.statusVal==4">
            <div class="form-title">
              求职意向
              <ion-icon :icon="addCircleOutline"  class="iconBtn" style="float:right;"
                        @click="onPathForward('./jobHuntEdit',null,null,null,4)"></ion-icon>
            </div>
            <div class="bw-vue-list">
              <div class="list-content" v-if="!loading">
                <ion-list>
                  <div v-for="(record,key) in jobHuntList" :key="key">
                    <ion-item-sliding>
                      <ion-item detail @click="onPathForward('./jobHuntEdit',null,null,record.jobHuntID,4)">
                        <ion-label>
                          <h2>{{record.professionName}}</h2>
                          <p>期望薪资：{{record.minSalary}}-{{record.maxSalary}}</p>
                        </ion-label>
                      </ion-item>
                      <ion-item-options>
                        <ion-item-option color="danger" @click="setDelAlertOpen(true, record.jobHuntID)">
                          <ion-icon :icon="trashOutline"></ion-icon>
                        </ion-item-option>
                      </ion-item-options>
                    </ion-item-sliding>
                  </div>
                </ion-list>
              </div>
            </div>
            <b-empty  v-if="jobHuntList.length==0"  :loading="loading" />
          </ion-list>
        <!--<ion-refresher pulling-text="下拉刷新" @ionRefresh="onRefresh"></ion-refresher>-->
        <ion-infinite-scroll v-if="curStepData.statusVal!=1" threshold="100px" @ionInfinite="onScroll($event)">
          <ion-infinite-scroll-content
              :loadingText="pageParams.total>pageParams.pageIndex*pageParams.pageSize?'正在加载...':'暂无更多'"
              loadingSpinner="bubbles">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
        </div>
      </form>
    </ion-content>
    <ion-footer>
      <ion-toolbar>
          <ion-button style="width: 100%;" @click="onSave" v-if="curStepData.statusVal==1">保存并下一步</ion-button>
        <div v-if="curStepData.statusVal!=1" >
          <ion-button style="width: 48%;float:left;margin-left: 1%;" @click="onBack" >上一步</ion-button>
          <ion-button style="width: 48%;margin-right: 1%;" @click="onSave"   v-if="curStepData.statusVal!=4">下一步</ion-button>
          <ion-button style="width: 48%;margin-right: 1%;" @click="onFinish" v-if="curStepData.statusVal==4">完  成</ion-button>
        </div>

      </ion-toolbar>
    </ion-footer>

    <ion-alert
        :is-open="delAlertOpen"
        header="删除确认"
        message="确定要删除该信息吗？"
        :buttons="delAlertButtons"
        @didDismiss="setDelAlertOpen(false, null)"
    ></ion-alert>

    <ion-alert
        :is-open="infoAlertOpen"
        :header="infoAlterData.title"
        :message="infoAlterData.message"
        :buttons="infoAlertButtons"
        @didDismiss="setInfoAlertOpen(false)"
    ></ion-alert>
    <ion-loading
        :is-open="delLoading"
        message="删除中..."
        @didDismiss="setDelLoadingOpen(false)" >
    </ion-loading>
  </ion-page>
</template>
<script lang="ts">
import {arrowBackOutline,addCircleOutline,trashOutline} from 'ionicons/icons';
import {reactive,defineComponent, computed,watch,ref,toRefs} from "vue";
import {post} from "@/api/common";
import {useRoute, useRouter} from "vue-router";
import {required} from "@vuelidate/validators";
import {useVuelidate} from "@vuelidate/core";
import {getRegionCodeList,getStreetCodeList} from "@/api/system/area";
import {getJobUserById,baseInfoSave} from "@/api/jobUserInfo";
import {getEducationListByJobUserID} from "@/api/education";
import {getExperienceListByJobUserID} from "@/api/experience";
import {getJobHuntListByJobUserID} from "@/api/jobHuntInfo";
import {getSiteDataList} from "@/api/siteInfo";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import dayjs from "dayjs";
import {useUserStore} from "@/store/modules/user";
import CategorySelection from "@/components/ocCategorySelection.vue";

interface SelectProps {
  name: string,
  value: string
}
interface StepParams{
  name: string,
  statusVal: number
}
export default defineComponent({
  name: 'jobUserEdit',
  components:{CategorySelection},
  setup() {
    const router = useRouter();
    const route = useRoute();
    const isAllowCommit = ref(true);
    const expand = ref<boolean>(false);
    const loading = ref(true);
    const siteInfoList = ref<SelectProps[]>([]);
    const curStepData = ref<StepParams>({
      name:"",
      statusVal: 1
    });
    const stepList = ref([
        {title: '基础信息', desc: '个人基础信息', val: 1},
        {title: '教育经历', desc: '完善教育经历',val: 2},
        {title: '工作经验', desc: '完善工作经验', val: 3},
        {title: '求职意向', desc: '个人求职意向', val: 4},
    ]);
    const genderList = ref<SelectProps[]>([]);
    const jobUserStatusList = ref<SelectProps[]>([]);
    const keyPersonTypeList = ref<SelectProps[]>([]);
    const cultureRankList = ref<SelectProps[]>([]);
    const userHealthList = ref<SelectProps[]>([]);
    const bloodTypeList  = ref<SelectProps[]>([]);
    const maritalStatusList  = ref<SelectProps[]>([]);
    const provinceList  = ref<SelectProps[]>([{name:'广东省',value:'440000000000000'}]);
    const nationTypeList  = ref<SelectProps[]>([]);
    const isFullTimeList  = ref<SelectProps[]>([]);
    //const occupationalCategoryList  = ref<SelectProps[]>([]);
    const occupationalLevelList  = ref<SelectProps[]>([]);
    const familyNatureList = ref([]);
    const politicsStatusList = ref([]);
    const regionList  = ref<SelectProps[]>([]);
    const streetList  = ref<SelectProps[]>([]);
    const educationList = ref([]);
    const experienceList = ref([]);
    const jobHuntList = ref([]);
    const baseInfoData = reactive({
      baseData:{
        jobUserID:null,
        loginUserID:'',
        siteID:null,
        name:null,
        identityNumber: null,
        sex: null,
        userMobile: null,
        address: null,
        jobStatusID: null,
        keyPersonTypeID: null,
        politicsStatusID:null,
        birthPlace:null,
        birthDay:null,
        familyNatureID:null,
        cultureRank:null,
        healthID:null,
        boolTypeID:null,
        height:null,
        vision:null,
        weight:null,
        maritalStatusID:null,
        provinceCode:null,
        regionCode:null,
        streetCode:null,
        userName:null,
        familyAddress:null,
        postalCode:null,
        email:'',
        hobby:null,
        personalSkills:null,
        socialSecurityCard:"",
        finishSchool:null,
        profession:null,
        nativePlace:null,
        isFullTime:null,
        occupationalCategory:null,
        occupationalCategoryName:null,
        occupationalLevel:null
      }});
    const pageParams = reactive({
      pageIndex: 1,
      pageSize: 5,
      total:0,
      jobUserID:''
    });
    const baseDataRule = computed(()=>{
      return {baseData:{
          siteID:{required},
          name:{required},
          identityNumber:{required},
          sex:{required},
          userMobile:{required},
          address:{required},
          jobStatusID:{required},
          keyPersonTypeID:{required},
        }}
    });
    const baseDataValid = useVuelidate(baseDataRule,baseInfoData);

    // 删除警告弹窗开关
    const delAlertOpen = ref(false);

    // 删除数据
    const delID = ref("");
    const postUrl = ref("jobUserService/education/deleteEducation");
    const actionName = ref("删除教育经历信息");
    // 删除加载
    const delLoading = ref(false);
    // 信息弹窗开关
    const infoAlertOpen = ref(false);
    // 删除警告弹窗按钮定义
    const infoAlertButtons = [
      {
        text: '确定',
        role: 'confirm',
        handler: () => {
          reload(baseInfoData.baseData.jobUserID,curStepData.value.statusVal);
        },
      },
    ];
    // 设置要删除的教育经历
    function setDelAlertOpen(value: boolean, id: any) {
      delAlertOpen.value = value;
      if(id != null) {
        delID.value = id;
      }
    }
    // 设置信息提示弹窗开关
    function setInfoAlertOpen(value: boolean) {
      infoAlertOpen.value = value;
    }
    // 设置删除弹窗开启关闭
    function setDelLoadingOpen(value: boolean) {
      delLoading.value = value;
    }
    // 信息弹窗内容
    const infoAlterData = reactive({
      title:"",
      message:""
    });

    // 删除警告弹窗按钮定义
    const delAlertButtons = [
      {
        text: '取消',
        role: 'cancel',
        handler: () => {
           console.log("取消了删除");
        },
      },
      {
        text: '确定',
        role: 'confirm',
        handler: () => {
          delLoading.value = true;
          postUrl.value = "jobUserService/education/deleteEducation";
          actionName.value = "删除教育经历";
          if(curStepData.value.statusVal!=2){
            postUrl.value = curStepData.value.statusVal==3 ?"jobUserService/experience/deleteExperience":"jobUserService/jobHunt/delete";
            actionName.value = curStepData.value.statusVal==3 ?"删除工作经验":"删除求职意向";
          }
          post(postUrl.value,[delID.value],actionName.value).then((res) => {
            /*infoAlterData.title = "提示";
            infoAlterData.message = "删除成功";
            setInfoAlertOpen(true);*/
          }).finally(()=>{
            delLoading.value = false;
            reload(baseInfoData.baseData.jobUserID,curStepData.value.statusVal);
          });
        },
      },
    ];
    const presentAlert = async (message: string) => {
      const alert = await alertController.create({
        header: '错误！',
        message: message,
        buttons: [
          '确定'
        ],
      });

      await alert.present();
    }

    const onBack = () => {
      curStepData.value.statusVal-=1;
      if(curStepData.value.statusVal > 0){
        router.push({path:"./edit", query: {reload:0,educationID:null,jobHuntID:null,jobUserID: baseInfoData.baseData.jobUserID,status:curStepData.value.statusVal}});
      }else{
        router.push("./list");
      }
    }

    const inputDataValidate = () =>{
      isAllowCommit.value = true;
      const identReg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
      if(baseInfoData.baseData.identityNumber != null){
        if(!identReg.test(baseInfoData.baseData.identityNumber)){
          presentAlert("输入的身份证号码有误!");
          isAllowCommit.value = false;
        }
      }
      const mobileReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      if(baseInfoData.baseData.userMobile != null){
        if(!mobileReg.test(baseInfoData.baseData.userMobile)){
          presentAlert("输入的联系电话有误!");
          isAllowCommit.value = false;
        }
      }
      const emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      if(baseInfoData.baseData.email!=""&&baseInfoData.baseData.email!=null){
        if(!emailReg.test(baseInfoData.baseData.email)){
          presentAlert("输入的电子邮箱有误!");
          isAllowCommit.value = false;
        }
      }
    };

    const onSetOccupationalID = (data: any)=>{
      baseInfoData.baseData.occupationalCategory = data.value;
      baseInfoData.baseData.occupationalCategoryName = data.text;
    }

    const onSave = async function (){
      if (curStepData.value.statusVal==1){
        const isFormCorrect = await baseDataValid.value.$validate();
        if(!isFormCorrect){
          await presentAlert("请填写完整的信息！");
          return null;
        }
        inputDataValidate();
        if(isAllowCommit.value){
          console.log("当前数据",baseInfoData.baseData);
          baseInfoSave(baseInfoData.baseData).then(result => {
            if (result) {
              router.push({path: './edit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:2}});
            }
          });
        }
      }
      else if (curStepData.value.statusVal==2){
         await router.push({path: './edit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:3}});
      }else if (curStepData.value.statusVal==3){
        await router.push({path: './edit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:4}});
      }
    }

    const onPathForward = (pathValue:string,educationIDValue:any,experienceIDValue:any,jobHuntIDValue:any,statusValue:any)=>{
      console.log("userid",baseInfoData.baseData.jobUserID);
      router.push({path: pathValue, query: {reload:1,educationID:educationIDValue,experienceID:experienceIDValue,jobHuntID:jobHuntIDValue,jobUserID: baseInfoData.baseData.jobUserID,status:statusValue}});
    }

    const onScroll = (e: any) => {
        setTimeout(() => {
          e.target.complete();
          if (pageParams.total > pageParams.pageIndex * pageParams.pageSize) {
            pageParams.pageSize += 5;
            loadData(pageParams.jobUserID,curStepData.value.statusVal);
          }
        }, 500);
    }

    const onFinish = () => {
      router.push("./list");
    }

    /*下拉字典查询*/
    const getSelectorDataList = async function(){
      const genderResult :any = await getSysDictionaryList("Gender");
      genderList.value = genderResult;
      const jobUserStatusResult :any = await getSysDictionaryList("JobStatus");
      jobUserStatusList.value = jobUserStatusResult;
      const keyPersonTypeResult :any = await getSysDictionaryList("KeyPersonType");
      keyPersonTypeList.value = keyPersonTypeResult;
      const cultureRankResult :any = await getSysDictionaryList("HighestDegree");
      cultureRankList.value = cultureRankResult;
      const userHealthResult :any = await getSysDictionaryList("Health");
      userHealthList.value = userHealthResult;
      const bloodTypeResult :any = await getSysDictionaryList("BloodType");
      bloodTypeList.value = bloodTypeResult;
      const maritalStatusResult :any = await getSysDictionaryList("MaritalStatus");
      maritalStatusList.value = maritalStatusResult;
      const politicsStatusResult :any = await getSysDictionaryList("PoliticsStatus");
      politicsStatusList.value = politicsStatusResult;
      const familyNatureResult :any = await getSysDictionaryList("FamilyNature");
      familyNatureList.value = familyNatureResult;
      const nationTypeListResult :any = await getSysDictionaryList("NationType");
      nationTypeList.value = nationTypeListResult;
      const isFullTimeListResult :any = await getSysDictionaryList("IsFullTime");
      isFullTimeList.value = isFullTimeListResult;
      //const occupationalCategoryListResult :any = await getSysDictionaryList("OccupationalCategory");
      //occupationalCategoryList.value = occupationalCategoryListResult;
      const occupationalLevelListResult :any = await getSysDictionaryList("OccupationalLevel");
      occupationalLevelList.value = occupationalLevelListResult;
    }

    const getSiteInfoList = async function(){
      const siteInfoResult :any = await getSiteDataList();
      siteInfoList.value = siteInfoResult;
    }
    const getRegionList = async function(){
      const regionResult: any = await getRegionCodeList();
      regionList.value = regionResult;
    }
    const getStreetList = async function(){
      if (baseInfoData.baseData.regionCode != null){
        const streetResult: any = await getStreetCodeList(baseInfoData.baseData.regionCode);
        streetList.value = streetResult;
      }
    }
    const regionChange = async function(){
      baseInfoData.baseData.streetCode = null;
      await getStreetList();
    }
    const provinceChange = async function(){
      baseInfoData.baseData.regionCode = null;
      await getRegionList();
      await regionChange();
    }

    const loadData = async (jobUserID: any,status:any) => {
      loading.value = true;
      pageParams.jobUserID = jobUserID;
      baseInfoData.baseData.jobUserID = jobUserID;
      curStepData.value.statusVal = status;
      const loginUserInfo = useUserStore().getUserInfo;
      const curUserID = loginUserInfo.userID == undefined?"":loginUserInfo.userID;
      //console.log("当前jobUserID",jobUserID);
      if(curStepData.value.statusVal==1){
        const reqData = await getJobUserById(jobUserID,curUserID);
        baseInfoData.baseData = reqData;
        baseInfoData.baseData.loginUserID = curUserID;
        //console.log('baseData',baseInfoData.baseData);
        await getStreetList();
      }
      else if(curStepData.value.statusVal==2){
        const reqData :any = await getEducationListByJobUserID(pageParams);
        educationList.value = reqData.list;
        pageParams.total = reqData.total;
        //console.log("educationList",educationList.value);
      }
      else if(curStepData.value.statusVal==3){
        const reqData = await getExperienceListByJobUserID(pageParams);
        experienceList.value= reqData.list;
        pageParams.total = reqData.total;
        //console.log("experienceList",experienceList.value);
      }
      else if(curStepData.value.statusVal==4){
        const reqData = await getJobHuntListByJobUserID(pageParams);
        jobHuntList.value= reqData.list;
        pageParams.total = reqData.total;
        //console.log("jobHuntList",jobHuntList.value);
      }
      loading.value = false;
    };

    watch(() => route.query, () => {
      if (route.query.reload) {
        loadData(route.query.jobUserID,route.query.status);
      }
    });

    const reload = (jobUserID:any,status:any) => {
      pageParams.pageIndex = 1;
      expand.value = false;
      loadData(jobUserID,status);
    }

    onIonViewDidEnter(() => {
      if (route.query.reload)
        reload(route.query.jobUserID,route.query.status);
    });

    return {
      ...toRefs(baseInfoData),
      arrowBackOutline,
      addCircleOutline,
      trashOutline,
      route,
      router,
      expand,
      loading,
      stepList,
      curStepData,
      baseDataValid,
      siteInfoList,
      genderList,
      nationTypeList,
      isFullTimeList,
      //occupationalCategoryList,
      occupationalLevelList,
      familyNatureList,
      politicsStatusList,
      pageParams,
      jobUserStatusList,
      keyPersonTypeList,
      cultureRankList,
      userHealthList,
      bloodTypeList,
      maritalStatusList,
      provinceList,
      regionList,
      streetList,
      educationList,
      experienceList,
      jobHuntList,
      delID,
      delAlertButtons,
      infoAlertButtons,
      delAlertOpen,
      infoAlertOpen,
      delLoading,
      infoAlterData,
      provinceChange,
      regionChange,
      onSetOccupationalID,
      onSave,
      onBack,
      onFinish,
      onScroll,
      onPathForward,
      loadData,
      reload,
      setDelAlertOpen,
      setInfoAlertOpen,
      setDelLoadingOpen,
      getSiteInfoList,
      getSelectorDataList,
      getRegionList,
      getStreetList,
      dayjs
    }
  },
  mounted(){
    this.getSiteInfoList();
    this.getSelectorDataList();
    this.getRegionList();
    this.getStreetList();
  }
});
</script>
<style lang="less">
ion-select#siteID.md.select-disabled.legacy-select::after{display: none;}
ion-select#regionCode.md.select-disabled.legacy-select::after{display: none;}
.custom{
  --placeholder-color: gray;
  --placeholder-opacity: 0.5;
}

.title-item{
  margin-left: 15px;
  color:#1c3d70 !important;
  font-size: 14px !important;
  font-weight: bold;
}

.next-btn {
  width: 80px;
  border-radius: 5px;
  background-color:#3a7be0;
  color: #363432;
  font-size: 14px;
}

.iconBtn{
  width:24px;
  height:24px;
}

.stepFlex {
  margin: 0;
  display: flex;
  width: 100%;

  .stepFlex-item {
    position: relative;
    flex: 1;
    text-align: center;
    margin-top: -10px;

    .stepFlex-item-label {
      padding-top: 60px;
      font-size: 14px;

      .stepFlex-item-label-title{
        margin-top:30px;
      }

      .stepFlex-item-label-desc{
        margin-top:5px;color: #b9b9bd;
      }
    }
  }

  .greenCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #31A2FE;
  }

  .now {
    top: calc(50% - 18px);
    left: calc(50% - 8px);
    position: absolute;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #31A2FE;
    border: 4px solid #c5e8f9;
  }

  .grayCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
  }

  .greenLine {
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    height: 2px;
    background-color: #31A2FE;
    position: absolute;
  }

  .grayLine {
    height: 0;
    border: 1px dashed #ccc;
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    position: absolute;
  }
}

</style>