EmploymentSite/h5app/src/views/pages/jobUserInfo/userEdit.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onBack"></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 disabled 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 class="disable" 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-select" >
              <ion-label>毕业日期<span v-show="isGraduating" class="danger">*</span></ion-label>
              <ion-datetime-button datetime="showFinishDate" style="position:absolute;left:10px;" ></ion-datetime-button>
              <ion-modal :keep-contents-mounted="true">
                <ion-datetime name="showFinishDate" id="showFinishDate" v-model="baseData.showFinishDate"
                              dataformatas="YYYY-MM-DD" presentation="month-year" cancel-text="取消" done-text="确定"
                              :show-default-buttons="true" @ionChange="finishDateChange()">
                </ion-datetime>
              </ion-modal>
            </div>
            <div style="width:100%;overflow: hidden;height: 30px;"></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>
                <!--            <ion-input name="nation" id="nation"  style="text-align: left;" class="custom"  :clear-input="true"
                                       v-model="baseData.nation" placeholder="请输入民族" ></ion-input>-->
              </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" readonly >
                  </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 disabled 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="如5.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="birthPlace" id="postalCode" style="text-align: left;" class="custom" :clear-input="true"-->
<!--                           placeholder="请输入邮政编码" v-model="baseData.postalCode"></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 class="form-input">
                <ion-label>个人技能</ion-label>
                <ion-textarea name="personalSkills" id="personalSkills" class="custom" rows="4"
                              placeholder="请输入个人技能" v-model="baseData.personalSkills"
                              style="border-bottom: 1px solid #fff2e8;"></ion-textarea>
              </div>
              <div class="form-input">
                <ion-label>
                  图片上传
                </ion-label>
                <b-image v-if="baseData.jobUserID" :file-ref-id="baseData.jobUserID" :readonly="false"
                         :is-single="false"></b-image>
              </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-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 {computed, defineComponent, reactive, ref, toRefs, watch} from "vue";
import {addCircleOutline, arrowBackOutline, trashOutline} from 'ionicons/icons';
import {useRoute, useRouter} from "vue-router";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {baseInfoSave, getJobUserById} from "@/api/jobUserInfo";
import {required} from "@vuelidate/validators";
import {useVuelidate} from "@vuelidate/core";
import {post} from "@/api/common";
import {getSysDictionaryList} from "@/api/system/dictionary";
import {getSiteDataList} from "@/api/siteInfo";
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area";
import {getEducationListByJobUserID} from "@/api/education";
import {getExperienceListByJobUserID} from "@/api/experience";
import {getJobHuntListByJobUserID} from "@/api/jobHuntInfo";
import dayjs from "dayjs";
import CategorySelection from "@/components/ocCategorySelection.vue";
import {getPosition} from "@/utils/position";
import crtyptoHelp from "@/utils/crypto"
import BImage from "@/components/bImage.vue";
import {getUrlParams} from "@/utils/urlUtils";

