<template>
  <div class="updatePsd">
    <div class="updatePsd-content">
      <div class="updatePsdContent-left">
        <div class="logimg">
          <img src="http://xyqbui.lkbang.net/image/logo99.png" />
        </div>
      </div>
      <div class="updatePsdContent-right">
        <div class="logo">
          <img src="http://xyqbui.lkbang.net/image/log.jpg" />
          <h3>首次登录请修改密码</h3>
        </div>
        <div class="updatePsd_content">
          <Form ref="formInline" :model="formInline" class="formcontent">
            <FormItem class="formitemcontent">
              <Input type="password" v-model="formInline.password" placeholder="Password" class="wordStyle2" @on-change="verification" size="large">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
              <span style="color:Grey;margin-left:30px" v-show="fistcontent">4-20位且不得与默认密码相同</span>
            </FormItem>
            <FormItem style="margin-top:-20px" class="formitemcontent">
              <Input type="password" v-model="formInline.passwordTwo" placeholder="Password" class="wordStyle2" @keyup.enter.native="loginT" size="large">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
              <span style="color:Grey;margin-left:30px;color:red" v-show="twocontent">{{ twocontentmessage }}</span>
            </FormItem>
          </Form>
          <Button type="primary" style="height:40px;width:100%;border-radius: 5px;background:rgb(0, 146, 255);color:rgb(255,255,255);font-size:18px;margin-top:10px" @click="loginT">登录</Button>
        </div>
        <div class="copy">
          <p>量化派为你提供全程服务</p>
          <p>量化派版权所有</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { updatePsd } from '../../api/login.server.js';
export default {
  data() {
    return {
      formInline: {
        passwordTwo: '',
        password: '',
      },
      fistcontent: true,
      twocontent: false,
      twocontentmessage: '',
      channelarr: [],
      Massage: '',
      ISIDMIN: '',
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      });
    },
    loginT() {
      const params = {
        userCode: this.$route.params.userCode,
        password: this.formInline.password,
        confirmPassWord: this.formInline.passwordTwo,
      };
      if (this.formInline.passwordTwo !== this.formInline.password) {
        this.twocontentmessage = '输入密码不一致,请重新输入';
        this.twocontent = true;
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
        return;
      }
      if (this.formInline.passwordTwo.length < 4 || this.formInline.password.length < 4) {
        this.twocontentmessage = '请输入4-20位密码';
        this.twocontent = true;
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
        return;
      }
      if (this.formInline.password.length > 20) {
        this.twocontentmessage = '请输入4-20位密码';
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
        return;
      }
      if (this.formInline.password.length < 4) {
        this.twocontentmessage = '请输入4-20位密码';
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
        return;
      }
      if (this.formInline.password.length == 0) {
        this.twocontentmessage = '密码不能为空';
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
        return;
      }
      if (this.formInline.passwordTwo.length == 0) {
        this.twocontentmessage = '请输入相同的确认密码';
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
        return;
      }
      updatePsd(params).then(res => {
        if (res.data.success == true) {
          this.ISIDMIN = res.data.body;
          localStorage.setItem('isADMIN', JSON.stringify(this.ISIDMIN));
          localStorage.setItem('token', res.data.body.token);
          this.$router.replace({ name: 'allResume' });
        }
        if (res.data.success == false) {
          this.Massage = res.data.body.message;
          this.twocontent = true;
          this.twocontentmessage = this.Massage;
          setTimeout(() => {
            this.twocontent = false;
          }, 3000);
        }
      });
    },
    verification() {
      if (this.formInline.password == 123456) {
        this.twocontentmessage = '输入密码与初始密码相同，请重新输入';
        setTimeout(() => {
          this.twocontent = false;
        }, 3000);
      }
      if (this.formInline.password.length == 0) {
        this.fistcontent = true;
      }
      if (this.formInline.password == '') {
        this.fistcontent = true;
      }
      if (this.formInline.password.length < 4) {
        this.fistcontent = true;
      }
      if (this.formInline.password.length > 4) {
        this.fistcontent = false;
      }
      if (this.formInline.password.length > 20) {
        this.fistcontent = true;
      }
    },
  },
};
</script>
<style scoped>
.updatePsd {
  width: 100%;
  height: 100%;
}
.updatePsd-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.updatePsdContent-left {
  float: left;
  width: 70%;
  height: 100%;
}
.updatePsdContent-right {
  float: left;
  width: 30%;
  height: 858px;
  background: #ffffff;
}
.logo {
  width: 70%;
  height: 180px;
  margin-top: 160px;
  /* border: 1px solid black; */
  margin-left: 15%;
}
.logo img {
  width: 50%;
  height: 50%;
  /* margin-left: 30px */
}
.logo h3 {
  font-size: 30px;
  color: black;
  margin-top: 0px;
}
.updatePsd_content {
  height: 200px;
  width: 70%;
  margin-left: 15%;
}
.copy {
  width: 100%;
  height: 100px;
  margin-top: 160px;
  margin-left: 7%;
}
.copy p {
  font-size: 17px;
  color: #999;
}
.wordStyle2 {
  width: 100%;
}
.formcontent {
  height: 130px;
}
.formitemcontent {
  height: 60px;
}
</style>
