<template>
  <div class="login-container">
    <!--<div class="pageTitle">{{ title }}</div>-->

    <!--<div class="noticeTitle">新用户注册须知:</div>-->
    <div class="stay-from">
      <div class="Enter-EnterBtnBox_item">
        <div class="Notice-title" style="margin-bottom: 20px;font-size: 20px">
          新用户注册须知:
        </div>
        <div class="Notice-detail">
          1.建议使用注册企业负责人的手机进行注册
        </div>
        <div class="Notice-detail" style="margin-top:-15px ">
          2.开始填写注册信息前,请准备已盖公章的《营业执照》副本复印件的扫描件;<el-button
            style="font-size: 14px;margin-left: 0px"
            type="text"
            @click="viewPdf(1)"
          >样例查看
            <!--@click="dowloadPdf"-->
          </el-button>
          <!--<a href="https://img.udims.com:9000/udims/register/file/.pdf/01c731f2-8cd2-4513-a00b-9da2479ef735.pdf" target="_blank">样例查看</a>-->
        </div>
        <div class="Notice-detail" style="margin-top:-15px" >
          3.开始填写注册信息前,请下载"<el-button
          style="font-size: 14px"
          type="text"
          @click="dowloadPdf"
        >合同模板
        </el-button>",完成合同填写、打印、盖章,并准备好扫描件;<el-button style="font-size: 14px;margin-left: 0px" type="text" @click="viewPdf(2)">样例查看</el-button>
        </div>
        <div class="Notice-detail" style="margin-top:-10px"  >
          4.上传扫描件要求,图片格式:<span style="color: red">".jpg/.png"</span>,文件格式为<span style="color: red">".pdf"</span>,文件小于2M
        </div>
        <div class="Notice-detail" style="margin-top:-10px" >
          5.新用户提交的中请信息在未审核前可以撤回修改，审核通过后无法修改
        </div>
        <div class="Notice-detail" style="margin-top:-10px" >
          6.新用户申请通过后,可以通过 :<span style="color: red;">在线付费</span>、<span style="color: red;">使用激活码</span>‌这两种方式开通使用
        </div>

      </div>
      <div style="margin-top: 1px;margin-left: 20px">
        注:提交资料后需等待审核通过,审核时间
        <span style="color: rgb(252, 179, 12);">1-3个工作日</span>,期间可根据注册手机号查看审核进度
      </div>
    </div>

    <div class="title-container">

      <div class="title" style="display: flex; justify-content: flex-end;  height: 50px;">
        <span class="img-style"><img src="../assets/register-logo.png" style="height: 43px"></span>
        <!--https://img.udims.com:9000/udims/register/file/.pdf/01c731f2-8cd2-4513-a00b-9da2479ef735.pdf-->
        <span style="font-size: 15px;display: inline-block;margin-top: 10px;cursor: pointer;"  class="red-hover" @click="dowloadPdf">合同下载</span>
        <span style="font-size: 15px;display: inline-block;margin-top: 10px;margin-right: 20px;margin-left: 20px;cursor: pointer;"  class="red-hover" @click="users">关于我们</span>
        <span style="font-size: 15px;display: inline-block;margin-top: 10px;margin-right: 20px">联系电话: 400-9909-112</span>

      </div>
    </div>

    <el-header style="text-align: right; line-height: 10px;margin-top: -40px">
      <span  style="font-size: 14px;color: white"></span>
    </el-header>

    <el-form
      class="register-form"
      :model="phoneForm"
      ref="rulesPhoneForm"
      :rules="rulesPhoneForm"
      label-position="left"
    >
      <el-card style="height: 418px;width: 380px;margin-top: -2px">
        <div class="Enter-title">企业注册</div>

        <div class="Enter-explain">手机号用来查看注册进度、接收审核结果短信提醒。</div>
        <div class="Enter-explain-bottom">如已填写注册信息,请使用注册的负责人手机号继续流程。</div>
        <!--<div class="">已填写过入驻资料的，请输入同一手机号继续流程。</div>-->
        <el-row>
          <el-col>
            <el-form-item prop="mobile" class="item" style="width:305px;margin-top: 30px;margin-left: 20px">
              <el-input
                size="small"
                style="width: 100%;background-color: white"
                placeholder="请输入手机号"

                v-model="phoneForm.mobile"
                @input="change()"
              >
                <i slot="prefix" class="el-icon-mobile-phone" style="margin-top: 13px">
                  <svg-icon icon-class="el-icon-mobile-phone"/>
                </i>
              </el-input>
              <!--<el-button  type="primary"  @click="getCheckcode">获取验证码</el-button>-->
              <el-button type="primary" @click="getCheckcode" :disabled="isTimer" :loading="loading"
              ><span>{{ btnTitle }}</span></el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="checkCode" class="item" style="width:305px;margin-left: 20px;margin-top: 20px">
              <!--<span class="svg-container">-->
              <!--<icon-svg icon-class="pwd"/>-->
              <!--</span>-->
              <el-input
                placeholder="请输入验证码"
                style="width: 100%;background-color: white;"
                @keyup.enter.native="handleLogin"
                v-model="phoneForm.checkCode"
              >
                <i slot="prefix" class="el-icon-s-grid" style="margin-top: 11px">
                  <svg-icon icon-class="el-icon-s-grid"/>
                </i>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item  class="item" style="width:305px;margin-top: 30px;margin-left: 20px">
              <el-button
                type="primary"
                style="width: 305px;height: 40px"
                @click.native="handleLogin()"
              >开始注册
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button
          style="margin-left: 72%;margin-top: -20px;font-size: 13px"
          type="text"
          @click="viewRegisterPdf"
        >注册操作文档
          <!--@click="dowloadPdf"-->
        </el-button>
      </el-card>
    </el-form>
    <div style="
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, -50%);
        ">
      <a target="_blank" href=" " style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
        <img src="../assets/images/gongan.png" style="float:left;"/>
        <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:rgba(14,14,14,0.94);">
          闽公网安备 35020302034268号&nbsp; &nbsp;闽ICP备17019234号</p>
      </a>
    </div>
  </div>
