<template>
  <div id="a-login">
    <h4 style="text-align: center;color: white;background: #00afff;margin: 0px;padding-top: 15px;padding-bottom: 15px; margin-bottom: 40px">自主授权登陆</h4>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" v-if="ruleForm.showone">
      <el-form-item label="税号" prop="nsrsbh">
        <el-input v-model="ruleForm.nsrsbh" placeholder="请输入纳税人识别号"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="nsrdq">
        <el-select v-model="ruleForm.nsrdq" placeholder="请选择地区" style="width: 100%">
          <el-option label="北京" value="beijing"></el-option>
          <el-option label="宁波" value="ningbo"></el-option>
          <el-option label="深圳" value="shenzhen"></el-option>
          <el-option label="青岛" value="qingdao"></el-option>
          <el-option label="厦门" value="xiamen"></el-option>
          <el-option label="大连" value="dalian"></el-option>
          <el-option label="浙江" value="zhejiang"></el-option>
          <el-option label="四川" value="sichuan"></el-option>
          <el-option label="上海(新版登录)" value="shanghai"></el-option>
          <el-option label="广东(新版登录)" value="guangdong"></el-option>
          <el-option label="重庆" value="chongqing"></el-option>
          <el-option label="天津" value="tianjin"></el-option>
          <el-option label="陕西" value="shanxi"></el-option>
          <el-option label="内蒙古" value="neimenggu"></el-option>
          <el-option label="河南" value="henan"></el-option>
          <el-option label="福建" value="fujian"></el-option>
          <el-option label="云南" value="yunnan"></el-option>
          <el-option label="吉林" value="jilin"></el-option>
          <el-option label="江苏" value="jiangsu"></el-option>
          <el-option label="湖南" value="hunan"></el-option>
          <el-option label="安徽" value="anhui"></el-option>
          <el-option label="贵州" value="guizhou"></el-option>
          <el-option label="广西" value="guangxi"></el-option>
          <el-option label="河北" value="hebei"></el-option>
          <el-option label="黑龙江" value="heilongjiang"></el-option>
          <el-option label="湖北" value="hubei"></el-option>
          <el-option label="甘肃" value="gansu"></el-option>
          <el-option label="海南" value="hainan"></el-option>
          <el-option label="宁夏" value="ningxia"></el-option>
          <el-option label="辽宁" value="liaoning"></el-option>
          <el-option label="青海" value="qinghai"></el-option>
          <el-option label="山西" value="shanxi"></el-option>
          <el-option label="江西" value="jiangxi"></el-option>
          <el-option label="山东" value="shandong"></el-option>
          <el-option label="新疆" value="xinjiang"></el-option>
          <el-option label="西藏" value="xizang"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登陆方式" prop="loginType">
        <el-select v-model="ruleForm.loginType" placeholder="" style="width: 100%">
          <el-option label="账密手机号" value="1"></el-option>
          <el-option label="扫码登陆" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名" prop="nsrInfo.bsryxz">
        <el-input v-model="ruleForm.nsrInfo.bsryxz" placeholder = "居民身份证号码/手机号码/用户名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="nsrInfo.sfzjhm">
        <el-input v-model="ruleForm.nsrInfo.sfzjhm" placeholder = "请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="nsrInfo.zjh">
        <el-input v-model="ruleForm.nsrInfo.zjh" placeholder = "请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="nsrInfo.gsnsmm">
        <el-input v-model="ruleForm.nsrInfo.gsnsmm" placeholder = "请输入个人用户密码"></el-input>
      </el-form-item>
      <el-form-item label="登陆身份" prop="nsrInfo.dlsf">
        <el-select v-model="ruleForm.nsrInfo.dlsf" placeholder="请选择登陆身份" style="width: 100%">
          <el-option label="财务负责人" value="1"></el-option>
          <el-option label="法定代表人" value="2"></el-option>
          <el-option label="办税员" value="3"></el-option>
          <el-option label="开票员" value="7"></el-option>
          <el-option label="办税人" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="submitForm('ruleForm')" size="medium" style="width: 70%;height: 50px;display:block;margin:0 auto">确认提交</el-button>
      </el-form-item>
      <el-form-item prop="checked">
        <el-checkbox v-model="ruleForm.checked" style="margin-left: 20px;margin-bottom: 10px">请阅读并同意我们的<a href="https://taxadmin.jcsk100.com/admin/wap/index.html#/agreement" style="color: #787be8">用户协议</a></el-checkbox><br>
        <span style="color: #ffb612;font-size: 10px;margin-left: 20px">为保证数据采集的完整性，请优先使用法人、财务负责人等省份的账号授权登录</span>
      </el-form-item>
    </el-form>

    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" v-if="ruleForm.showtwo"  v-loading="loading">
      <p style="text-align: center;margin-bottom: 30px">短信验证码已发送，请提交短信验证码</p>
      <el-form-item  prop="ruleForm.smsCode" style="height: 50px">
        <el-input v-model="ruleForm.smsCode" style="height: 30px;width: 60%;margin-left: 20%"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="submitFormWithMsgCode()" size="medium" style="width: 70%;height: 50px;display:block;margin:0 auto">确认提交</el-button>
      </el-form-item>
      <span @click="changeShow()" style="color: #787be8;text-decoration-line: underline;margin-left: 50%">重新授权</span>
    </el-form>

    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" v-if="ruleForm.showthree">
      <el-row>
        <el-col :xl="12" :lg="12" >
          <el-result icon="success" title="" subTitle="">
          </el-result>
        </el-col>
      </el-row>
      <p style="text-align: center;margin-bottom: 30px">授权成功,任务可能需要5-10分钟，请耐心等待...</p>
      <span @click="changeShow()" style="color: #787be8;text-decoration-line: underline;margin-left: 50%">重新授权</span>
    </el-form>
  </div>
