<template>
  <div class="main-box">
    <div v-if="logoImg" class="imgBoxOne">
      <img :src="logoImg" alt="" class="logo-botton">
      <img src="../../assets/kyy/register-bg.png" alt="">
    </div>
    <div v-else class="imgBoxTwo">
      <img class="bg" src="../../assets/kyy/register-bg.png" alt="">
      <img class="logo-top" src="../../assets/kyy/LOGO.png" alt="">
    </div>

    <!--  注册表单-->
    <div class="regist-container">
      <div class="register-form">
        <el-form ref="registForm" :model="registForm" :rules="rules" class="registFormStyle" autocomplete="on" label-position="left" style="z-index: 1">
          <div class="title-container">
            <span class="title">注册</span>
          </div>
          <el-form-item prop="username" class="formItem">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/用户.svg" alt="">
              </span>
              <el-input class="input-style" ref="username" v-model="registForm.username" placeholder="请输入用户名" name="username" type="text" />
            </div>
          </el-form-item>
          <el-form-item class="formItem" prop="password">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/密码.svg" alt="">
              </span>
              <el-input class="input-style" :key="passwordType" ref="password" v-model="registForm.password" :type="passwordType" placeholder="请输入密码" name="password" />
              <span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="  passwordType === 'password' ? 'eye' : 'eye-open'   " />
              </span>
            </div>
          </el-form-item>
          <el-form-item prop="nick_name" class="formItem">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/用户.svg" alt="">
              </span>
              <el-input class="input-style" ref="nick_name" v-model="registForm.nick_name" placeholder="请输入显示名" type="text" />
            </div>
          </el-form-item>
          <el-form-item prop="email" class="formItem">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/邮箱.svg" alt="">
              </span>
              <el-input class="input-style" ref="email" v-model="registForm.email" placeholder="请输入邮件地址" type="text" />
            </div>
          </el-form-item>

          <el-form-item prop="mobile" class="formItem">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/手机.svg" alt="">
              </span>
              <el-input class="input-style" ref="mobile" v-model="registForm.mobile" placeholder="请输入手机号" type="text" />
            </div>
          </el-form-item>

          <el-form-item prop="address" class="formItem">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/地址.svg" alt="">
              </span>
              <el-input class="input-style" ref="address" v-model="registForm.address" placeholder="请输入地址" type="text" />
            </div>
          </el-form-item>

          <el-form-item prop="org_type" class="formItem orgTypeSelect">
            <span class="svg-container">
              <img src="../../assets/kyy/机构.svg" alt="">
            </span>
            <el-select class="select" v-model="registForm.org_type" placeholder="请选择所属机构" @change="change" :append-to-body="true" style="">
              <el-option label="个人客户" value="2"></el-option>
              <el-option label="公司客户" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="" v-if="registForm.org_type === '2'" class="formItemLast">
            <div class="upload-box">
            <el-upload   class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess" :on-remove="handleRemove">
              <img  v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus  avatar-uploader-icon"></i>
            </el-upload>
            </div>
          </el-form-item>

          <el-form-item prop="orgname" class="formItem name-institution" v-if=" registForm.org_type == '3'">
            <div class="form-item">
              <span class="svg-container">
                <img src="../../assets/kyy/用户.svg" alt="">
              </span>
              <el-input class="input-style" ref="orgname" v-model="registForm.orgname" placeholder="请输入机构名称" type="text" />
            </div>
          </el-form-item>

          <el-form-item prop="" v-if="registForm.org_type == '3'" class="formItemLast">
            <div class="upload-box">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>

          <!-- <el-form-item prop="license_img" v-if="registForm.org_type == '3'">
            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess" :on-remove="handleRemove">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item> -->
          <!-- <el-form-item prop="id_img" v-if="registForm.org_type=='2'">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input ref="mobile" v-model="registForm.id_img" placeholder="身份证" type="text" />
          </el-form-item> -->
          <!-- <el-form-item prop="license_img" v-if="registForm.org_type=='3'">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input ref="license_img" v-model="registForm.license_img" placeholder="营业执照" type="text" />
          </el-form-item> -->

          <div class="twoBtn">
            <el-button class="register-btn" :loading="loading" type="primary" @click.native.prevent="handleRegister('registForm')">马上注册
            </el-button>
            <span class="go-login" @click.native.prevent="handleLogin()">已有账号？<span @click="handleLogin" class="login-btn-style">去登录</span></span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { registerUserAPI, getLogoAPI } from "@/api/login";

