 <!--
  @description:填写基本信息
  @Modifier:肖文龙
  @routerPath:/register/registerInfo
  @date:2020/5/13-17:27
-->
<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">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="170px"
        class="demo-ruleForm"
      >
        <!-- 供应商名称 -->
        <el-form-item :label="`${registerData.typename}名称`" prop="orgName">
          <gx-input
            v-model.trim="ruleForm.orgName"
            gx-maxlength="varchar200"
            placeholder="请输入2～200位字符"
            class="f-input"
          />
        </el-form-item>
        <!-- 登录名 -->
        <el-form-item label="登录名" prop="userName">
          <gx-input v-model="ruleForm.userName" class="f-input" gx-placeholder="userName" />
          <span class="f-prompt-text">{{ inputPlaceholderData.userName }}</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" type="password" class="f-input" gx-placeholder="repeatPassword" />
          <span class="f-prompt-text">{{ inputPlaceholderData.repeatPassword }}</span>
        </el-form-item>
        <!-- 联系人姓名 -->
        <el-form-item label="联系人姓名" prop="realName">
          <gx-input
            v-model.trim="ruleForm.realName"
            gx-maxlength="varchar20"
            class="f-input"
            gx-placeholder="linkerName"
          />
          <span class="f-prompt-text">{{ inputPlaceholderData.linkerName }}</span>
        </el-form-item>
        <!-- 联系人手机号 -->
        <el-form-item label="联系人手机号" prop="mobilePhone">
          <gx-input
            v-model.trim="ruleForm.mobilePhone"
            gx-maxlength="varchar20"
            class="f-input"
            gx-placeholder="iphone"
          />
          <span class="f-prompt-text">{{ inputPlaceholderData.iphone }}</span>
        </el-form-item>
        <!-- 联系人邮箱 -->
        <el-form-item label="联系人邮箱" prop="email">
          <gx-input
            v-model.trim="ruleForm.email"
            gx-maxlength="varchar100"
            gx-placeholder="email"
            class="f-input"
          />
          <span class="f-prompt-text">{{ inputPlaceholderData.email }}</span>
        </el-form-item>
        <!-- 短信验证码 -->
        <!-- <el-form-item label="短信验证码" prop="verificationCode">
          <el-input v-model="ruleForm.verificationCode" placeholder="请输入短信验证码" style="width:calc(50% - 156px)" />
          <el-button :disabled="Phone" :loading="isGetCode" type="primary" style="margin-left:20px" @click="getCode">
            {{ !isGetCode ? "获取短信验证码" : count + "s后重新获取" }}
          </el-button>
        </el-form-item> -->
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="randCode">
          <div>
            <el-input
              v-model="ruleForm.randCode"
              type="text"
              placeholder="请输入验证码"
              style="width:270px"
            />
            <img :src="randCodeImageSrc" class="randCodeImg" title="看不清？换一张" @click="randCodeChange">
          </div>
        </el-form-item>
        <!-- 手机验证码 -->
        <!-- <el-form-item label="手机验证码" prop="verificationCode">
          <div>
            <el-input
              v-model="ruleForm.verificationCode"
              placeholder="请输入短信验证码"
              style="width:140px"
            /> -->
        <!-- 可以获取验证码 -->
        <!--  <el-button
              v-if="Phone&&randCode"
              :loading="isGetCode"
              type="primary"
              class="fr"
              @click="getCode"
            >{{ !isGetCode ? '获取短信验证码' : count+'s后重新获取' }}</el-button> -->
        <!-- 不可以获取验证码 -->
        <!--  <el-button
              v-else-if="!Phone"
              :disabled="true"
              type="primary"
              class="fr"
            >请输入手机号</el-button>
            <el-button
              v-else-if=" !randCode"
              :disabled="true"
              type="primary"
              class="fr"
            >请输入图片验证码</el-button>
          </div>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="no_wrap">
      <el-button :loading="loading" @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>
  </div>
</template>

