<template>
  <div class="loginpage">
    <v-header-login :curlogin="true"/>
    <div class="login-wrap header_m_top">
      <div class="ms-login-box">
   <div class="ms-login"  v-if="login_status == 0">
            <div class="ms-title">E淘供货商平台</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input size="medium" v-model="ruleForm.username" placeholder="用户账号">
                        <el-button slot="prepend" class="iconstyle el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" class="padsswordBox" v-show="!isYes">
                    <el-input size="medium" type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                        <el-button slot="prepend" class="iconstyle el-icon-lock"></el-button>
                    </el-input>
                    <span class="statusImg" @click="isYes=!isYes"><img src="@/assets/img/no.png" alt=""></span>
                </el-form-item>
                <el-form-item prop="password" class="padsswordBox" v-show="isYes">
                    <el-input size="medium" type="text" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                        <el-button slot="prepend" class="iconstyle el-icon-lock"></el-button>
                    </el-input>
                    <span class="statusImg" @click="isYes=!isYes"><img src="@/assets/img/yes.png" alt=""></span>
                </el-form-item>
                <div class="login-btn">
                    <el-button size="medium" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
                 <div class="remember">
                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                  </div>
                <p class="login-tips" @click="changePage(1)">忘记密码</p>
            </el-form>
        </div>


        <div class="ms-login" v-else-if="login_status == 1">
            <div class="ms-title">找回密码</div>
            <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input size="medium" v-model="ruleForm2.username" placeholder="用户账号" @blur="getPhone(ruleForm2.username)">
                        <el-button slot="prepend" class="iconstyle el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input size="medium" placeholder="已绑定的手机号" v-model="ruleForm2.phone" :disabled="true">
                        <el-button slot="prepend" class="iconstyle el-icon-mobile-phone"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input size="medium" type="nember" placeholder="请输入验证码" v-model="ruleForm2.code" @keyup.enter.native="findPassword('ruleForm2')">
                        <el-button slot="prepend" class="iconstyle el-icon-unlock"></el-button>
                        <span slot="append" v-show="showCount" class="v_code" @click="getCode(ruleForm2.username,ruleForm2.phone)">获取验证码</span>
                        <span slot="append" v-show="!showCount" class="v_code">{{count}} s</span>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" size="medium" @click="findPassword('ruleForm2')">确认</el-button>
                </div>
                <p class="login-tips" @click="changePage(0)">返回登录</p>
            </el-form>
        </div>
        <div class="ms-login" v-else>
            <div class="ms-title">新密码</div>
            <el-form :model="ruleForm3" :rules="rules" ref="ruleForm3" label-width="0px" class="ms-content">
              <el-form-item>
                <span v-model="ruleForm3.username" class="account_name">账号：{{ruleForm3.username}}</span>
              </el-form-item>
              <el-form-item prop="newPassword" class="padsswordBox" v-show="!isYesnews">
                  <el-input size="medium" type="password" v-model="ruleForm3.newPassword" placeholder="请输入新密码">
                      <el-button slot="prepend"  class="iconstyle el-icon-lock"></el-button>
                  </el-input>
                  <span class="statusImg" @click="isYesnews=!isYesnews"><img src="@/assets/img/no.png" alt=""></span>
              </el-form-item>
              <el-form-item prop="newPassword" class="padsswordBox" v-show="isYesnews">
                  <el-input size="medium" type="text" v-model="ruleForm3.newPassword" placeholder="请输入新密码">
                      <el-button slot="prepend"  class="iconstyle el-icon-lock"></el-button>
                  </el-input>
                  <span class="statusImg" @click="isYesnews=!isYesnews"><img src="@/assets/img/yes.png" alt=""></span>
              </el-form-item>
              <el-form-item prop="okPassword" class="padsswordBox" v-show="!isYescomfirm">
                  <el-input size="medium" type="password" placeholder="再次输入新密码" v-model="ruleForm3.okPassword" @keyup.enter.native="setPassword('ruleForm3')">
                      <el-button slot="prepend"  class="iconstyle el-icon-lock"></el-button>
                  </el-input>
                  <span class="statusImg" @click="isYescomfirm=!isYescomfirm"><img src="@/assets/img/no.png" alt=""></span>
              </el-form-item>
              <el-form-item prop="okPassword" class="padsswordBox" v-show="isYescomfirm">
                  <el-input size="medium" type="text" placeholder="再次输入新密码" v-model="ruleForm3.okPassword" @keyup.enter.native="setPassword('ruleForm3')">
                      <el-button slot="prepend"  class="iconstyle el-icon-lock"></el-button>
                  </el-input>
                  <span class="statusImg" @click="isYescomfirm=!isYescomfirm"><img src="@/assets/img/yes.png" alt=""></span>
              </el-form-item>
              <div class="login-btn">
                  <el-button size="medium" type="primary" @click="setPassword('ruleForm3')">确认</el-button>
              </div>
              <p class="login-tips" @click="changePage(0)">返回登录</p>
            </el-form>
        </div>
         </div>
    </div>
    <el-footer>
      <v-footer :login="true"></v-footer>
    </el-footer>
    <div class="exshortbtn" v-if="isPC">
        <!-- <router-link class="alink" to="exshort">
          桌面快捷方式
          </router-link> -->
          <a class="alink"
          download="快捷方式"
          href="https://img.edsmall.com/ROOT/ETao/resource/E%E6%B7%98%E4%BE%9B%E8%B4%A7%E5%95%86%E6%A1%8C%E9%9D%A2%E5%BF%AB%E6%8D%B7%E6%96%B9%E5%BC%8F.zip">
          桌面快捷方式</a>
    </div>
  </div>