</template>


<script>
import Verify from "vue2-verify";
import {checkCode, getCheckcode, encrypts} from "@/api/login";

export default {
  computed: {},
  data() {
    //限制输入正确的手机号码格式
    const validatePhone = (rule, value, callback) => {
      if (/^1[3-9]\d{9}$/.test(value) === false) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        // 校验通过
        callback();
      }
    };
    return {
      title: '',
      btnTitle: "获取验证码",
      isTimer: false,
      phoneForm: {
        mobile: "", //手机号码
        checkCode: "", //验证码
      },
      yzm: "",
      jmobile: "",
      rulesPhoneForm: {
        mobile: [
          {required: true, message: "请输入手机号码", trigger: "blur"},
          {validator: validatePhone, trigger: "blur"},
        ],
        checkCode: [
          {required: true, message: "请输入手机验证码", trigger: "blur"},
        ],
      },
      loading: false,
    };
  },
  methods: {
    toLogin() {
      router.push({
        path: "/",
      });
    },
    // register() {
    //   router.push({
    //     path: "/register",
    //   });
    // },
    //新的页面
    //倒计时
    validateBtn() {
      let time = 60;
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.isTimer = false;
          this.btnTitle = "获取验证码";
        } else {
          this.loading = false
          this.btnTitle = time + "秒后重试";
          this.isTimer = true;
          time--;
        }
      }, 1000);
    },
    change() {
    },
    getCheckcode() {
      if (this.phoneForm.mobile == '') {
        return this.$message.error("请输入手机号")
      }
      let tquery = {
        mobile: this.phoneForm.mobile,
      };
      getCheckcode(tquery).then((response) => {
        if (response.code === 20000) {
          this.yzm = response.data;
          this.validateBtn();
        } else {
          this.$message.error(response.message);
        }
      });
    },
    //手机验证表单提交
    handleLogin() {
      checkCode(this.phoneForm).then((res) => {
        if (res.code == 20000) {
          //加密验证码
          this.jmobile = res.data;

          let param = {
            mobile: this.jmobile,
            captcha: this.yzm,
            key: "key",
          }
          encrypts(param).then((res) => {
            if (res.code == 20000) {
              //跳转到完善信息页面
              this.$router.push({path: "/improveInfo", query: {mobile: res.data.mobile, captcha: res.data.captcha}});

            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          this.$message.error(res.message);
        }
      })

    },
    users(){
      window.open('http://www.xmglxp.com', '_blank'); // 打开新页面
      // window.location.href = 'http://www.xmglxp.com'; //覆盖本页面
    },
    //合同下载
    dowloadPdf(){
      this.handleDownload("https://img.udims.com:9000/udims/world/%E5%90%88%E5%90%8C%E6%A8%A1%E6%9D%BF.docx", "合同模板" + ".doc");
    },
    viewPdf(val){
      if (val == 1){
        const pdfUrl = 'https://img.udims.com:9000/udims/register/file/.pdf/registerYyzz.pdf'; // PDF 文件的 URL
        window.open(pdfUrl, '_blank');
      }else {
        const pdfUrl = 'https://img.udims.com:9000/udims/register/file/.pdf/register.pdf'; // PDF 文件的 URL
        window.open(pdfUrl, '_blank');
      }
    },
    viewRegisterPdf(){
      const pdfUrl = 'https://img.udims.com:9000/udims/register/file/.pdf/01c19e41-de0b-4827-b831-36a7fd949080.pdf'; // PDF 文件的 URL
      window.open(pdfUrl, '_blank');
    },
    handleDownload(url, name) {
      this.getBlob(url).then(blob => {
        saveAs(blob, name);
      })
      return false;
    },
    getBlob(url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        // xhr.setRequestHeader("adminid", store.getters.adminId)
        // xhr.setRequestHeader("admintoken", store.getters.token)
        xhr.responseType = 'blob';
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      })
    },
  },
  components: {
    Verify
  },
  created() {
    this.title = process.env.VUE_APP_TITLE
  }
};
</script>

