<template>
  <div id="firm">
    <el-row>
      <el-col :span="24" class="firm" :style="'background: url(' + loginBei + ')no-repeat center center;'">
        <el-col :span="24" class="firmTop">
          <div class="w_1200">
            <img :src="pic" />
            <span>智慧就业企业登录</span>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="w_1200">
            <el-col :span="8" class="firmRight" v-if="loginType === 0">
              <el-col :span="20" class="firmRightTop">
                <span>企业登录<span style="color: #ff4500;">(建议您使用谷歌浏览器)</span></span>
              </el-col>
              <el-col :span="4" class="el-icon-full-screen" style="zoom:1.5" @click.native="loginType = 1"> </el-col>
              <el-col :span="24">
                <el-form :model="form" ref="form">
                  <el-form-item prop="mobile">
                    <el-input placeholder="用户名（手机号码）" prefix-icon="el-icon-user-solid" v-model="form.mobile"></el-input>
                  </el-form-item>
                  <el-form-item prop="mobile">
                    <el-input placeholder="密码" prefix-icon="el-icon-lock" v-model="form.passwd" show-password></el-input>
                  </el-form-item>
                  <el-form-item prop="mobile" class="firmRightName">
                    <el-col :span="16">
                      <el-input placeholder="验证码" prefix-icon="el-icon-lock" v-model="verifyForm.code"></el-input>
                    </el-col>
                    <el-col :span="8" class="firmRightImg">
                      <verify v-model="verifyForm.code_id" ref="verifyPic"></verify>
                    </el-col>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="24" class="firmRightName firmRightBtn">
                <!-- <el-col :span="8"><el-checkbox v-model="checked">记住登陆账号</el-checkbox></el-col> -->
                <el-col :span="8">&nbsp;</el-col>
                <el-col :span="8"><el-button type="success" @click="toSubmit">登录</el-button></el-col>
                <el-col :span="8"><el-button type="success" @click="$router.push({ path: '/register' })">注册</el-button></el-col>
              </el-col>
              <el-col :span="24">
                <!-- <el-link type="danger" :underline="false" class="forget_pass" @click="dialogFormVisible = true">忘记登录密码?</el-link> -->
              </el-col>
            </el-col>
            <el-col :span="8" class="firmRight" v-else>
              <el-col :span="20" class="firmRightTop">
                <span>企业登录<span style="color: #ff4500;"></span></span>
              </el-col>
              <el-col :span="4" class="el-icon-s-platform" style="zoom:1.5" @click.native="loginType = 0"> </el-col>
              <el-col :span="24" style="text-align:center;">
                <span>微信扫码登录</span>
                <qrcode :qrcode="qrcode" @toReturn="toReturn"></qrcode>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="找回密码" :visible.sync="dialogFormVisible" width="30%" :center="true">
      <el-row>
        <el-col :span="24" class="forget">
          <el-form :model="lost" label-width="auto" label-position="left" :rules="rules" ref="lost">
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="lost.mobile" placeholder="必填"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="passwd">
              <el-input v-model="lost.passwd" placeholder="必填" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-col :span="10"><el-input v-model="lost.code" autocomplete="off" placeholder="必填"></el-input></el-col>
              <el-col :span="8"><verify-message :mobile="lost.mobile"></verify-message></el-col>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="1" style="text-align:center;">
          <span style="width: 1px;height: 80px; background: #e7e7e7;display: inline-block;text-align: center;"></span>
          <p style="padding: 5px 0;margin: 0;">或</p>
          <span style=" width: 1px;height: 80px;background: #e7e7e7;display: inline-block;"></span>
        </el-col>
        <el-col :span="7">
          <img :src="codes" width="184" height="190" />
          <p style="font-size:12px;padding:0 15px;">请用微信扫一扫并关注云校招企业服务号，免费获得更多校招服务</p>
        </el-col> -->
      </el-row>
      <template #footer>
        <el-row>
          <el-col :span="24">
            <el-button type="success" @click="toLost">提交</el-button>
          </el-col>
          <el-col :span="24">
            <el-button type="text" @click="dialogFormVisible = false">已有账号？去登录</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import qrcode from '@/components/qrcode.vue';
import verify from '@publics/src/components/verify.vue';
import verifyMessage from '@publics/src/components/verify-message.vue';
import { mapActions, mapState } from 'vuex';
const jwt = require('jsonwebtoken');

