<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :backUrl="backUrl">
			<block slot="backText">返回</block>
			<block slot="content">从业人员注册</block>
		</cu-custom>
    <view class="top-fixed">
      <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :disabled="isFirst && index > 0" :class="index === TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
            {{tabNav[index]}}
          </view>
        </view>
      </scroll-view>
      <view class="line"></view>
    </view>

    <block v-if="TabCur==0">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <Account ref="account" :formData="form" @confirm="goToNext($event,1)"></Account>
      </scroll-view>
    </block>

    <block v-if="TabCur==1">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <base-info ref="baseInfo" :formData="form" @confirm="goToNext($event,2)"></base-info>
      </scroll-view>
    </block>

    <block v-if="TabCur==2">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <Certificate ref="certificate" :formData="form" :fileData="fileData" @confirm="goToNext($event,3)"></Certificate>
      </scroll-view>
    </block>

    <block v-if="TabCur==3">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <apply ref="apply" :formData="form" :buttonloading="buttonloading" @confirm="submitRegister($event)"></apply>
      </scroll-view>
    </block>
	</view>
</template>

<script>
  import {
    basePath, validateIdCard, validateMobile
  } from '../../../common/tool.js';
  import Account from "./account.vue"
  import BaseInfo from "./baseInfo.vue"
  import Certificate from "./certificate.vue"
  import Apply from "./apply.vue"
  export default {
    components: {
      Account, BaseInfo, Certificate, Apply
    },
		data() {
			return {
        backUrl: 'returnLogin',
        isFirst: true,
        noClick: true,
        buttonloading: false,
        sTop:0,
        totalHeight:0,
        TabCur: 0,
        scrollLeft: 0,
        tabNav: ['注册信息', '基础信息', '资格证照', '入职申请'],
        fileData: {
          // 身份证正面
          idCardFront: [],
          // 身份证正面
          idCardBack: [],
          // 驾驶证
          driverLicense: [],
          // 道路运输从业人员从业资格证
          qualificationCertificate: [],
        },
        form: {
          USER_ID: '',
          // 姓名
          NAME: '',
          // 身份证号
          USER_ID_CARD: '',
          // 手机号码
          PHONE: '',
          // 生日
          DATE_OF_BIRTH: '',
          // 性别
          SEX: '',
          SEXNAME: '',

          //人员类型
          PERSONNEL_TYPE: '',
          PERSONNEL_TYPENAME: '',
          // 政治面貌
          POLITICAL_OUTLOOK: '',
          POLITICAL_OUTLOOKNAME: '',
          //文化程度
          DEGREE_OF_EDUCATION: '',
          DEGREE_OF_EDUCATIONNAME: '',
          //参加工作日期
          WORKING_DATE: '',
          // 身份证照片
          ID_CARD_FRONT: '',
          ID_CARD_BACK: '',
          // 身份证有效期
          ID_CARD_VALIDITY_START: '',
          ID_CARD_VALIDITY_END: '',
          // 身份证住址
          ID_CARD_ADDRESS: '',
          // 身份证签发机关
          ID_CARD_ORGAN: '',
          // 民族
          NATION: '',
          NATIONNAME: '',

          // 驾驶证照片
          DRIVER_LICENSE: '',
          // 驾驶证号
          DRIVER_LICENSE_NO: '',
          // 准驾车型
          DRIVING_MODEL: [],
          // 国籍
          DRIVING_NATIONALITY: '',
          // 初次领证日期
          DRIVER_LICENSE_ISSUE_DATE: '',
          // 驾驶证有效期（起始）
          DRIVER_LICENSE_VALIDITY_START: '',
          // 驾驶证有效期（截止）
          DRIVER_LICENSE_VALIDITY_END: '',
          // 驾驶证签发机关
          DRIVER_LICENSE_ORGAN: '',

          // 道路运输从业人员从业资格证照片
          QUALIFICATION_CERTIFICATE: '',
          // 道路运输从业人员从业资格证号
          QUALIFICATION_CERTIFICATE_NO: '',
          // 从业资格类别
          QUALIFICATION_CERTIFICATE_CATEGORY: [],
          // 道路运输从业人员从业资格证号
          QUALIFICATION_CERTIFICATE_NATIONALITY: '',
          // 初次领证日期
          QUALIFICATION_CERTIFICATE_ISSUE_DATE: '',
          // 从业资格证有效期（起始）
          QUALIFICATION_CERTIFICATE_VALIDITY_START: '',
          // 从业资格证有效期（截止）
          QUALIFICATION_CERTIFICATE_VALIDITY_END: '',
          // 道路运输从业人员从业资格证签发机关
          QUALIFICATION_CERTIFICATE_ORGAN: '',

          //申请入职企业
          APPLY_CORP: '',

          ROLE_ID: '',
          CARDNO: '',
          DEPARTMENT_ID: '',
          POST_ID: '',
          USERNAME: '',
          SORT: '',
          EMAIL: '',
          SHIFTDUTYONE: '',
          SHIFTDUTYTWO: '',
          periodStr: '',
          BZ: '',
          IS_SAFETY: 0,
          ISHEAD: '0',
          ISLEADER: '0',
          ISSTUDENT: 'true',
          DUTIES: '',
          TITLE: '',
          TYPE_OF_WORK: '',
          INCUMBENCY: '',
          faceFile: [],
          userCerFile: [],

          //入职日期
          ENTRY_DATE: '',
        }
			}
		},
    onReady() {
      let that=this;
      let CustomBar = this.CustomBar;
      uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
        success(res) { //成功回调函数
          let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
          titleH.boundingClientRect(data=>{
            that._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
            that.totalHeight = data.height+CustomBar
          }).exec()
        }
      })
    },
		methods: {
      tabSelect(e) {
        if (this.isFirst) {
          uni.showToast({
            icon: 'none',
            title: '请先完成注册信息填写，然后点击下一步',
            duration: 2000
          });
          return false;
        } else {
          this.TabCur = e.currentTarget.dataset.id;
          this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
        }
      },
			//跳转事件
			goToNext(e, tabCur) {
        this.TabCur = tabCur
        this.isFirst = false
			},
      submitRegister() {
        if (this.validateData()) {
          uni.showLoading({
            title:"数据提交中..."
          });//加载中动画
          var _this = this

          const formData={}
          Object.keys(this.form).map(key => {
            formData[key]=this.form[key]
          })
          // 准驾车型
          formData.DRIVING_MODEL = formData.DRIVING_MODEL.join(",")
          // 从业资格类别
          formData.QUALIFICATION_CERTIFICATE_CATEGORY = formData.QUALIFICATION_CERTIFICATE_CATEGORY.join(",")

          var files = [];
          var img = {}
          img.name = 'file0'
          img.uri = this.fileData.idCardFront[0].filePath
          files.push(img)
          img = {}
          img.name = 'file1'
          img.uri = this.fileData.idCardBack[0].filePath
          files.push(img)
          img = {}
          img.name = 'file2'
          img.uri = this.fileData.driverLicense[0].filePath
          files.push(img)
          img = {}
          img.name = 'file3'
          img.uri = this.fileData.qualificationCertificate[0].filePath
          files.push(img)

          console.log(formData)
          uni.uploadFile({
            url: basePath+'app/user/setPractitionerRegister',
            files: files,
            formData:formData,
            success: (res) => {
              this.buttonloading = false
              uni.hideLoading();//结束加载中动画
              uni.showToast({
                icon:'none',
                title: '注册成功',
                duration: 2000
              });

              uni.navigateTo({
                url: '/pages/login/home',
              });
            },
            fail: (err) => {
              this.buttonloading = false
              uni.hideLoading();
              uni.showModal({
                content: err.errMsg,
                showCancel: false
              });
            }
          })
        }
      },
      validateData() {
        // 姓名
        if (!this.form.NAME) {
          uni.showToast({
            icon: 'none',
            title: '请输入人员姓名',
            duration: 2000
          });
          return false;
        }
        // 身份证号
        if (!this.form.USER_ID_CARD) {
          uni.showToast({
            icon: 'none',
            title: '请输入身份证号',
            duration: 2000
          });
          return false;
        }
        else if (!validateIdCard(this.form.USER_ID_CARD)) {
          uni.showToast({
            icon: 'none',
            title: '请输入有效的身份证号',
            duration: 2000
          });
          return false;
        }
        // 手机号码
        if (!this.form.PHONE) {
          uni.showToast({
            icon: 'none',
            title: '请输入手机号码',
            duration: 2000
          });
          return false;
        }
        else if (!validateMobile(this.form.PHONE)) {
          uni.showToast({
            icon: 'none',
            title: '请输入有效的手机号码',
            duration: 2000
          });
          return false;
        }
        // 人员类型
        if (!this.form.PERSONNEL_TYPE) {
          uni.showToast({
            icon: 'none',
            title: '请选择人员类型',
            duration: 2000
          });
          return false;
        }

        // 身份证
        if (this.fileData.idCardFront.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证照片（正面）',
            duration: 2000
          });
          return false;
        }
        if (this.fileData.idCardBack.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证照片（背面）',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DATE_OF_BIRTH) {
          uni.showToast({
            icon: 'none',
            title: '请选择生日',
            duration: 2000
          });
          return false;
        }
        if (!this.form.NATION) {
          uni.showToast({
            icon: 'none',
            title: '请选择民族',
            duration: 2000
          });
          return false;
        }
        if (!this.form.SEX) {
          uni.showToast({
            icon: 'none',
            title: '请选择性别',
            duration: 2000
          });
          return false;
        }
        if (!this.form.ID_CARD_VALIDITY_START || !this.form.ID_CARD_VALIDITY_END) {
          uni.showToast({
            icon: 'none',
            title: '请选择身份证有效期时间',
            duration: 2000
          });
          return false;
        }
        if (!this.form.ID_CARD_ADDRESS) {
          uni.showToast({
            icon: 'none',
            title: '请输入住址信息',
            duration: 2000
          });
          return false;
        }
        if (!this.form.ID_CARD_ORGAN) {
          uni.showToast({
            icon: 'none',
            title: '请输入身份证的签发机关',
            duration: 2000
          });
          return false;
        }

        // 驾驶证
        if (this.fileData.driverLicense.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传驾驶证照片',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_NO) {
          uni.showToast({
            icon: 'none',
            title: '请输入驾驶证号',
            duration: 2000
          });
          return false;
        }
        if (this.form.DRIVING_MODEL.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请选择准驾车型',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_ISSUE_DATE) {
          uni.showToast({
            icon: 'none',
            title: '请选择初次领证日期',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_VALIDITY_START || !this.form.DRIVER_LICENSE_VALIDITY_END) {
          uni.showToast({
            icon: 'none',
            title: '请选择驾驶证有效期时间',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_ORGAN) {
          uni.showToast({
            icon: 'none',
            title: '请输入驾驶证的签发机关',
            duration: 2000
          });
          return false;
        }

        // 从业资格证证
        if (this.fileData.qualificationCertificate.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传从业资格证照片',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_NO) {
          uni.showToast({
            icon: 'none',
            title: '请输入从业资格证号',
            duration: 2000
          });
          return false;
        }
        if (this.form.QUALIFICATION_CERTIFICATE_CATEGORY.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请选择从业资格证类别',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_ISSUE_DATE) {
          uni.showToast({
            icon: 'none',
            title: '请选择初次领证日期',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_VALIDITY_START || !this.form.QUALIFICATION_CERTIFICATE_VALIDITY_END) {
          uni.showToast({
            icon: 'none',
            title: '请选择从业资格证有效期时间',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_ORGAN) {
          uni.showToast({
            icon: 'none',
            title: '请输入从业资格证的签发机关',
            duration: 2000
          });
          return false;
        }
        if (!this.form.APPLY_CORP) {
          uni.showToast({
            icon: 'none',
            title: '请选择入职企业',
            duration: 2000
          });
          return false;
        }
        return true;
      }
		}
	}
</script>

<style>
	page{
		background-color: #f3f2f2;
	}
  .prevent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .cu-form-title{
    padding: 20upx 0;
  }
  .cu-form-textarea{
    background-color: #ffffff;
    padding: 1upx 30upx 20upx;
    min-height: 100upx;
  }
  .cu-form-textarea textarea {
    height: 4.6em;
    width: 100%;
    line-height: 1.2em;
    flex: 1;
    font-size: 28upx;
    padding: 0;
  }
  .selected{
    display: flex;
    align-items: center;
    height: 100upx;
  }
  .selected .radio{
    transform:scale(0.8);
    margin-right: 10upx;
  }
  .group{
    display: flex;
    align-items: center;
  }
  .cu-form-group .title{
    font-size: 28upx;
    font-weight: bold;
  }
  .cu-bar .action:first-child {
    font-size: 28upx;
  }
  .cu-form-group .picker{
    color: #808080;
  }
  .picker-tree{
    color: #808080;
  }
</style>
