<template>
  <div class="app-container">
    <div class="title">
      <img style="display: inline-block;margin-right: 10px;" src="../../../static/images/contracted/login_logo.png" alt="">
      <p>农村承包地调查</p>
    </div>
    <van-form style="width: 88%;margin: 0 auto;margin-top: 50px;" v-if="!showMessage">
      <van-field
        v-model="formData.username"
        placeholder="请输入手机号/账号"
        :rules="[{ required: true, message:''  }]"
        clearable
        left-icon="../../../static/images/contracted/contracted_login_icon_1.png"
      />
      <van-field
        v-model="formData.password"
        type="password"
        style="margin: 20px 0"
        placeholder="请输入密码"
        :rules="[{ required: true, message:''  }]"
        clearable
        left-icon="../../../static/images/contracted/contracted_login_icon_2.png"
      />
      <van-row>
        <van-col :span="16">
          <van-field
            v-model="formData.code"
            center
            clearable
            placeholder="图形验证码"
            left-icon="../../../static/images/contracted/contracted_login_icon_3.png"
          />
        </van-col>
        <van-col :span="8">
          <img style="width: 100px;display: block;margin-left: 10px;" :src="codeUrl" @click="getCode" />
        </van-col>
      </van-row>

      <van-checkbox style="margin-top:20px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>

      <div style="margin: 50px 16px 16px;border-radius: 30px;overflow: hidden;">
        <van-button block type="info" native-type="submit" @click="handleLogin">登录</van-button>
      </div>
<!--      <div style="margin: 0px 16px;border-radius: 30px;overflow: hidden;">-->
<!--        <van-button block type="info" @click="registerShow=true">注册</van-button>-->
<!--      </div>-->

      <van-popup v-model:show="registerShow" style="width: 80%" round>
        <div style="background: #FFF;padding: 5% 2%;">
          <p style="text-align: center;font-size: 0.45rem;margin-bottom: 5%;">请选择注册类型</p>
          <van-row>
            <van-col :span="12" align="center">
              <router-link :to="{name:'lawEnforcementUser'}">
                <van-image
                  round
                  width="50%"
                  src="../../../static/images/lawEnforcement/sh.png"
                />
              </router-link>
              <p style="font-size: 0.4rem;margin-top: 3%">个体工商户</p>
            </van-col>
            <van-col :span="12" align="center">
              <router-link :to="{name:'lawEnforcementCompanyRegister'}">
              <van-image
                round
                width="50%"
                src="../../../static/images/lawEnforcement/qy.png"
              />
              </router-link>
              <p style="font-size: 0.4rem;margin-top: 3%">企业</p>
            </van-col>
          </van-row>
        </div>
      </van-popup>

    </van-form>
  </div>
</template>
<style scoped lang="scss">

  input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: #ededed !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
    background-color:transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
  }
  input {
    background-color:transparent;
  }
  .app-container{
    background: #fff url("../../../static/images/contracted/login_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
  }
  /deep/ .van-cell{
    padding: 0;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    background-color: rgba(255,255,255,.5);
    box-shadow: 0 5px 10px #DDDDDD;
    .van-field__control{

    }
    &:after{
      border: none;
    }
    .van-icon__image{
      width: 20PX;
      height: 20PX;
      object-fit: contain;
      vertical-align: middle;
    }
  }
  /deep/ .van-checkbox__icon--checked .van-icon{
    background-color: #30d391;
    border-color: #30d391;
  }
  /deep/ .van-button--info{
    background-color: #30d391;
    border-color: #30d391;
  }
  .title{
    padding-top: 20%;
    width: 88%;
    margin: 0 auto;
    text-align: center;
    p{
      font-size: 0.6rem;
      color: #333333;
      margin-top: 10PX;
      font-weight: bold;
    }
    img{
      width: 30%;
    }
  }
  .van-tab--active{
    font-size: .6rem;
    font-weight: bold;
  }
  .van-tabs__line{
    background:#1D6FE9;
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 0.07rem;
    bottom: 0.3rem;
  }
  .van-tabs__nav{
    padding:0
  }
  .van-tab{
    display: inline-block;
    flex: inherit;
    margin-left: 30px;
    line-height: .8rem;
  }
  .van-tab__text--ellipsis {
    overflow: auto;
  }
  .van-password-input{
    width: 50%;
    margin: 0 auto;
  }
  [class*=van-hairline]::after{
    border:none;
  }
  .van-password-input__security li{
    margin: 0 10px;
    border-bottom: 3px solid black;
  }
  .registerSmsBtn{
    color: rgb(29, 111, 233);
    font-size: 0.34rem;

  }