export default {
  name: 'firm',
  props: {},
  components: {
    qrcode,
    verify,
    verifyMessage,
  },
  data: () => ({
    pic: require('@/assets/head.jpg'),
    pic2: require('@/assets/download.png'),
    pic3: require('@/assets/validcode.png'),
    loginBei: require('@/assets/company.png'),
    qrcode: '',
    loginType: 0,
    input3: '',
    dialogFormVisible: false,
    checked: false,
    form: {},
    formLabelWidth: '60px',
    verifyForm: {},
    lost: {},
    rules: {
      mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      passwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
    },
  }),
  created() {
    this.initQrcode();
    this.enterListen();
  },
  computed: {},
  methods: {
    ...mapActions(['corpLogin', 'createConnection', 'getWxtoken', 'verifyOperation', `userOperation`]),
    toSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.submit();
          this.checkVerify();
        }
        return false;
      });
    },
    async checkVerify() {
      let result = await this.verifyOperation({ type: 'checkVerify', data: this.verifyForm });
      if (`${result.errcode}` === '0') {
        this.submit();
      } else {
        this.$message.error('验证码错误');
        this.$refs.verifyPic.toCreated();
      }
    },
    async submit(wxtoken) {
      let data = JSON.parse(JSON.stringify(this.form));
      if (this.loginType !== 0) {
        data = { wxtoken: wxtoken };
      }
      let result = await this.corpLogin({ type: this.loginType, data: data });
      this.$message({
        type: `${result.errcode}` === '0' ? 'success' : 'error',
        message: `${result.errcode}` === '0' ? '登录成功' : result.errmsg,
      });
      if (`${result.errcode}` === '0') {
        sessionStorage.setItem('token', result.data);
        let info = jwt.decode(result.data);
        sessionStorage.setItem('user', JSON.stringify(info));
        this.$router.push({ path: '/' });
      } else {
        this.$refs.verifyPic.toCreated();
      }
    },
    async initQrcode() {
      let result = await this.createConnection();
      this.$set(this, `qrcode`, result);
    },
    async toReturn(msg) {
      let result = await this.getWxtoken(this.qrcode);
      this.submit(result);
    },
    async toLost() {
      this.$refs.lost.validate(valid => {
        if (valid) {
          this.lostPw();
        }
        return false;
      });
    },
    async lostPw() {
      let result = await this.userOperation({ type: 'passwd', data: { info: { passwd: this.lost.passwd }, id: this.lost.mobile } });
      this.$message({
        type: `${result.errcode}` === '0' ? 'success' : 'error',
        message: `${result.errcode}` === '0' ? '修改成功' : result.errmsg,
      });
      if (`${result.errcode}` === '0') {
        this.form = {};
        this.dialog = false;
      }
    },
    enterListen() {
      var lett = this;
      document.onkeydown = function(e) {
        var key = window.event.keyCode;
        if (key == 13) {
          lett.toSubmit();
        }
      };
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
.firm {
  width: 100%;
  height: 100vh;
  background: #5dac81;
  background-size: cover;
}
.firmTop {
  width: 100%;
  height: 55px;
  background: #fff;
}
.firmTop img {
  width: 49.63px;
  height: 50px;
  float: left;
}

.firmTop span {
  line-height: 55px;
  font-size: 22px;
  float: left;
  margin-left: 4px;
}
.firmLeft {
  color: #fff;
  padding: 15% 0;
}
.firmLeft span {
  font-size: 40px;
  font-weight: 700;
}
.firmLeft h4 {
  font-size: 15px;
  color: #fff9;
}
.firmLeft p {
  font-size: 15px;
  color: #fff9;
}
.firmRight {
  width: 400px;
  padding: 30px 20px;
  position: absolute;
  top: 15%;
  right: 15%;
  border-radius: 8px;
  background: #fff;
  opacity: 0.9;
}
.firmRightTop {
  margin: 0 0 18px 0;
}
.firmRightName {
  margin: 0 0 5px 0;
}
/deep/.firmRightName .el-input__inner {
  height: 56px;
}
.firmRightImg {
  height: 56px;
  padding: 3px;
  border: 1px solid #d9ddd9;
  border-left: none;
}
.firmRightImg img {
  width: 100%;
  height: 47px;
}
.firmRightBtn {
  width: 100%;
  height: 44px;
  line-height: 44px;
}
.firmRightBtn .el-button {
  width: 99%;
  background: #44b549;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
/deep/.el-form-item {
  margin-bottom: 10px;
}
/deep/.el-form-item__label {
  text-align: left;
}
/deep/.forget .el-input__inner {
  height: 33px;
  border-radius: 0;
}
.forget {
  padding: 20px 0 0 0;
}
</style>
