<template>
  <div class="register-page-content">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" label-position="top">
      <el-form-item label="会员名称" prop="loginName" style="width: 100%">
        <el-input v-model="ruleForm.loginName" 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="mobile" style="width: 100%">
        <el-input v-model="ruleForm.mobile" 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.mobile" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="企业地址" prop="enterpriseAddress" style="width: 100%">
        <div style="display: flex;">
          <el-cascader
            v-model="ruleForm.provinceCityIds"
            :options="regionList"
            :props="{ value: 'id', label: 'name' }"
            size="medium"
            style="width: 80%"
          />
          <el-input v-model="ruleForm.enterpriseAddress" size="medium" placeholder="请输入详细地址" />
        </div>

      </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"
        style="width: 100%;"
        @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: {
        loginName: '',
        password: '',
        confirmPassword: '',
        mobile: '',
        code: '',
        enterpriseAddress: '',
        referralCode: '',
        checked: false,
        provinceCityIds: []
      },
      rules: {
        loginName: [{ required: true, message: '请输入会员名称', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      regionList: []
    }
  },
  watch: {
    $route: {
      handler(val) {
        if (val && val.query && val.query.referralCode) {
          if (val.query.referralCode === 'null') {
            this.ruleForm.referralCode = ''
          } else {
            this.ruleForm.referralCode = val.query.referralCode
          }
        }
      },
      immediate: true
    }
  },
  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')
            this.$router.push({
              path: '/login'
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register-page-content {
  width: 100vw;
  // height: 100vh;
  padding: 140px 20vw 0;
  .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-page-content {
    width: 100vw;
    // height: 100vh;
    padding: 80px 4vw 0;
    .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-page-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>