export default {
  name: "indexNew",
  data() {
    return {
      url: window.location.href,
      value: '',
      registForm: {
        username: "",
        password: "",
        email: "",
        nick_name: "",
        address: "",
        mobile: "",
        org_type: "",
        orgname: "",
      },
      imageUrl: "",
      currentFile: null,
      invitecode: this.$route.query.invitecode,
      rules: {
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 6, message: '用户名长度至少应包含6个字符' }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: '密码长度至少应包含6个字符' }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        nick_name: [
          { required: true, message: "请输入显示名", trigger: "blur" },
        ],
        mobile: [
          {
            pattern:
              /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
            message: "请输入有效的手机号",
          },
          { required: true, trigger: "blur", message: "请输入手机号" },
        ],
        email: [
          {
            pattern: /[\w.]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.(com|cn|edu|uk)/ig,
            message: "请输入有效的邮箱",
          },

          { required: true, trigger: "blur", message: "请输入邮箱" },
        ],
        orgname: [{ required: true, message: "请输入机构", trigger: "blur" }],
        id_img: [
          { required: true, message: "请上传身份证", trigger: "change" },
        ],
      },
      passwordType: "password",
      loading: false,
      redirect: undefined,
      otherQuery: {},
      org_type: [
        {
          value: "2",
          label: "个人客户",
        },
        {
          value: "3",
          label: "公司客户",
        },
      ],
      photosUrl: null,
      logoImg: null
    };
  },
  created() {
    this.init()
  },
  mounted() {
    this.registForm.username = ''
    if (this.invitecode) {
      this.registForm.invitecode = this.invitecode;
    }
  },
  methods: {
    init() {
      let params = {
        url_link: this.GetQueryString(this.url)
      }
      getLogoAPI(params).then((res) => {
        if (res.status == true && res.data && res.data.length) {
          this.photosUrl = res.data[0];
          if (this.photosUrl.orgname != '业主机构') {
            // this.isLogo = true
            this.logoImg = this.photosUrl.logo;
            // this.logoText = this.photosUrl.orgname;
          }
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    GetQueryString(name) {
      if (name.indexOf("#") != -1) {
        const params = name.split("#")[0];
        return params;
      }
    },
    change(row) {
      if (row == 3) {
        this.registForm.orgname = null
      }
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleAvatarSuccess(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.currentFile = file;
    },
    handleRemove(file, fileList) { //移除照片

    },
    handleLogin() {//返回登录页
      this.$router.push({ name: "Login" });
    },
    handleRegister(formName) { //注册
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.registForm.org_type) {
            if (this.registForm.org_type == "2") {
              this.registForm.orgname = this.registForm.username;
              this.registForm.domain_name = this.photosUrl.domain_name;
              const formdata = this.getFormData(this.registForm);
              if (this.currentFile) {
                formdata.append("id_img", this.currentFile.raw);
                registerUserAPI(formdata).then((res) => {
                  if (res.status == true) {
                    this.$message({
                      message: "注册成功",
                      type: "success",
                    });
                    this.$router.push({ name: "Login" });
                  } else {
                    this.$message({
                      message: res.msg,
                      type: "error",
                    });
                  }
                });
              } else {
                this.$message({
                  message: '请上传身份证照片',
                  type: "error",
                });
              }
            } else {
              this.registForm.domain_name = this.photosUrl.domain_name;
              const formdata = this.getFormData(this.registForm);
              if (this.currentFile) {
                formdata.append("license_img", this.currentFile.raw);
                registerUserAPI(formdata).then((res) => {
                  if (res.status == true) {
                    this.$message({
                      message: "注册成功",
                      type: "success",
                    });
                    this.$router.push({ name: "Login" });
                  } else {
                    this.$message({
                      message: res.msg,
                      type: "error",
                    });
                  }
                });
              } else {
                this.$message({
                  message: '请上传营业执照',
                  type: "error",
                });
              }
            }
          } else {
            this.$message({
              message: "请选择机构类型",
              type: "error",
            });
          }
        } else {
          this.$message({
            message: "请查看注册信息是否完整",
            type: "error",
          });
        }
      });
    },
    getFormData(object) {//转换参数为formdata格式
      const formData = new FormData();
      Object.keys(object).forEach((key) => {
        const value = object[key];
        if (Array.isArray(value)) {
          value.forEach((subValue, i) => {
            formData.append(key + `[${i}]`, subValue);
          });
        } else {
          formData.append(key, object[key]);
        }
      });
      return formData;
    },
  }
}
</script>

