<!--
  @description:填写基本信息
  @Modifier:徐媛媛
  @routerPath:/register/registerFinishReg
  @date:2020/8/3-19：34
-->
<template>
  <div class="registerInfo">
    <p style="margin-top:10px;margin-bottom:16px;;color:#999;font-size:14px;text-align: center;">
      提示：专家如实填写申报信息，带“<span style="color:red;">*</span>”为必填内容
    </p>
    <div class="registerInfo-content" style="min-height: 600px;">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="170px"
        class="demo-ruleForm"
      >
        <!-- 真实姓名 -->
        <el-form-item label="真实姓名" prop="realName">
          <gx-input v-model="ruleForm.realName" class="f-input" gx-placeholder="linkerName" />
          <span class="f-prompt-text">{{ inputPlaceholderData.linkerName }}</span>
        </el-form-item>
        <!-- 身份证号 -->
        <el-form-item label="身份证号" prop="certificateCode">
          <gx-input v-model="ruleForm.certificateCode" class="f-input" gx-placeholder="makeSureId" @change="changeCertificateCode" />
          <span class="f-prompt-text">{{ inputPlaceholderData.makeSureId }}</span>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password" label="密码">
          <gx-input
            v-model="ruleForm.password"
            class="f-input"
            type="password"
            gx-placeholder="passWord"
          />
          <span class="f-prompt-text">{{ inputPlaceholderData.passWord }}</span>
        </el-form-item>
        <el-form-item prop="rePwd" label="确认新密码">
          <gx-input v-model="ruleForm.rePwd" class="f-input" type="password" gx-placeholder="repeatPassword" />
          <span class="f-prompt-text">{{ inputPlaceholderData.repeatPassword }}</span>
        </el-form-item>
        <!-- 手机号码 -->
        <el-form-item label="手机号码" prop="mobile">
          <gx-input v-model="ruleForm.mobile" class="f-input" gx-placeholder="iphone" />
          <span class="f-prompt-text">{{ inputPlaceholderData.iphone }}</span>
        </el-form-item>
        <!--性别-->
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex" disabled>
            <el-radio v-for="(item,index) in sex" :key="index" :label="item.typecode">
              {{ item.typename }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!--工作单位-->
        <el-form-item label="工作单位" prop="comName">
          <div class="f-input fl">
            <el-input v-model.trim="ruleForm.comName" />
            <!-- <el-button type="primary" style="margin-left: 7px" @click="selectBuyersShowDialogBtn('10',index)">
              选择
            </el-button>
            <el-button @click="clearUnit">
              清空
            </el-button> -->
          </div>
          <span class="f-prompt-text">请输入工作单位</span>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="comCode">
          <el-input v-model="ruleForm.comCode" class="f-input" />
          <span class="f-prompt-text">{{ inputPlaceholderData.creditCode }}</span>
        </el-form-item>
        <!--是否退休-->
        <el-form-item label="是否退休" prop="retired">
          <el-radio-group v-model="ruleForm.retired">
            <el-radio v-for="(item,index) in retired" :key="index" :label="item.typecode">
              {{ item.typename }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="图形验证码" prop="confirmCode">
          <div>
            <el-input
              v-model="ruleForm.confirmCode"
              type="text"
              placeholder="请输入验证码"
              style="width:270px"
            />
            <img
              :src="randCodeImageSrc"
              class="randCodeImg"
              title="看不清？换一张"
              @click="randCodeChange"
            >
          </div>
        </el-form-item>
        <!-- 手机验证码 -->
        <!-- 可以获取验证码 -->
        <!-- 不可以获取验证码 -->
        <!-- <el-form-item label="短信验证码" prop="messageConfirmCode">
          <div>
            <el-input
              v-model="ruleForm.messageConfirmCode"
              placeholder="请输入短信验证码"
              style="width:140px"
            />
            <el-button
              v-if="Phone"
              :loading="isGetCode"
              type="primary"
              @click="getCode"
            >
              {{ !isGetCode ? '获取验证码' : count+'s后重新获取' }}
            </el-button>
            <el-button v-else-if="!Phone" :disabled="true" type="primary">
              获取验证码
            </el-button>
          </div>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="no_wrap">
      <el-button @click="preStep">
        上一步
      </el-button>
      <el-button
        :loading="loading"
        type="primary"
        size="default"
        @click="finishReg('ruleForm')"
      >
        完成注册
      </el-button>
      <p style="margin:16px auto;">
        <span style="margin-right:10px;">已有账号</span>
        <el-button type="text" @click="backHomepage">
          登录
        </el-button>
      </p>
    </div>
    <expertSelectworkunitDialog
      ref="projectDepartInfo"
      @dialogDataBuyersInfo="dialogDataBuyersInfo"
    />
  </div>
</template>

<script>
/* api */
import {
  submitExpertRegisterInfo,
  checkTSUserInfoOnlyIDCard,
  checkExpertRegisterInfoCompanyIsExist
} from '@/api/expert/expertRegisterCenter'
import {
  checkRegisterInfo,
  sendPhoneCheckCode } from '@/api/common/registerCenter'
import { randCodeImage } from '@/api/common/loginCenter'
import { ListRegister } from './mixins/register'// 分页
/* 公用方法 */
import {
  userName,
  passWord,
  linkerName,
  // phoneRandCode,
  randCode,
  makeSureId,
  phone,
  organizationCode
} from '@/assets/js/validate'
// 组件  \
import expertSelectworkunitDialog from '@views/expert/expertInfo/expertWorkPerience/selectworkunit-dialog'// 招标人/代理机构-选择弹框
// 输入框文案提示(切记其他地方不允许使用，如需要请提前告知肖文龙)
import { inputPlaceholderData } from '@/components/common/GXinput/GXinputLenMixin.js'
export default {
  name: 'RegisterInfo',
  components: {
    expertSelectworkunitDialog // 招标人/代理机构-选择弹框
  },
  mixins: [ListRegister],
  data() {
    return {
      inputPlaceholderData: inputPlaceholderData, // 输入框文案提示
      loading: false, // 按钮Loading
      ruleForm: {
      //  userName: '', // 用户账号
        certificateCode: '', // 身份证号码
        password: '', // 用户密码
        realName: '', // 用户名
        comCode: '', // 组织机构代码
        mobile: '', // 联系人手机号
        confirmCode: '', // 验证码
        rePwd: '', // 确认新密码
        comName: '', // 工作单位名称
        comId: '', // 工作单位ID
        sex: '', // 性别
        retired: '01' // 是否退休
        // messageConfirmCode: '' // 手机短信验证码
      },
      rules: {
        userName: [
          { required: true, validator: userName, trigger: 'blur' }, // 格式校验
          { required: true, trigger: 'blur' } // 重复校验
        ], // 登录名
        certificateCode: [
          { required: true, validator: makeSureId, message: '请输入身份证号', trigger: 'blur' },
          { validator: this.makeSureIdApi, trigger: 'blur' }
        ], // 身份证号
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }], // 性别
        retired: [{ required: true, message: '请选择是否退休', trigger: 'change' }], // 性别
        // comName: [
        //   { required: true, message: '请选择工单单位', trigger: 'blur' },
        //   { required: true, validator: this.comNameValidator, trigger: 'blur' }
        // ], // 工作单位
        password: [{ required: true, validator: passWord, trigger: 'blur' }], // 密码
        rePwd: [{ required: true, validator: this.rePwd, trigger: 'blur' }], // 确认新密码
        realName: [{ required: true, validator: linkerName, trigger: 'blur' }], // 联系人姓名
        mobile: [
          { required: true, validator: phone, trigger: 'blur' }, // 格式校验
          { validator: this.mobilePhone, trigger: 'blur' } // 手机号是否已注册校验
        ], // 手机号
        comCode: [
          { required: true, validator: organizationCode, trigger: 'blur' },
          { required: true, validator: this.comCodeValidator, trigger: 'blur' }
        ], // 组织机构代码
        confirmCode: [{ required: true, validator: randCode, trigger: 'blur' }] // 格式校验
        // messageConfirmCode: [{ required: true, validator: phoneRandCode, trigger: 'blur' }] // 手机验证码
      },
      Phone: true, // 手机号是否输入正确-按钮展示
      confirmCode: false, // 验证码是否输入正确-按钮状态展示
      isGetCode: false, // 是否已点击获取验证码
      randCodeImageSrc: '', // 验证码图片
      count: 60, // 验证码发送倒计时60s
      checkCategory: ''
    }
  },
  mounted() {
    // 获取图片验证码
    this.randCodeChange()
  },
  methods: {
    // 返回登陆页
    backHomepage() {
      this.$store.dispatch('backHomepage')
    },
    changeCertificateCode(e) {
      if (e.substr(-2).substring(0, 1) % 2) {
        this.ruleForm.sex = '01'
      } else {
        this.ruleForm.sex = '02'
      }
    },
    // 获取短信验证码倒计时
    getCode() {
      this.isGetCode = true
      const sid = setInterval(() => {
        this.count--
        if (this.count === 0) {
          clearInterval(sid)
          this.count = 60
          this.isGetCode = false
        }
      }, 1000)
      // //  调用获取验证码接口，无论是否成功，把此变量置为false
      sendPhoneCheckCode(this.ruleForm.mobile, '02').then(res => { // 注册传 02
        if (res.header.ret === '0') {
          this.$message({
            type: 'success',
            message: '获取成功'
          })
        }
      }).catch(() => {

      })
    },
    //  验证码
    randCodeChange() {
      const data = {
        type: 'expertRegister', // expertRegister 注册时
        a: new Date().getTime()
      }
      this.randCodeImageSrc = randCodeImage(data)
      this.ruleForm.confirmCode = ''
    },
    // 上一步
    preStep() {
      this.$emit('stepPage', 'prev', {}) // 步骤条切换方法 prev 上一步
    },
    // 选择工作单位
    selectBuyersShowDialogBtn(departRoleName, index) {
      this.$refs.projectDepartInfo.openOrganizationDialog(departRoleName, index, true)
    },
    // 清空工作单位
    clearUnit() {
      // this.ruleForm.comName = ''
    },
    dialogDataBuyersInfo(currentData) {
      // this.ruleForm.comName = currentData.comName
      // this.ruleForm.comCode = currentData.comCode
    },
    // 完成注册
    finishReg(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true// 按钮Loading
          // 不传确认新密码的值
          const data = {
            ...this.ruleForm
          }
          delete data.rePwd
          data.password = this.$Base64.encode(data.password)// 加密
          submitExpertRegisterInfo(data).then(response => {
            const registerData = {
              certificateCode: data.certificateCode, // 身份证号码
              token: response.data, // token
              password: data.password// this.ruleForm.password// 密码
            }
            // 注册信息
            sessionStorage.setItem('registerData', JSON.stringify(registerData))
            this.$emit('stepPage', 'next', {}) // 步骤条切换方法 next 下一步
          }).catch(() => {
            // 获取图片验证码
            this.randCodeChange()
            this.loading = false// 按钮Loading
          })
        }
      })
    },
    /* -------------------校验正则------------------- */
    // 身份证号码重复校验
    makeSureIdApi(rule, value, callback) {
      checkTSUserInfoOnlyIDCard({ certificateCode: value })
        .then(response => {
          if (response.header.ret === '1') {
            callback(new Error('身份证号已存在'))
          } else {
            callback()
          }
        })
        .catch(() => {})
    },
    // 用户名重复校验
    userNameApi(rule, value, callback) {
      checkRegisterInfo({ userName: value })
        .then(response => {
          if (response.data === '1') {
            callback(new Error('登录名已存在'))
          } else {
            callback()
          }
        })
        .catch(() => {
        })
    },
    // // 手机号校验重复
    mobilePhone(rule, value, callback) {
      checkRegisterInfo({ mobilePhone: value })
        .then(response => {
          if (response.data === '1') {
            callback(new Error('手机号码已被注册'))
            this.Phone = true // 手机号是否输入正确-按钮展示
          } else {
            callback()
          }
        })
        .catch(() => {
        })
    },
    // 工作单位校验重复
    comNameValidator(rule, value, callback) {
      checkExpertRegisterInfoCompanyIsExist({ comName: value })
        .then(response => {
          if (response.data === '1') {
            callback(new Error('工作单位重复'))
          } else {
            callback()
          }
        })
        .catch(() => {
        })
    },
    // 组织机构代码
    comCodeValidator(rule, value, callback) {
      checkExpertRegisterInfoCompanyIsExist({ comCode: value })
        .then(response => {
          if (response.data === '1') {
            callback(new Error('工作单位重复'))
          } else {
            callback()
          }
        })
        .catch(() => {
        })
    },
    // 确认新密码
    rePwd(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    },
    // 职级
    checkCateRank() {
    }
  }
}
</script>

<style lang="less" scoped>
@import url("~@/assets/style/common/public.less");
.colorOrange {
  color: @hyacinthine;
}
.registerInfo {
  .registerInfo-content{
    border: 1px solid @border-gray;
    padding: 26px 0px 10px;
    box-sizing: border-box;
    height: 450px;
    overflow:auto;
    .demo-ruleForm {
      width:100%;
      margin:  0 auto;
      .f-input {
        width: 50%;
      }
      .f-prompt-text {
        margin-left: 10px;
        font-size: 12px;
        color: rgb(153, 153, 153);
      }
      //验证码图片
      .randCodeImg {
        margin-left: 10px;
        height: 32px;
      }
    }
  }
}

.no_wrap {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin-top: 16px;
}

</style>