<style type="text/scss" lang="scss">
//@import "@/assets/styles/mixin";
//@import "@/assets/styles/style";

$bg: #2d3a4b;
$dark_gray: #6e7072;
$light_gray: #eee;
.login-container {

  .pageTitle {
    color: white;
    font-weight: bolder;
    font-size: 60px;
    position: fixed;
    top: 22%;
    left: 17%;
  }

  //@include relative;
  background-color: white;
  //background-image: url("../assets/register.png");
  background-size: 100vw 100vh;
  height: 100%;

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
  }

  .item {
    width: 100%; /* 宽度设为100%，适应表单宽度 */
    margin-left: 0; /* 移除左边距，因为我们希望它居中 */

    .el-form-item__content {
      display: flex;
      flex-flow: row;
    }
  }

  input {
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
    color: $dark_gray;
    height: 100%;
  }

  //.el-input {
  //  display: inline-block;
  //}

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0.13333rem;
  }

  .svg-container {
    padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
    color: $dark_gray;
    vertical-align: middle;
    display: inline-block;

    &_login {
      font-size: 20px;
    }
  }

  //.title {
  //  font-size: 26px;
  //  color: #2d3a4b;
  //  margin: 0 auto 0.5333rem auto;
  //  text-align: center;
  //  font-weight: bold;
  //  margin-bottom: 50px;
  //}
  .title {
    font-size: 2em;
    color: white;
    padding-top: 6px;
  }

  .register-form {
    position: fixed;
    top: 25vh;
    right: 150px;
    //width: 50em;
    //border: 1px solid blue;
    height: 500px;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.0666rem;
    color: #454545;
  }

  .show-pwd {
    position: absolute;
    right: 0.1333rem;
    top: 0.09333rem;
    font-size: 16px;
    //color: $dark_gray;
    color: #8a8f97;
    cursor: pointer;
  }

  .thirdparty-button {
    /*position: absolute;*/
    /*right: .4666rem;*/
    /*bottom: .37333rem;*/
  }

  .box-card {
    margin-top: 20px;
    margin-right: -20px;
    height: 380px;
    width: 380px;
  }
}

.Enter-title {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 2px;
}

.stay-title {
  font-size: 24px;
  color: #333;
  text-align: center;
}

.Enter-explain, .Enter-explain-bottom {
  margin-left: 20px;
  text-align: center;
  font-size: 12px;
  color: #94a2b1;
  line-height: 24px;
  text-align: left; /* 确保文本左对齐 */
}

.stay-from {
  //border: 1px solid #ff0073;
  position: fixed;
  top: 25vh;
  //border: 1px solid blue;
  width: 700px;
  height: 418px;
  left: 130px;
  background-color: #e8eef3;;
}

.Notice-title {
  font-weight: 700;
  padding: 30px 0 15px 20px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #021122;
  line-height: 18px;
}

.Notice-detail {
  font-size: 14px;
  padding-left: 20px;
  padding-bottom: 32px;
  font-family: PingFangSC-Regular;
  color: #384a5f;
  line-height: 24px;
}

.Enter-EnterBtnBox_item {
  //border: 1px solid blue;
  //background: #eaf6ff;
  background: #e8eef3;
  //margin-bottom: 40px;
}

.noticeTitle {
  position: fixed;
  top: 9vh;
  padding: 70px 0 40px;
  line-height: 28px;
  font-weight: 700;
  font-family: PingFangSC-Medium;
  font-size: 28px;
  color: #021122;
  line-height: 18px;
  left: 130px
}

.title-container {
  //text-align: center;
  //margin-bottom: 20px;
  //border: 3px solid #ff0073;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background: #188ffd; /* 根据需要设置背景色 */
  z-index: 1000; /* 确保它在页面其他内容的上方 */

}
.title {
  //border: 1px solid blue;
  //width: 100%;
  //height: 50px;
  //margin-left: 28%;
  //display: flex;
  //justify-content: center; /* 垂直居中所有子元素 */
  //align-items: center;
  //height: 50px;
}

.red-hover:hover {
  color: rgba(24, 70, 140, 0.99); /* 鼠标悬停时文本变为红色 */
}

.img-style {
  position: fixed;
  left: 1px;
}

</style>

