<template>
  <div class="main">
    <div class="video">
      <video autoplay loop muted class="login-video">
        <source src="@/assets/background.mp4" type="video/mp4">
      </video>
    </div>
    <div :class="{'registration-head':agreeRegister}">
      <img class="logo" src="@/assets/images/logo.png">
      <img class="righttop" src="@/assets/images/ico01.png">
    </div>
    <div class="login">
      <img class="logintop" src="@/assets/images/ico02.png">
      <h3>智慧供应商管理系统</h3>
      <div class="loginbox">
        <div class="logionhead" v-if="type !='tjmm' && type!='wjmm'">
          <div class="title" :class="{'on': type=='yzm'}" @click="type='yzm'">验证码登录</div>
          <div class="title" :class="{'on': type=='mima'}" @click="type='mima'">密码登录</div>
        </div>
        <!--密码登录 -->
        <div class="logoncont" v-if="type=='mima'">
          <div class="inputs">
            <el-input placeholder="请输入账号" v-model="mimaparam.userName"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="请输入登录密码" show-password v-model="mimaparam.password"></el-input>
          </div>
          <div class="inputs">
            <el-input width="191px" class="small" placeholder="请输入验证码" v-model="mimaparam.code"></el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </div>
          <div class="loginin" @click="login">登录</div>
          <div class="loginzc">
            <p @click="wjmm">忘记密码</p>
            <p>没加入我们？现在就 <span @click="dialogVisible = true">注册</span></p>
          </div>
        </div>
        <!--        验证码登录-->
        <div class="logoncont" v-if="type=='yzm'">
          <div class="inputs">
            <el-input placeholder="请输入手机号" v-model="yzmparam.phone" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="短信验证码" v-model="yzmparam.smsCode" class="hqyzm">
              <template slot="append"><span @click="getSmsCode(1)">{{ timer }}</span></template>
            </el-input>
          </div>
          <div class="loginin" @click="yzmlogin">登录</div>
          <div class="loginzc" style="justify-content:center">
            <p>没加入我们？现在就 <span @click="dialogVisible = true">注册</span></p>
          </div>
        </div>
        <!--        忘记密码-->
        <div class="logoncont" v-if="type=='wjmm'">
          <div class="inputs">
            <el-input placeholder="请输入手机号" v-model="resetparam.phone" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="短信验证码" v-model="resetparam.smsCode" class="hqyzm">
              <template slot="append"><span @click="getSmsCode(2)">{{ timer }}</span></template>
            </el-input>
          </div>
          <div class="inputs">
            <el-input class="small" v-model="resetparam.code" placeholder="请输入验证码"></el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </div>
          <div class="loginin" @click="yzSmscode">下一步</div>
          <div class="loginzc" style="justify-content: center">
            <p><span @click="type='mima'">返回登录</span></p>
          </div>
        </div>
        <!--        提交重置的密码-->
        <div class="logoncont" v-if="type=='tjmm'">
          <div class="inputs">
            <el-input v-model="resetparam.passWord" placeholder="请输入密码" show-password></el-input>
          </div>
          <div class="inputs">
            <el-input v-model="resetparam.passWord1" placeholder="请再次输入密码" show-password></el-input>
          </div>
          <div class="loginin" @click="resetpwd">提交</div>
          <div class="loginzc" style="justify-content: center">
          </div>
        </div>
      </div>
      <img class="loginbot" src="@/assets/images/ico03.png">
    </div>
    <el-dialog title="注册须知" custom-class="registration-policy" :visible.sync="dialogVisible" width="670px" close-on-click-modal>
      <div>
        招标投标交易平台服务条款
        <br>
        <br>本协议阐述之条款和条件(以下合称“条款”)适用于您使用招标投标交易平台（简称：交易平台），招标投标交易平台依据以下条款为您提供所享有的服务，请仔细阅读并遵守。
        <br>
        <br>一、产品及服务：
        <br>
        <br>凡在交易平台注册并通过交易平台认证的企业、组织和个人即视为交易平台的用户，并同意按本服务条例的规定享受权利、履行义务。
        <br>
        <br>二、交易平台登记与认证服务
        <br>
        <br>依据中华人民共和国相关法律，凡具有民事权利能力和民事行为能力，依法独立享有民事权利和承担民事义务的企业、组织和个人，皆有资格申请成为交易平台的用户。
        <br>
        <br>有意使用交易平台所提供产品和服务的企业、组织和个人，均须接受和遵守交易平台的有关规定进行招投标登记或认证； 招投标登记有效期为一年，诚信认证有效期与使用交易平台产品时限相关。
        <br>
        <br>(一)交易平台登记
        <br>
        <br>1.为保证招投标活动的"公开、公平、公正"，保障招投标工作的正常运转，使用交易平台产品/平台从事招投标活动或与之相关工作的用户，均须进行招投标登记(免费) 方可获取相应业务操作资格。
        <br>
        <br>2.交易平台登记用户包括采购商、供应商、招标机构。均采取"网上申请、在线填写、信息核实"的办法，并实行年检制度。
        <br>
        <br>(二)诚信认证
        <br>
        <br>1.诚信认证是交易平台用户服务管理的重要组成部分,购买交易平台相关产品和服务的用户可申请享有诚信认证服务。
        <br>
        <br>2.根据诚信认证的有关要求，申请认证的用户须向交易平台提供包括但不限于《用户申请表》（加盖单位公章）、工商营业执照复印件（加盖单位公章）等资料。通过认证 的用户须执行年检制度。
        <br>
        <br>3.通过认证的用户，将在交易平台网内或站内获得相应标识，并优先享有交易平台相应服务。同时，可以在自己的宣传资料以及其他对外活动中，展示和体现本单位为诚信认证用户的信息与内容，并可在自己的网页及文件上使用相关登记或认证标志。
        <br>
        <br>(三)交易平台年检
        <br>
        <br>为创造安全稳定的电子商务环境，交易平台对招投标登记用户实行一年一度的年检审核制度。
        <br>
        <br>1、在用户登记有效期到期前一个月，交易平台将以信息提醒、邮件通知或电话通知等方式提醒用户有关年检事宜。
        <br>
        <br>2、年检是对招投标登记信息的再次审核，申请年检的流程与招投标登记流程一致。
        <br>
        <br>3、通过年检的用户，其服务有效期会以本次年检时间为准顺延一年；逾期不进行年检的用户，交易平台将停止其在交易平台旗下上的相关业务及相关产品服务。
        <br>
        <br>三、交易平台用户账号管理规定
        <br>
        <br>1、注册成功的用户将拥有一个通用的交易平台账号，并免费使用规定内的产品和服务。若用户需使用其他产品或服务，还须通过资质认证、个人实名认证或其他注册信息核实程序。
        <br>
        <br>2、用户可以更改账号密码。用户应对账号和密码的安全性，以及利用该账号所从事的一切活动或行为承担全部责任。用户若发现账号被非法盗用或存在其他安全漏洞，应立即通知交易平台客户中心。
        <br>
        <br>3、未经交易平台书面许可，用户不得将获得的交易平台用户名/账号、密码、相关服务以及获得的信息出售、转售、赠与、转借、租供给第三方或用于其它商业性用途。否则，由此造成的一切后果和责任由用户承担；同时，交易平台有权单方面中止为其提供的服务。
        <br>
        <br>四、信息及用户资料权属
        <br>
        <br>1、交易平台对其产品和有关信息享有所有权和版权。未经交易平台书面许可，用户不得擅自利用，将其出售、转售或用于其他商业用途。
        <br>
        <br>1)如发现有用户利用交易平台产品所提供的服务和信息用于商业用途并与交易平台形成竞争或损害交易平台利益的，交易平台有权单方终止其用户资格，剩余服务期限费用不予返还。
        <br>
        <br>2)如交易平台认为申请注册的用户与交易平台形成同业竞争并对交易平台的正常运营造成损害时，可拒绝其申请和注册。
        <br>
        <br>2、用户在此授予交易平台根据运营交易平台及服务用户所需无偿使用用户提交的"用户资料"的权利，即交易平台有权（全部或部分地）使用、复制、发布、翻译、分发、执行和展示"用户资料"或制作其派生作品，以任何形式、媒体或技术将"用户资料"纳入其他作品内；如用户认为该等使用行为损害用户的合法权益，并就已经发生的使用行为提出异议，交易平台应停止继续使用但不承担撤销未实际发生损害的行为的责任及任何赔偿责任，并有权判断是否应终止交易平台与该用户的服务关系,剩余服务期限费用无息返还。
        <br>
        <br>五、用户法律责任
        <br>
        <br>1、用户应确保其在注册、认证、收发邮件、使用服务等过程中提交给交易平台的"用户资料"的合法性与真实性，并对此承担全部责任。
        <br>
        <br>2、用户应对其在交易平台及产品上发布的任何信息承担全部责任。
        <br>
        <br>3、用户应遵守国家相关法律和规定，不得利用交易平台、产品从事任何有违法律和社会公德的活动；不得传输任何非法的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的，淫秽的等信息；不得传输助长国内不利条件和涉及国家安全的资料；不得干扰交易平台的服务秩序；否则，交易平台有权取消其账号，相关的系统记
        录有可能作为证据提交司法机关。
        <br>
        <br>4、用户不得将帐号、密码及相关服务销售、转让、或赠与任何第三方，由此造成的一切后果和责任均由用户承担。如遇以上情形，交易平台有权通过电话、邮件或传真方式 告知，经警告无效后交易平台有权停止服务，并有权单方终止对用户提供的服务。
        <br>
        <br>5、用户与其确定的参标供应商、中标供应商之间发生的纠纷，自行解决。
        <br>
        <br>六、免责条款
        <br>
        <br>1、由于自然灾害或不可抗力（如软件、系统服务设备维护、检修、基础电信业务经营者电信线路服务中止等）等原因导致网络无法访问或无法提供正常提供服务，交易平台不承担责任。
        <br>
        <br>2、用户应对从交易平台下载产品所提供服务而获得的任何信息的使用承担所有风险和责任。
        <br>
        <br>七、其它
        <br>
        <br>1、服务终止后，交易平台没有义务为用户保留原账号或与之相关的任何信息，或转发任何未曾阅读或发送的信息给用户或第三方。
        <br>
        <br>2、交易平台有权对本服务协议的"条款"进行变更或更改。如"条款"有任何变更，交易平台将在上刊载通知。通知发布后，用户有权根据需要选择接受新条款或中止使用"服务"。通知生效后，若用户仍继续使用服务，则视为接受新"条款"。
        <br>
        <br>本条例解释权归交易平台所有。
      </div>
      <div slot="footer">
        <el-button class="searchBtn" type="primary" style="width: 90px;" @click="goRegister" >同意</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="注册" custom-class="registration" :modal="false" :visible.sync="agreeRegister" width="100vw" top="75px">
      <div>
        <div class="header">
          <el-steps :active="registerType" simple>
            <el-step title="填写注册人信息"></el-step>
            <el-step title="填写企业信息"></el-step>
            <el-step title="等待审核"></el-step>
          </el-steps>
          <!--<div><p>填写注册人信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
    <div><p>填写企业信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
    <div><p>等待审核</p><i class="el-icon-arrow-right el-icon--right"></i></div>-->
        </div>
        <div class="content">
          <template v-if="registerType == 1">
            <el-form ref="form" :model="form" label-width="auto">
              <el-form-item label="手机号码">
                <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                <el-button type="text" class="send-email">发送验证码</el-button>
              </el-form-item>
              <el-form-item label="手机验证码">
                <el-input v-model="form.code" placeholder="请输入6位动态验证码"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人姓名">
                <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item label="设置密码">
                <el-input v-model="form.password" placeholder="8-20字符"></el-input>
              </el-form-item>
              <el-form-item label=" 确认密码">
                <el-input v-model="form.passwordCheck" placeholder="请再次输入密码"></el-input>
              </el-form-item>
              <el-form-item label=" 邮箱" class="email-input">
                <el-input v-model="form.email" placeholder="请输入常用邮箱"></el-input>
              </el-form-item>
            </el-form>
            <div class="line-box"></div>
            <el-button type="primary" class="checkBtn" @click="registerType = 2">下一步</el-button>
          </template>
          <template v-if="registerType == 2">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
              <el-form-item label="公司名称" prop="companyName" class="left-title">
                <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
              </el-form-item>
              <el-form-item label="统一社会信用代码" prop="code">
                <el-input v-model="ruleForm.code" placeholder="请输入统一社会信用代码"></el-input>
              </el-form-item>
              <el-form-item label="法定代表人" prop="name" class="left-title more-left-title">
                <el-input v-model="ruleForm.name" placeholder="请输入法定代表人"></el-input>
              </el-form-item>
              <el-form-item label="注册资本" prop="amount">
                <el-input v-model="ruleForm.amount" placeholder="请输入注册资本"></el-input>
              </el-form-item>
              <el-form-item label="成立日期" prop="date" class="left-title">
                <el-date-picker v-model="ruleForm.date" type="date" placeholder="请输入成立日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="企业注册地" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择企业注册地">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="办公地址" prop="address" class="left-title">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入办公地址" v-model="ruleForm.address"
                  style="width: 670px;"></el-input>
              </el-form-item>
              <el-form-item label="企业简介" prop="detail" class="left-title">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入企业简介" v-model="ruleForm.detail" style="width: 670px;">
                </el-input>
              </el-form-item>
              <el-form-item label="营业执照扫描件" prop="detail" class="upload-image" style="margin-bottom: 34px;">
                <el-upload ref="upload" :auto-upload="false" :data="ruleForm" class="avatar-uploader" action="#" :show-file-list="false"
                  :on-success="handleAvatarSuccess" :on-change='changeUpload' :before-upload='beforeAvatarUpload'>

                  <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" style=" height: 100%;">
                  <div v-else>
                    <img src="@/assets/images/upload.png" />
                    <p>请上传营业执照扫描件</p>
                  </div>
                  <div slot="tip" class="el-upload__tip">文件大小在5MB以内，支持pnh\jpg\jif格式</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="法人代表身份证扫描件" prop="detail" class="upload-image" style="width: 375px; margin-bottom: 34px;">
                <el-upload ref="upload" :auto-upload="false" :data="ruleForm" class="avatar-uploader" action="#" :show-file-list="false"
                  :on-success="handleAvatarSuccess" :on-change='changeUpload' :before-upload='beforeAvatarUpload'>

                  <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" style=" height: 100%;">
                  <div v-else>
                    <img src="@/assets/images/upload.png" />
                    <p>请上传法人代表身份证扫描件</p>
                  </div>
                  <div slot="tip" class="el-upload__tip">文件大小在5MB以内，支持pnh\jpg\jif格式</div>
                </el-upload>
              </el-form-item>
            </el-form>

            <div class="line-box"></div>
            <div class="form-title">供应类型</div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
              <el-form-item label="供应类型选择" prop="code" style=" margin-bottom: 0;">
                <el-input v-model="ruleForm.code" placeholder="请选择供应类型选择"></el-input>
              </el-form-item>
            </el-form>
            <div class="line-box"></div>
            <div class="form-title">合作承诺函</div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
              <el-form-item label="合作承诺函" prop="code" style=" margin-bottom: 0;">
                <el-button type="primary" plain style="padding: 8px 11px;"><i class="el-icon-upload2"></i>上传</el-button>
                <el-button type="text">下载模板</el-button>
              </el-form-item>
            </el-form>
            <div class="line-box"></div>

            <el-button type="primary" class="checkBtn" @click="registerType = 3">提交审核</el-button>
            <div class="agreement">提交即表示已阅读并同意 <el-button type="text" style=" padding: 0;">《服务协议》</el-button>和<el-button type="text"
                style="margin-left: 0; padding: 0;">《隐私协议》</el-button>
            </div>
          </template>
          <template v-if="registerType == 3">
            <div class="register-results">
              <img src="@/assets/images/successbg.png" />
              <p>供应商入驻提交成功</p>
              <span>您的认证申请已成功提交，审核结果将会在24小时内短信通知，请耐心等待。</span>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
    <footers />
  </div>