</style>
<script>
  import { getCodeImg, getSmsCode ,getRegisterSmsCode,registerCheck,registerOn} from "../../api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from "../../utils/jsencrypt";
  //引用wx sdk
  import wx from "weixin-js-sdk";
  export default {
    name: "login",
    data() {
      return {
        registerShow:false,
        showMessage:false,
        smsCodeValue:"",
        showKeyboard:false,
        formData: {
          username: "", //账号
          password: "", //密码
          code: null, //图片验证码
          uuid: null, //识别uuid
          mobile: null, //手机号
          smsCode: null, //短信验证码
          memberName:null, //身份信息
          idcard:null, //身份号码
          rememberMe:false
        },
        loading: false,
        codeUrl: "", //验证码
        isSmsLogin: false, //是否手机验证码
        computeTime: 0,
        active:1
      };
    },
    created() {
      this.getCode();
      this.getCookie();
      this.reset();
    },
    methods: {
      reset(){

      },
      showPopup(){
        this.showKeyboard = !this.showKeyboard
      },
      showMessagePop(){
        this.showMessage = !this.showMessage
      },
      getCode() {
        getCodeImg().then((res) => {
          this.formData.uuid = res.uuid;
          this.codeUrl = "data:image/gif;base64," + res.img;
        });
      },
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get("rememberMe");
        this.formData = {
          username: username === undefined ? this.formData.username : username,
          password:
            password === undefined ? this.formData.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        };
      },
      getSmsCode() {
        if (this.formData.code == "") {
          this.$dialog.alert({
            message: '图片验证码不能为空',
          });
          return false;
        }
        if (!this.computeTime) {
          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (!myreg.test(this.formData.mobile)) {
            this.$dialog.alert({
              message: '手机号格式不正确',
            });
            return false;
          }
          /* getSmsCode(this.formData.mobile).then((res) => {
             if (res.code === 200) {
                this.$dialog.alert({
                 message: '验证码已发送',
               });
               this.showKeyboard = !this.showKeyboard;
               this.loginForm.uuid = res.uuid;
               this.computeTime = 60;
               this.timer = setInterval(() => {
                 this.computeTime--;
                 if (this.computeTime <= 0) {
                   clearInterval(this.timer);
                 }
               }, 1000);
             }
           });*/
        }
      },
      handleLogin(values) {
        if (this.isSmsLogin) {
          //短信登录
          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (!myreg.test(this.formData.mobile)) {
            this.$dialog.alert({
              message: '手机号格式不正确',
            });
            return false;
          } else if (this.formData.smsCode == "") {
            this.$dialog.alert({
              message: '短信验证码不能为空',
            });
            return false;
          }
          this.loading = true;
          this.$store
            .dispatch("SmsLogin", this.formData)
            .then(() => {
              this.$router.push({ path: "/contracted/index" }).catch(() => {});
            })
            .catch((error) => {
              this.loading = false;
            });
        } else {
          if (this.formData.rememberMe) {
            Cookies.set("username", this.formData.username, { expires: 30 });
            Cookies.set("password", encrypt(this.formData.password), { expires: 30 });
            Cookies.set("rememberMe", this.formData.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          //账号密码登录
          if (this.formData.username == "") {
            this.$dialog.alert({
              message: '账号不能为空',
            });
            return false;
          } else if (this.formData.password == "") {
            this.$dialog.alert({
              message: '密码不能为空',
            });
            return false;
          } else if (this.formData.code == "") {
            this.$dialog.alert({
              message: '图片验证码不能为空',
            });
            return false;
          }
          this.$store.dispatch("Login", this.formData)
            .then(() => {
              this.$router.push({ path: "/contracted/index" }).catch(() => {});
            })
            .catch((error) => {
              console.log(error)
              this.loading = false;
              this.getCode();
            });
        }
      },
      getRegisterSmsCode(){
        if (!this.computeTime) {
          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (!myreg.test(this.formData.mobile)) {
            this.$dialog.alert({
              message: '手机号格式不正确',
            });
            return false;
          }else if (this.formData.code == "") {
            this.$dialog.alert({
              message: '图片验证码不能为空',
            });
            return false;
          }
          if (this.active==2) {
            let formObj = {
              code :this.formData.code,
              mobile:this.formData.mobile,
              uuid:this.formData.uuid
            }
            getRegisterSmsCode(formObj).then((res) => {
              console.log(res)
              console.log(res.code == 200)
              if(res.code == 200) {
                this.$dialog.alert({
                  message: '验证码已发送',
                });
                this.formData.uuid = res.uuid;
                this.computeTime = 60;
                this.timer = setInterval(() => {
                  this.computeTime--;
                  if (this.computeTime <= 0) {
                    clearInterval(this.timer);
                  }
                }, 1000);
              }
            }).catch((res)=>{
              if(res=='Error: 验证码已失效'){
                this.getCode()
              }
            });
          }
        }
      },
      registerSubmit(){

        //注册
        if (this.formData.memberName == "") {
          this.$dialog.alert({
            message: '姓名不能为空',
          });
          return false;
        } else if (this.formData.idcard == "") {
          this.$dialog.alert({
            message: '身份证号不能为空',
          });
          return false;
        } else if (this.formData.mobile == "") {
          this.$dialog.alert({
            message: '手机号码不能为空',
          });
          return false;
        }else if (this.formData.smsCode == "") {
          this.$dialog.alert({
            message: '短信验证码不能为空',
          });
          return false;
        }
        //registerCheck,registerOn
        console.log(this.formData)
        registerCheck(this.formData).then((res)=>{
          if(res.code == 200){
            registerOn(this.formData).then((res)=>{
              if(res.code == 200){
                //
                this.$dialog.alert({
                  message: '您的初始密码：'+res.password,
                }).then(() => {
                  this.$router.push({ path: "/contracted/index" }).catch(() => {});
                });
              }
            })
          }
        })

      }
    },
  };
</script>