interface SelectProps {
  name: string,
  value: string
}
interface StepParams{
  loginUserID: string,
  statusVal: number
}
export default defineComponent({
  name: "jobUserInfoEdit",
  components: {BImage, CategorySelection},
  setup() {
    const route = useRoute();
    const router = useRouter();
    const curOpenID = ref("");
    const urlParams:{[key:string]:any} = getUrlParams();
    const isAllowCommit = ref(true);
    const expand = ref<boolean>(false);
    const loading = ref(true);
    const siteInfoList = ref<SelectProps[]>([]);
    const curStepData = ref<StepParams>({
      loginUserID:"",
      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,
        siteID:null,
        name:null,
        identityNumber: null,
        sex: 1,
        userMobile: null,
        address: null,
        jobStatusID: null,
        keyPersonTypeID: null,
        politicsStatusID:null,
        birthPlace:null,
        birthDay:dayjs().format("YYYY-MM-DD"),
        familyNatureID:null,
        cultureRank:null,
        healthID:null,
        //bloodTypeID: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,
        finishDate:"",
        showFinishDate:dayjs().format("YYYY-MM-DD"),
        profession:null,
        nativePlace:null,
        isFullTime:null,
        occupationalCategory:null,
        occupationalCategoryName:null,
        occupationalLevel:null,
        openId:"",
        isAppInsert:1,
        loginUserID: '',
        longitude: null,
        latitude: null
      }});
    const pageParams = reactive({
      pageIndex: 1,
      pageSize: 5,
      total:0,
      jobUserID:'',
      openID:''
    });
    const baseDataRule = computed(()=>{
      return {baseData:{
          siteID:{required},
          regionCode:{required},
          streetCode:{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,curStepData.value.loginUserID);
        },
      },
    ];
    // 设置要删除的教育经历
    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,curStepData.value.loginUserID);
          });
        },
      },
    ];
    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:"/jobUserInfo/userEdit", query: {reload:0,educationID:null,jobHuntID:null,jobUserID: baseInfoData.baseData.jobUserID,status:curStepData.value.statusVal,loginUserId:curStepData.value.loginUserID}});
      }else{
        router.push({path:'/jobUserInfo/index', query: {userId: route.query.loginUserId,openId: curOpenID.value}});
      }
    }

    const inputDataValidate = () =>{
      isAllowCommit.value = true;
      const identReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9Xx])$/;
      if(baseInfoData.baseData.identityNumber != null){
        if(!identReg.test(baseInfoData.baseData.identityNumber)){
          presentAlert("输入的身份证号码有误!");
          isAllowCommit.value = false;
        }else{
          // 计算身份证校验码
          const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          const checkCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
          let sum = 0;
          for(let i = 0; i<weights.length;i++){
            sum += weights[i] * parseInt(String(baseInfoData.baseData.identityNumber).substring(i,i+1));
          }
          if(String(baseInfoData.baseData.identityNumber).substring(17,18)!=checkCode[sum%11]){
            presentAlert("输入的身份证号码有误!");
            console.log("lastOne",checkCode[sum%11]);
            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){
          baseInfoData.baseData.loginUserID = curStepData.value.loginUserID;
          const userMobile = baseInfoData.baseData.userMobile;
          const identityNumber = baseInfoData.baseData.identityNumber;
          baseInfoData.baseData.isAppInsert = 1;
          baseInfoData.baseData.userMobile = crtyptoHelp.encryptDesText(userMobile);
          baseInfoData.baseData.identityNumber = crtyptoHelp.encryptDesText(identityNumber);
          baseInfoSave(baseInfoData.baseData).then(result => {
            if (result) {
              router.push({path: '/jobUserInfo/userEdit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:2,loginUserId:curStepData.value.loginUserID}});
            }
          }, () =>{
            baseInfoData.baseData.userMobile = userMobile;
            baseInfoData.baseData.identityNumber = identityNumber;
          });
        }
      }
      else if (curStepData.value.statusVal==2){
        await router.push({path: '/jobUserInfo/userEdit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:3,loginUserId:curStepData.value.loginUserID}});
      }else if (curStepData.value.statusVal==3){
        await router.push({path: '/jobUserInfo/userEdit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:4,loginUserId:curStepData.value.loginUserID}});
      }
    }

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

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

    const onFinish = () => {
      router.push('/jobUserInfo/finish');
    }

    /*下拉字典查询*/
    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 finishDateChange = function(){
      baseInfoData.baseData.finishDate = baseInfoData.baseData.showFinishDate.substring(0,7);
      console.log(baseInfoData.baseData.finishDate);
    }
    const isGraduating = ref(false);
    const keyPersonTypeChange = function (){
      isGraduating.value = false;
      if(baseInfoData.baseData.keyPersonTypeID==2){
        isGraduating.value = true;
      }
    }


    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,userId:any) => {
      loading.value = true;
      pageParams.jobUserID = jobUserID;
      pageParams.openID = curOpenID.value;
      baseInfoData.baseData.jobUserID = jobUserID;
      curStepData.value.statusVal = status;
      curStepData.value.loginUserID = userId;
      if(curStepData.value.statusVal==1){
        const reqData = await getJobUserById(jobUserID,userId,true);
        baseInfoData.baseData = reqData;
        baseInfoData.baseData.openId = curOpenID.value;

        baseInfoData.baseData.userMobile = crtyptoHelp.decryptDesText(baseInfoData.baseData.userMobile);
        baseInfoData.baseData.identityNumber = crtyptoHelp.decryptDesText(baseInfoData.baseData.identityNumber);
        if(baseInfoData.baseData.keyPersonTypeID==2){
          isGraduating.value = true;
        }
        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);
      }
      if (jobUserID == null) {
        setLongitudeLatitude()
      }
      loading.value = false;
    };

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

    watch(() => baseInfoData.baseData.identityNumber, () => {
      if(baseInfoData.baseData.identityNumber != null && String(baseInfoData.baseData.identityNumber).length == 18){
        const identReg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
        if(identReg.test(baseInfoData.baseData.identityNumber)){
          const birthDayStr = String(baseInfoData.baseData.identityNumber).substring(6,14);
          const sexStr = String(baseInfoData.baseData.identityNumber).substring(16,17);
          baseInfoData.baseData.sex = parseInt(sexStr)%2 == 0 ? 2 : 1; //双女单男
          baseInfoData.baseData.birthDay = dayjs(birthDayStr).format("YYYY-MM-DD");
        }
      }
    });

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

    // 设置经纬度
    function setLongitudeLatitude() {
      getPosition().then((data: any) => {
        console.log(data)
        if (data.longitude != null && data.latitude != null) {
          baseInfoData.baseData.longitude = data.longitude;
          baseInfoData.baseData.latitude = data.latitude;
        }
      })
    }

    onIonViewDidEnter(() => {
      curOpenID.value = urlParams["openId"];
      if (route.query.reload)
        reload(route.query.jobUserID,route.query.status,route.query.loginUserId);
    });

    return {
      ...toRefs(baseInfoData),
      arrowBackOutline,
      addCircleOutline,
      trashOutline,
      route,
      router,
      curOpenID,
      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,
      isGraduating,
      finishDateChange,
      keyPersonTypeChange,
      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#sex.md.select-disabled.legacy-select::after{display: none;}
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: 30px;
      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>