<style scoped lang="scss">
$cursor: black;
.main-box {
  position: relative;
  width: 100%;
  height: 100vh;
  .imgBoxTwo {
    .bg {
      width: 100%;
      height: 100vh;
    }
  }
  .imgBoxOne {
    .logo-botton {
      width: 100px !important;
      height: 100px !important;
      position: absolute;
      top: 3%;
      left: 2%;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }

  .register-form {
    // overflow-y: hidden;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 76%;
    min-width: 500px;
  }
}

.logo-top {
  width: 200px !important;
  height: 45px !important;
  position: absolute;
  top: 3%;
  left: 2%;
}

.form-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  width: 360px;
  height: 42px;
}

//old
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.regist-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: white;
  .registFormStyle {
    border-radius: .2667rem;
    height: 100%;
    position: relative;
    width: 60%;
    // max-width: 100%;
    padding: 20px 25px 0;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    .formItem {
      border: 1px solid #d9d9d9;
      .form-item {
        img {
          width: 14px;
          height: 14px;
        }
        el-input {
          width: 50%;
        }
        .input-style {
          width: 140px !important;
          height: 30px !important;
        }
      }
    }
    .orgTypeUpload{

    }
    .formItemLast {
      .upload-box {
        .avatar-uploader {
          height: 60px;
          width: 60px;
          .avatar {
            height: 60px;
            width: 60px;
          }
          .el-icon-plus {
            height: 60px;
            width: 60px;
          }
        }
      }
    }
    .title-container {
      margin-bottom: 15px;
      position: relative;
      .title {
        mix-blend-mode: normal;
        color: rgba(0, 0, 0, 1);
        font-family: PingFang SC;
        font-size: 24px;
        letter-spacing: 1.1px;
        padding-left: 40%;
        //font-size: 26px;
        //color: $dark_gray;
        // margin: 0px 10px 0px;
        //text-align: center;
        //font-weight: bold;
      }
    }
  }
.el-form-item{
  margin-bottom:10px;
}
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }

  // .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  // }

  // .avatar-uploader .el-upload:hover {
  //   border-color: #409eff;
  // }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #d9d9d9;
  }

  .avatar {
    width: 2.3733rem;
    height: 2.3733rem;
    display: block;
  }
}

.mainBg {
  width: 100vw;
  height: 100vh;
  position: relative; /* 让容器成为相对定位的父元素 */
}

.mainBg::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url("./svgNew/login-bg.svg");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
}

.svgImg {
  //width: 10%!important;
  //border: 100px solid red;
  //height: auto;

  //position: absolute; /* 设置绝对定位以脱离文档流 */
  //top: 0;
  //left: 0;
  //width: 50%;
  //height: 100%; /* 拉伸图片高度至容器高度 */
}

.loginFromStyle {
  position: absolute;
  top: 0;
  right: 8%;
  z-index: 1;
}

.leftLogo {
  //border: 1px solid red;
  width: 35vw;
  height: 80vh;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 9999999;
  img {
    width: 30%;
    height: 30%;
  }
}

.logoStyleTwo {
  display: flex;
  justify-content: flex-start;
}

.windowsLogo {
  img {
    width: 90%;
    height: 90%;
  }
}

.titleHeader {
  --un-text-opacity: 1;
  color: rgba(255, 255, 255, var(--un-text-opacity));
  font-size: 24px;
  margin-top: 100px !important;
}

.el-select .el-select-dropdown__item {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 34px;
  line-height: 34px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 99999999999999999999999999999999999999999999999 !important;
}

.twoBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.regist-container ::v-deep.el-input__inner {
  border: none;
}

.name-institution ::v-deep .el-input__inner {
  border: none;
}
.regist-container {
  .orgTypeSelect {
    .select {
      width: 65%;
    }
  }
}

.upload-box {
  width: 65px;
}

.register-btn {
  mix-blend-mode: normal;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-size: 16px;
  width: 200px;
  height: 42px;
}

.go-login {
  padding-top: 10px;
  cursor: default;
  align-self: flex-end;
  margin-bottom: 0;
  mix-blend-mode: normal;
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-size: 14px;
  letter-spacing: 0.7px;
}
.login-btn-style {
  display: inline-block;
  color: blue;
  border-bottom: 2px solid blue !important;
  cursor: pointer;
}
.el-input ::v-deep .el-input__inner {
  border: none;
  background-color: white;
  &:-webkit-autofill {
    background-color: white;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: $cursor !important;
  }
}
</style>