</template>

<script>
import vHeaderLogin from '@/components/HeaderLogin'
import vFooter from '@/components/Footer'
import { checkPC } from '../utils/utils';
  const TIME_COUNT = 60; //更改倒计时时间
    export default {
      name:'login',
        data(){
            return {
              checked:true,
                isYes:false,
                isYesnews:false,
                isYescomfirm:false,
                showCount: true,  // 初始启用按钮
                count: '',   // 初始化次数
                timer: null,
                login_status:0,
                ruleForm: {
                    username: '',
                    password: ''
                },
                ruleForm2: {
                    username: '',
                    phone: '',
                    code: ''
                },
                ruleForm3: {
                    username: '',
                    code:'',
                    newPassword: '',
                    okPassword: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
//                  phone: [
//                      { required: true, message: '请输入手机号码', trigger: 'blur' },
//                      { pattern: /^[1]([3-9])[0-9]{9}$/,message: '请输入正确的手机号码',trigger: 'blur'}
//                  ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    okPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                },
                isPC:　false
            }
        },
        components:{
          vFooter,vHeaderLogin
        },
        mounted () {
          this.isPC = checkPC()
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/account/login',{
                          username:this.ruleForm.username,
                          password:this.ruleForm.password
                        }).then((res)=>{
                          if(res.data.code==200){
                            var data=res.data.data;
                            this.$axios.defaults.headers.common['Authorization'] = data.token;
                             localStorage.setItem('info',JSON.stringify(data));
                             localStorage.setItem('priceformulaId',data.priceformulaId||null)
                             localStorage.setItem('firstTan',false);
                            this.$router.push('/');
                          }else{
                            this.$message.error(res.data.message);
                          }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //
            setPassword(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                      if(this.ruleForm3.newPassword!=this.ruleForm3.okPassword){
                        this.$message.error("新密码与再次输入的新密码不一致");
                        return;
                      }
                        this.$axios.post('/account/resetPwd/forget',{
                          account:this.ruleForm3.username,
                          code:this.ruleForm3.code,
                          newPwd:this.ruleForm3.newPassword,
                          reNewPwd:this.ruleForm3.okPassword,
                        }).then((res)=>{
                          if(res.data.code==200){
                            this.$alert('修改成功, 去登录', '提示', {
                              type: 'success'
                            }).then(() => {
                              this.login_status=0;
                            }).catch(() => {
                              this.$message({
                                type: 'info',
                                message: '已取消'
                              });
                            });
                          }else{
                            this.$message.error(res.data.message);
                          }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            findPassword(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/account/resetPwd/verify',{
                          account:this.ruleForm2.username,
                          code:this.ruleForm2.code
                        }).then((res)=>{
                          if(res.data.code==200){
                            this.login_status=2;

                            this.ruleForm3.username=res.data.data.account;
                            this.ruleForm3.code=res.data.data.code;
                          }else{
                            this.$message.error(res.data.message);
                          }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            changePage(status){
              this.login_status=status;
            },
            getPhone(account){
              this.$axios.post('/account/phone',{
                account:account
              }).then((res)=>{
                if(res.data.code==200){
                    this.ruleForm2.phone=res.data.data.phone;
               }
              })
            },
            send(){
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.showCount = false;
                    this.timer = setInterval(() => {
                      if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                      } else {
                        this.showCount = true;
                        clearInterval(this.timer);  // 清除定时器
                        this.timer = null;
                      }
                    }, 1000)
                  }
            },
            getCode(account,phone){
              if(account && phone){
                this.$axios.post('/account/resetPwd/verifyCode',{
                  account:account
                }).then((res)=>{
                  if(res.data.code==200){
                    this.$message.success('发送成功');
                    this.send();
                  }
                })
              }else{
                this.$message.error('用户账号不正确或账号无绑定手机号');
              }
            },
            gopages(){
              this.$router.push({
                path:'/exshort'
              })
            }
        },

    }
</script>

<style lang="scss" scoped>
.exshortbtn{
  position: fixed;
  left: 78%;
  top: 45vw;
  width: 110px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 4px;
  background-color: #fab674;
  .alink{
    display: block;
    color: #666;
  }
}
/deep/ .el-footer{
  padding: 0;
  background-color: #fff;
}
/deep/ .el-input-group__prepend .iconstyle{
  color: #f60;
  font-size: 18px;
}
/deep/ .el-button--primary {
     background-color:#f60;
     border-color: #f60;
}
  .padsswordBox{
    position: relative;
    .statusImg{
      position: absolute;
      top:4px;
      right: 10px;
      display: block;
      cursor: pointer;
    }
  }
  .account_name{
    color: #14A4FF;
  }
  .v_code{
    color: #14A4FF;
    cursor: pointer;
  }
.loginpage{
  background-color: #fff;

}


    .login-wrap{
        position: relative;
        width:100vw;
        height:45vw;
        background-color: #ccc;
        background-image: url(../assets/img/login-bg.png);
        background-size: 100% 100%;
        // height: 866px;
        // height: calc(100vh - 130px);
    }
    .ms-title{
        width:100%;
        line-height: 100px;
        // text-align: center;
        font-size:36px;
        color: #f60;
        color: #fff;
        padding-left: 50px;
        box-sizing: border-box;

        // border-bottom: 1px solid #f60;
    }
    .ms-login-box{
       position: absolute;
        left:70%;
        top:50%;
        width:450px;
        // height: 100%;
        margin:-190px 0 0 -175px;
        border-radius: 10px;
       background: rgba(#FE8E21, 0.5);
    }
    .ms-login{
        // position: absolute;
        // left:70%;
        // top:50%;
        width:420px;
        // height: 60%;
        margin: 15px auto;
        // margin:-190px 0 0 -175px;
        border-radius: 10px;
        background: rgba(255,255,255, 0.3);
        // background: rgba(#f60, 0.8);
        // background: #FF5400;
        // opacity:0.7;
        overflow: hidden;
    }
    .ms-content{
        padding: 0px 50px;
    }
    .login-btn{
        text-align: center;

    }
    .login-btn button{
        width:100%;
        height:40px;
        margin-bottom: 10px;
        // margin-top: 20px;
    }
    .remember{display: inline-block;
    .el-checkbox__label{
       color:#666;
    }}
    .login-tips{
        font-size:14px;
        line-height:19px;
        color:#666;
        float: right;
        margin-bottom: 40px;
        cursor: pointer;
    }
    .el-form-item--small.el-form-item{
      margin-bottom: 30px;
    }
    #app{
        overflow: initial !important;
    }
</style>