</template>

<script>
import footers from '@/components/foots';
import { login, smsLogin, validateSmsCode, validateCaptcha, forgotPassword, captchaImage, checkUser } from "./api/login";
export default {
  components: { footers },
  data() {
    return {
      codeUrl: '',//图形验证码
      uuid: '',//图形验证码唯一凭证
      dialogVisible: false,
      agreeRegister: false,
      registerType: 2,
      form: {
        phone: "",
        code: "",
        sex: 0,
        name: "",
        password: "",
        passwordCheck: "",
        email: "",
      },
      ruleForm: {
        companyName: "",
        code: "",
        name: "",
        date: "",
        amount: "",
        region: "",
        address: "",
        detail: "",
        imageUrl: ''
      },
      rules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入法定代表人', trigger: 'change' }
        ],
        date: [
          { required: true, message: '请输入成立日期', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入注册资本', trigger: 'change' }
        ],
        region: [
          { required: true, message: '请选择企业注册地', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入办公地址', trigger: 'change' }
        ],
        detail: [
          { required: true, message: '请输入企业简介', trigger: 'change' }
        ],
      },
      type: "mima",//登录方式 密码：mima 验证码：yzm 忘记密码：wjmm 提交密码：tjmm
      yzmparam: {
        phone: '',
        smsCode: ''
      },
      mimaparam: {
        userName: '',
        password: '',
        code: '',
        uuid: ''
      },
      resetparam: {
        phone: '',
        passWord: '',
        passWord1: '',
        code: '',
        smsCode: ''
      },
      timer: '获取验证码',//倒计时
    };
  },
  computed: {
  },
  mounted() {
    this.getCode();
  },
  watch: {
    type(val) {
      this.cleardata();
    }
  },
  methods: {
    //清空填写的登录数据
    cleardata() {

    },
    //登录
    login() {
      this.mimaparam.uuid = this.uuid;
      if (!(this.mimaparam.username || this.mimaparam.code || this.mimaparam.code)) {
        this.$message.error('账号、密码、验证码不能为空！');
        return false;
      }

      this.$store.dispatch("user/userLogin", this.mimaparam).then((res) => {
        this.toList();
      });

    },
    //验证码登录
    yzmlogin() {
      if (!(this.yzmparam.phone || this.yzmparam.smsCode)) {
        this.$message.error('账号、验证码不能为空！');
        return false;
      }
      smsLogin(this.yzmparam).then(res => {
        if (res.code == 200) {
          let token = res.token;
          this.$store.commit("user/SET_TOKEN", token);
          this.toList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //验证短信验证码、图形验证码
    yzSmscode() {
      if (!(this.resetparam.phone || this.resetparam.smsCode || this.resetparam.code)) {
        this.$message.error('账号、验证码不能为空！');
        return false;
      }
      let param = {
        phone: this.resetparam.phone,
        code: this.resetparam.smsCode
      };
      //校验短信验证码
      validateSmsCode(param).then(res => {
        if (res.code == 200) {
          let params = {
            uuid: this.uuid,
            code: this.resetparam.code
          };
          校验图形验证码;
          validateCaptcha(params).then(res => {
            if (res.code == 200) {
              this.type = 'tjmm';
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //重置密码
    resetpwd() {
      let pwd = this.resetparam.passWord;
      let pwd1 = this.resetparam.passWord1;
      if (pwd != pwd1) {
        this.$message.error('两次输入密码不一致');
      } else {
        //重置
        let param = { phone: this.resetparam.phone, passWord: this.resetparam.passWord };
        forgotPassword(param).then(res => {
          if (res.code == 200) {
            this.type = 'mima';
            this.getCode();
            this.$message({
              message: res.msg,
              type: 'success'
            });
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //获取验图形证码
    getCode() {
      captchaImage().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img;
        this.uuid = res.uuid;
      });
    },
    //获取手机验证码
    getSmsCode(type) {
      if (type == 1) {//短信登录
        if (this.yzmparam.phone)
          this.yzPohne(this.yzmparam.phone);
        else
          this.$message({
            message: '请输入手机号！',
            type: 'warning'
          });
      }
      if (type == 2) {//忘记密码
        if (this.resetparam.phone)
          this.yzPohne(this.resetparam.phone);
        else
          this.$message({
            message: '请输入手机号！',
            type: 'warning'
          });
      }
    },
    // 验证手机号发送验证码
    yzPohne(phone) {
      var param = {
        phone: phone,
        type: 1 //0:注册,1:短信登录/忘记密码
      };
      //验证账户发送短信
      checkUser(param).then(res => {
        if (res.code == 200) {
          this.getTimer();
        } else {
          this.$message.error(res.msg);
        }
      });

    },
    getTimer() {//倒计时
      let num = 60;
      var timers = setInterval(() => {
        if (num > 0) {
          num--;
          this.timer = num + 's重新发送';
        } else {
          clearInterval(timers);
          this.timer = '发送验证码';
          timers = null;
        }
      }, 1000);
    },
    wjmm() {
      this.type = 'wjmm';
      this.getCode();
    },
    //登录成功跳转
    toList() {
      this.$router.push("/home");
    },
    handleAvatarSuccess(res, file) {
      console.log("上传成功");
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },
    changeUpload: function (file) {
      let fileName = file.name;
      console.log(fileName);
      let regex = /(.jpg|.jpeg)$/;
      if (regex.test(fileName.toLowerCase())) {
        this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      console.log(isJPG);
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    goRegister() {
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  position: relative;
  height: 100%;
  width: 100%;
  .loginbox {
    margin-bottom: 24px;
    .logionhead {
      border-bottom: 1px solid #f0f0f0;
      text-align: center;
      margin-bottom: 32px;
      .title {
        font-size: 18px;
        color: #666;
        display: inline-block;
        margin: 0 20px;
        padding-bottom: 18px;
        cursor: pointer;
      }
      .title.on {
        color: #0081ff;
        position: relative;
      }
      .title.on::after {
        content: " ";
        width: 42px;
        height: 3px;
        background: #0081ff;
        border-radius: 1px 1px 1px 1px;
        position: absolute;
        bottom: 0;
        margin-left: -21px;
        left: 50%;
      }
    }
  }
  .loginzc {
    font-size: 12px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    padding: 0 52px 32px;
    > p {
      line-height: 20px;
      color: #999999;
      cursor: pointer;
      > span {
        cursor: pointer;
        color: #0081ff;
      }
    }
  }
  .registration-head {
    position: absolute;
    width: 100vw;
    height: 75px;
    background: #ffffff;
  }

  .login-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    source {
      width: 100%;
      height: 100%;
    }
  }

  .bot {
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .logo {
    position: absolute;
    left: 16px;
    top: 16px;
  }

  .righttop {
    position: absolute;
    right: 16px;
    top: 17px;
    z-index: 1;
  }

  .login {
    width: 426px;
    /*height: 451px;*/
    background: #ffffff;
    border-radius: 8px;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 61px;
    .logintop {
      position: absolute;
      left: 12px;
      top: 12px;
    }

    > h3 {
      font-size: 24px;
      font-weight: bold;
      color: #0081ff;
      text-align: center;
      margin-top: 60px;
      margin-bottom: 40px;
      line-height: 17px;
    }

    .inputs {
      margin-bottom: 24px;
      padding: 0 43px;

      ::v-deep .el-input__inner {
        width: 100%;
        height: 48px;
        border-radius: 8px;
        border: 1px solid #e3e3e3;
        text-indent: 16px;
        outline: none;
        font-size: 14px;
        padding: 0;
      }

      .hqyzm {
        position: relative;
        ::v-deep .el-input-group__append {
          cursor: pointer;
          width: 102px;
          padding: 0;
          display: block;
          position: absolute;
          top: 12px;
          right: 0;
          background: 0;
          border: 0;
          line-height: 24px;
          text-align: center;
          color: #0081ff;
          font-size: 14px;
          border-left: 1px solid #d8d8d8;
        }
      }
      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        color: #9e9e9e;
      }

      .small {
        width: 191px;
      }

      .login-code {
        float: right;
        width: 131px;
        height: 46px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #f1f1f1;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .loginin {
      width: 340px;
      height: 48px;
      background: #0081ff;
      border-radius: 4px;
      margin: 0 auto;
      line-height: 48px;
      font-size: 16px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }

    .loginbot {
      position: absolute;
      bottom: 32px;
      left: 169px;
    }
  }
}
/*注册样式*/
::v-deep .el-dialog.registration {
  height: calc(100% - 132px);
  overflow-y: auto;
  overflow-x: hidden;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 30px 0;

    .header {
      display: flex;
      justify-content: center;

      .el-steps {
        padding: 0;
        background: #ffffff;
        margin-left: -8px;

        .el-step__title {
          width: 226px;
          max-width: 226px;
          padding: 8px 0 8px 16px;
          background: #f2f2f2;
          height: 18px;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 18px;
        }

        .el-step__title.is-finish {
          font-weight: bold;
          color: #ffffff;
          background: #0081ff;
        }

        .el-step__title::before,
        .el-step__title::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          width: 0;
          height: 0;
        }

        .el-step__title::before {
          left: 0;
          border-top: 17px solid transparent;
          border-left: 8px solid #ffffff;
          border-bottom: 17px solid transparent;
          z-index: 9;
        }

        .el-step__title::after {
          right: -8px;
          border-top: 17px solid transparent;
          border-left: 8px solid #f2f2f2;
          border-bottom: 17px solid transparent;
        }

        .el-step__title.is-finish::after {
          right: -8px;
          border-top: 17px solid transparent;
          border-left: 8px solid #0081ff;
          border-bottom: 17px solid transparent;
        }

        .el-step:first-child .el-step__title::before,
        .el-step:last-child .el-step__title::after {
          display: none;
        }

        .el-step.is-simple {
          .el-step__arrow {
            display: none;
          }
        }

        .el-step__icon.is-text {
          display: none;
        }
      }
    }

    .content {
      .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 750px;
        margin: 24px auto;

        .el-form-item {
          margin-bottom: 16px;

          .send-email {
            position: absolute;
            right: 16px;
            padding: 0;
            padding-left: 16px;
            border-left: 1px solid #d8d8d8;
            margin: 12px 0;
          }
        }

        .el-input {
          width: 260px;

          input {
            height: 34px;
          }
        }

        .email-input .el-input {
          width: 668px;
        }
      }

      .form-title {
        width: 750px;
        height: 24px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        line-height: 24px;
        margin: 24px auto;
      }

      .line-box {
        position: relative;
        width: 100vw;
        height: 1px;
        background: #eeeeee;
      }

      .checkBtn {
        display: block;
        width: 178px;
        padding: 9px 20px;
        margin: 24px auto;
      }

      .agreement {
        width: 345px;
        height: 18px;
        font-size: 14px;
        color: #9e9e9e;
        line-height: 18px;
        margin: auto;
      }

      .company-detail {
        .el-input {
          width: 240px;
        }

        .upload-image {
          display: flex;
          flex-wrap: wrap;
          width: 300px;

          .el-form-item__label-wrap {
            margin-left: 0 !important;
          }

          .el-form-item__content {
            width: 287px;
            height: 176px;
            background: #f4f4f4;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            border: 1px solid #dcdcdc;
            margin-left: 0 !important;

            .avatar-uploader {
              height: 100%;

              .el-upload {
                width: 100%;
                height: 100%;

                div {
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  margin-top: 46px;
                }

                img {
                  width: 56px;
                }

                p {
                  margin: 16px;
                  width: 100%;
                  height: 18px;
                  font-size: 14px;
                  color: #999999;
                  line-height: 18px;
                }
              }

              .el-upload__tip {
                height: 18px;
                font-size: 14px;
                color: #9e9e9e;
                line-height: 18px;
                margin-left: 7px;
                margin-top: 16px;
              }
            }
          }
        }

        .left-title {
          .el-form-item__label-wrap {
            margin-left: 0 !important;
          }

          .el-form-item__content {
            margin-left: 79px !important;
          }
        }

        .more-left-title {
          .el-form-item__label-wrap {
            margin-left: -14px !important;
          }
        }
      }

      .register-results {
        width: 480px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 96px auto;

        img {
          width: 130px;
          height: 108px;
        }

        p {
          width: 100%;
          height: 21px;
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          line-height: 21px;
          text-align: center;
          margin: 32px 0 24px;
        }

        span {
          height: 18px;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 18px;
        }
      }
    }
  }
}
::v-deep .el-dialog.registration-policy {
  .el-dialog__body {
    height: 567px;
    overflow-y: auto;
    padding: 16px 16px 3px;
    margin: 10px 16px 0;
    background: #f9f9f9;
  }

  .el-dialog__footer {
    text-align: left;

    .el-button {
      padding: 9px 20px;
    }
  }
}
</style>
