<template>
  <div class="register-content">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" label-position="left">
      <el-form-item label="会员名称" prop="userName" style="width: 100%">
        <el-input v-model="ruleForm.userName" size="medium" style="width: 100%" placeholder="请输入会员名称" />
      </el-form-item>
      <el-form-item label="密码" prop="password" style="width: 100%">
        <el-input v-model="ruleForm.password" type="password" size="medium" style="width: 100%" placeholder="请输入6~16位数字和字母的组合" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" style="width: 100%">
        <el-input v-model="ruleForm.confirmPassword" type="password" size="medium" style="width: 100%" placeholder="请再次输入密码" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber" style="width: 100%">
        <el-input v-model="ruleForm.phoneNumber" size="medium" style="width: 100%" placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label="验证码" prop="code" style="width: 100%">
        <el-input v-model="ruleForm.code" size="medium" style="width: 100%" placeholder="请输入6位数验证码">
          <template #append>
            <verification-code type="phone" :code="ruleForm.phoneNumber" module="register" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="推荐码（选填）" prop="referralCode" style="width: 100%">
        <el-input v-model="ruleForm.referralCode" size="medium" style="width: 100%" placeholder="您的长银保理业务经理或支付渠道推荐码（选填）" />
      </el-form-item>
      <div>
        <el-checkbox v-model="ruleForm.checked" />
        <span class="checked">
          我已阅读并接受
          <span @click="protocolClick('register')">《注册协议》</span>
          和
          <span @click="protocolClick('privacy')">《隐私政策》</span>
        </span>
      </div>
      <el-button
        :loading="loading"
        type="primary"
        class="btn"
        @click="registerClick"
      >
        注册
      </el-button>
      <div class="login">
        已有账号？
        <span @click="$emit('goLogin')">马上登录</span>
      </div>
    </el-form>

  </div>
</template>

<script>
import { register } from '@/api/user'
import { getRegion } from '@/api/dictionary'
import { treeChildrenEmpty } from '@/utils'
export default {
  components: {
    VerificationCode: () => import('@/components/VerificationCode/index.vue')
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        userName: '',
        password: '',
        confirmPassword: '',
        phoneNumber: '',
        code: '',
        // enterpriseAddress: '',
        referralCode: '',
        checked: false
        // provinceCityIds: []
      },
      rules: {
        userName: [{ required: true, message: '请输入会员名称', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      regionList: []
    }
  },
  created() {
    // this.getRegionList()
  },
  methods: {
    getRegionList() {
      getRegion({ flag: true }).then(({ data }) => {
        this.regionList = treeChildrenEmpty(data)
      })
    },
    protocolClick(type) {
      this.$emit('protocol', type)
    },
    registerClick() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const { password, confirmPassword, checked } = this.ruleForm
          if (password !== confirmPassword) {
            this.$message.warning('两次密码不一致')
            return
          }
          if (!checked) {
            this.$message.warning('请勾选用户协议')
            return
          }
          const params = {
            ... this.ruleForm
          }
          delete params.confirmPassword
          // params.password = this.$md5(params.password)
          this.loading = true
          register(params).then(() => {
            this.$message.success('用户注册成功')
            this.$emit('goLogin')
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register-content {
  margin-top: 60px;
  width: 480px;
  margin-left: 40px;
  .checked {
    color: #2C4270;
    font-size: 12px;
    & > span {
      color: #0096FF;
      cursor: pointer;
    }
  }
  .btn {
    width:100%;
    height: 43px;
    font-size: 16px;
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .login {
    text-align: center;
    color: #2C4270;
    font-size: 12px;
    & > span {
      color: #0096FF;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 768px) {
  .register-content {
    margin-top: 0px;
    width: 350px;
    margin-left: 0px;
    margin: 0 auto;
    .checked {
      color: #2C4270;
      font-size: 12px;
      & > span {
        color: #0096FF;
        cursor: pointer;
      }
    }
    .btn {
      width:90%;
      height: 43px;
      font-size: 16px;
      margin-bottom: 30px;
      margin-top: 20px;
    }
    .login {
      text-align: center;
      color: #2C4270;
      font-size: 12px;
      & > span {
        color: #0096FF;
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="scss">
.register-content {
  .el-button--primary {
    background-color: #0096FF;
    border-color: #0096FF;
  }
  .el-button--primary:focus, .el-button--primary:hover {
    background-color: #0096FF;
    border-color: #0096FF;
  }

}
</style>