<script>
/* api */
import {
  checkRegisterInfo, // 校验
  // sendPhoneCheckCode, // 验证码
  sendAliyunRegisterCode // 注册发送手机验证码
} from '@/api/common/registerCenter'
// import { submitRegister } from '@/api/common/suplier.js'//旧版供应商注册
import { submitRegisterTemp } from '@/api/common/suplier.js'// 新版供应商/机构注册
import { randCodeImage } from '@/api/common/loginCenter'
/* 公用方法 */
import { validateInput, userName, passWord, linkerName, phone, email, phoneRandCode, randCode, regphone } from '@/assets/js/validate'
import website from '@/assets/js/config/website' // 获取Encrypt公钥
// 输入框文案提示(切记其他地方不允许使用，如需要请提前告知肖文龙)
import { inputPlaceholderData } from '@/components/common/GXinput/GXinputLenMixin.js'
export default {
  name: 'RegisterInfo',
  props: {
    // 注册身份信息
    registerData: {
      type: Object,
      default: function() {
        return {
          typename: '', // 注册身份名称
          typecode: '' // 注册类型编码
        }
      }
    }
  },
  data() {
    return {
      inputPlaceholderData: inputPlaceholderData, // 输入框文案提示
      loading: false, // 按钮Loading
      ruleForm: {
        source: '', //  注册身份类型 01 临时供应商 00或空 临时注册会员 02 临时代理机构 03 临时采购单位
        orgName: '', // 供应商名称
        userName: '', // 用户账号
        password: '', // 用户密码
        realName: '', // 用户名
        mobilePhone: '', // 联系人手机号
        email: '', // 邮箱
        randCode: '', // 验证码
        rePwd: '' // 确认新密码
        // verificationCode: '' // 手机短信验证码
      },
      rules: {
        orgName: [
          { required: true, validator: validateInput, trigger: 'blur' }, // 格式校验
          { required: true, validator: this.orgName, trigger: 'blur' }// 重复校验
        ], // 供应商名称
        userName: [
          { required: true, validator: userName, trigger: 'blur' }, // 格式校验
          { required: true, validator: this.userNameApi, trigger: 'blur' }// 重复校验
        ], // 登录名
        password: [{ required: true, validator: passWord, trigger: 'blur' }], // 密码
        rePwd: [{ required: true, validator: this.rePwd, trigger: 'blur' }], // 确认新密码
        realName: [{ required: true, validator: linkerName, trigger: 'blur' }], // 联系人姓名
        mobilePhone: [
          { required: true, validator: phone, trigger: 'blur' }, // 格式校验
          { required: true, validator: this.mobilePhone, trigger: 'blur' }// 手机号是否已注册校验
        ], // 手机号
        email: [{ required: true, validator: email, trigger: 'blur' }], // 邮箱
        randCode: [{ required: true, validator: randCode, trigger: 'blur' }], // 格式校验
        verificationCode: [{ required: true, validator: phoneRandCode, trigger: 'blur' }]// 手机验证码
      },
      Phone: true, // 手机号是否输入正确-按钮展示
      randCode: false, // 验证码是否输入正确-按钮状态展示
      isGetCode: false, // 是否已点击获取验证码
      randCodeImageSrc: '', // 验证码图片
      count: 60, // 验证码发送倒计时60s
      timeOut: '' // 倒计时-定时器
    }
  },
  watch: {
    'ruleForm.mobilePhone'() {
      // 获取验证码按钮状态
      this.getCodeState()
    }
  },
  mounted() {
    // 获取图片验证码
    this.randCodeChange()
  },
  methods: {
    // 返回登陆页
    backHomepage() {
      this.$store.dispatch('backHomepage')
    },
    // 获取验证码按钮状态
    getCodeState() {
      if (regphone.test(this.ruleForm.mobilePhone)) {
        this.Phone = false
      } else {
        this.Phone = true
      }
    },
    // 获取短信验证码倒计时
    getCode() {
      this.isGetCode = true
      const sid = setInterval(() => {
        this.count--
        if (this.count === 0) {
          clearInterval(sid)
          this.count = 60
          this.isGetCode = false
        }
      }, 1000)
      const data = {
        phoneNumber: this.ruleForm.mobilePhone
      }
      // 调用获取验证码接口，无论是否成功，把此变量置为false
      sendAliyunRegisterCode(data).then(res => {
        if (res.header.ret === '0') {
          this.$message({
            type: 'success',
            message: '获取成功'
          })
        }
      }).catch(() => {
        // 清楚验证码的倒计时
        // this.clearGetCodeInterval()
        // this.ruleForm.verificationCode = '' // 清空验证码
      })
    },
    // 清楚验证码的倒计时
    clearGetCodeInterval() {
      clearInterval(this.timeOut)
      this.timeOut = ''
      this.count = 60
      this.isGetCode = false
    },
    // 验证码
    randCodeChange() {
      const data = {
        type: 'register', // expertRegister 注册时
        a: new Date().getTime()
      }
      this.randCodeImageSrc = randCodeImage(data)
      this.ruleForm.randCode = ''
    },
    // 上一步
    preStep() {
      this.$emit('stepPage', 'prev', {}) // 步骤条切换方法 prev 上一步
    },
    // 完成注册
    finishReg(formName) {
      // 设置公钥
      this.$Encrypt.setPublicKey(website.publicKey)
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true// 按钮Loading
          // 不传确认新密码的值
          const data = {
            ...this.ruleForm,
            source: this.registerData.typecode ? this.registerData.typecode : '01' // 注册身份类型 01 临时供应商 00或空 临时注册会员 02 临时代理机构 03 临时采购单位
          }
          delete data.rePwd
          data.password = this.$Encrypt.encryptLong(data.password) // Encrypt加密
          // data.password = this.$Base64.encode(data.password)// 加密
          submitRegisterTemp(data).then(response => {
            const registerData = {
              userName: data.userName, // 账号
              token: response.data.token, // token
              password: data.password// 密码
            }
            // 注册信息
            sessionStorage.setItem('registerData', JSON.stringify(registerData))
            this.loading = false
            this.$emit('stepPage', 'next', {}) // 步骤条切换方法 next 下一步
          }).catch(() => {
            // 获取图片验证码
            this.randCodeChange()
            this.loading = false// 按钮Loading
          })
        }
      })
    },
    /* -------------------校验正则------------------- */
    // 供应商名称
    orgName(rule, value, callback) {
      checkRegisterInfo({ orgName: value })
        .then(response => {
          if (response.data === '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(() => {
        })
    },
    // 确认新密码
    rePwd(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
  }
}
</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;
    .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>