</template>

<script>
import {login,submitNote,submitNoteResult} from "@/api/freedom/login";
export default {
  name: "Login",
  data() {
    let checkedFn = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请勾选同意协议"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        smsCode : "",
        showone : false,
        showtwo : true,
        showthree : false,
        nsrsbh: '',
        nsrdq: '',
        loginType: '1',
        checked : false,
        traceno : "",
        nsrInfo:{
          dlsf :"",
          dlsfmm : "",
          gsnsmm : "",
          sfzjhm : "",
          zjh : "",
          gsnsyhm : "",
          bsryxz : "",
        }
      },
      rules: {
        nsrsbh: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
        ],
        nsrdq: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        loginType: [
          { required: true, message: '请选择登陆方式', trigger: 'change' }
        ],
        "nsrInfo.bsryxz": [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        "nsrInfo.sfzjhm": [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        "nsrInfo.zjh": [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        "nsrInfo.gsnsmm": [
          { required: true, message: '请输入个人密码', trigger: 'blur' }
        ],
        checked: [
          { validator: checkedFn, trigger: "change" }
          // {  type: 'array', required: true, message: '请勾选同意协议', trigger: 'change' }
        ]
      },
      loading : false
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.ruleForm.nsrInfo.dlsfmm = this.ruleForm.nsrInfo.gsnsmm;
          this.ruleForm.nsrInfo.bsryxz = this.ruleForm.nsrInfo.zjh;
          this.ruleForm.nsrInfo.gsnsyhm = this.ruleForm.nsrInfo.zjh;
          login(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.ruleForm.traceno = res.msg;
              this.ruleForm.showone = false;
              this.ruleForm.showtwo = true;
              this.ruleForm.showthree = false;
            }else {
              this.$alert("<font color='red'>登陆失败，失败原因"+res.msg+"</font>")
            }

          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitFormWithMsgCode(){
      this.loading = true;
      submitNote(this.ruleForm.traceno,this.ruleForm.nsrsbh,this.ruleForm.smsCode,this.ruleForm.nsrInfo.zjh)
        .then(res=>{
          if (res.code == "200"){
            let  timer = setInterval(() => {
              this.fun(timer)
            }, 5000)
          }else {
            this.loading = false;
            this.ruleForm.showone = false;
            this.ruleForm.showtwo = true;
            this.ruleForm.showthree = false;
            console.log("进入方法")
            console.log(this.loading)
          }
        }).catch(()=>{
        this.loading = false;
        this.ruleForm.showone = false;
        this.ruleForm.showtwo = true;
        this.ruleForm.showthree = false;
        console.log("进入catch方法")
      });

    },
    fun (timer) {
      setTimeout(()=>{
        // 这里ajax 请求的代码片段和判断是否停止定时器
        submitNoteResult(this.ruleForm.traceno,this.ruleForm.nsrsbh,this.ruleForm.smsCode,this.ruleForm.nsrInfo.zjh)
          .then(res=>{
            if (res.msg == "10011"){
              this.ruleForm.showone = false;
              this.ruleForm.showtwo = false;
              this.ruleForm.showthree = true;
              this.loading = false;
              clearInterval(timer)
            }else if(res.msg == "10012"){
              this.ruleForm.showone = false;
              this.ruleForm.showtwo = true;
              this.ruleForm.showthree = false;
              this.loading = false;
              clearInterval(timer)
            }
          }).catch(()=>{
          this.ruleForm.showone = false;
          this.ruleForm.showtwo = true;
          this.ruleForm.showthree = false;
          this.loading = false;
          clearInterval(timer)
        });
      }, 0)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    changeShow(){
      this.ruleForm.showone = true;
      this.ruleForm.showtwo = false;
      this.ruleForm.showthree = false;
    }
  }

}
</script>

<style scoped>

</style>
