<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="请输入企业名称"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="请输入登录密码"></el-input>
          </div>
          <div class="inputs">
            <el-input width="191px" class="small" placeholder="请输入验证码"></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="type='wjmm'">忘记密码</p>
            <p>没加入我们？现在就 <span @click="dialogVisible = true">注册</span></p>
          </div>
        </div>
        <div class="logoncont" v-if="type=='yzm'">
          <div class="inputs">
            <el-input placeholder="请输入手机号" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="短信验证码" class="hqyzm">
              <template slot="append">
                获取验证码
              </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="请输入手机号" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="短信验证码" class="hqyzm">
              <template slot="append">
                获取验证码
              </template>
            </el-input>
          </div>
          <div class="inputs">
            <el-input class="small" placeholder="请输入验证码"></el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </div>
          <div class="loginin" @click="type='tjmm'">下一步</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 placeholder="请输入密码"></el-input>
          </div>
          <div class="inputs">
            <el-input placeholder="请再次输入密码"></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>
    <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" :rules="rule" label-width="auto">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
              <el-button type="text" class="send-email" @click="getPhoneCode" v-if="codeShow">发送验证码</el-button>
              <el-button type="text" class="send-email" v-else>重新发送({{phoneCodeTime}}s)</el-button>
            </el-form-item>
            <el-form-item label="手机验证码" prop="code">
              <el-input v-model="form.code" placeholder="请输入6位动态验证码"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" 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="name">
              <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="设置密码" prop="password">
              <el-input v-model="form.password" placeholder="8-20字符"></el-input>
            </el-form-item>
            <el-form-item label=" 确认密码" prop="passwordCheck">
              <el-input v-model="form.passwordCheck" placeholder="请再次输入密码"></el-input>
            </el-form-item>
            <el-form-item label=" 邮箱" class="email-input" prop="email">
              <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>
    <footers />
  </div>
</template>

<script>
  import footers from '@/components/foots'
  //import { getSendRegisterCode } from '@/api/login.js'

  export default {
        components: {footers},
        data() {
          return {
            codeUrl:'',//图形验证码
            dialogVisible: false,
            agreeRegister: false,
            registerType: 1,
            form: {
              phone:"",
              code: "",
              sex: '',
              name: "",
              password: "",
              passwordCheck: "",
              email: "",
            },
            rule: {
              phone: [
                { required: true, message: '请输入手机号', trigger: 'change' }
              ],
              code: [
                { required: true, message: '请输入手机验证码', trigger: 'change' }
              ],
              sex: [
                { required: true, message: '请输入联系人姓名', trigger: 'change' }
              ],
              name: [
                { required: true, message: '请输入性别', trigger: 'change' }
              ],
              password: [
                { required: true, message: '请输入设置密码', trigger: 'change' }
              ],
              passwordCheck: [
                { required: true, message: '请输入确认密码', trigger: 'change' }
              ],
              email: [
                { required: true, message: '请输入邮箱', trigger: 'change' }
              ],
            },
            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' }
              ],
            },
            phoneCodeTime: 60,
            codeShow : true,
            timer: null,

            type:"yzm",//登录方式 密码：mima 验证码：yzm 忘记密码：wjmm 提交密码：tjmm
            yzmparam:{
              phone:'',
              code:''
            } ,
            mimaparam:{
              name:'',
              pwd:'',
              code:''
            },
            wjparam:{
              name:'',
              pwd:'',
              code:'',
              code1:''
            },
            resetparam:{
              pwd:'',
            }
          };
        },
    computed: {
    },
    mounted() {
          // this.getCode()
     },
    watch:{
      type(val){
        this.cleardata()
      }
    },
    methods: {
      //清空填写的登录数据
      cleardata(){

      },
      //登录
      login(){},
      //验证码登录
      yzmlogin(){},
      //重置密码
      resetpwd(){},
      //获取验证码
      getCode(){
        this.getYZMimage().then(res=>{
          this.codeUrl = res.data.imag
        })
      },
      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;
      },

      //获取手机验证码
      getPhoneCode() {
        console.log(111111)
        if (!this.timer) {
          console.log(222)
          this.codeShow = false;
          this.phoneCodeTime = 60
          this.timer = setInterval(() => {
            if (this.phoneCodeTime > 0 && this.phoneCodeTime <= 60) {
              this.phoneCodeTime--;
            } else {
              this.codeShow = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        
        let param = {
          phone: this.form.phone
        }
        //getSendRegisterCode(param).then(res => {
        //  //if (res.code == 200) {
         
        //  //}
        //})
      //  axios.post('http://139.9.157.49:8806/prod-api//sms/sendRegisterCode', param).then(function (response) {
      //    console.log(response);
      //  })
      //    .catch(function (error) {
      //      console.log(error);
      //    });
      }
    }
  }
</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;
        }
      }

      .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>
