<template>
  <view class="wui_login">
    <view class="login_top">
      <image
        src="../../static/login/loginbg.png"
        style="width: 100%; height: 609upx"
      ></image>
    </view>
    <view class="login_main">
      <view class="title">
        <view class="tit">欢迎登录</view>
        <view class="name">丹阳安管平台</view>
      </view>

      <view class="login_form">
        <view class="wrap">
          <u-input
            v-model="userName"
            placeholder="请输入用户名"
            type="text"
            border="false"
            custom-style="background:#ebf2ff; border-radius:50px; height:60upx"
          />
        </view>
        <view class="wrap">
          <u-input
            v-model="password"
            placeholder="请输入密码"
            type="password"
            border="false"
            custom-style="background:#ebf2ff; border-radius:50px; height:60upx"
          />
        </view>

        <view class="wrap">
          <u-button
            type="primary"
            custom-style=" border-radius:50px; height:80upx; background-image: linear-gradient(to right, #2795fe, #2a60f8)"
            @click="$u.debounce(fnLogin, 1000, true)"
          >
            登录
          </u-button>
        </view>
        <view class="tips">
          本平台为互联网非涉密平台，严禁处理、传输国家秘密和工作秘密
        </view>
      </view>
    </view>
    <update-version />
  </view>
</template>

<script>
import updateVersion from "@/components/update_version/index.vue";
import { submitLogin } from "@/api";

export default {
  components: {
    updateVersion,
  },
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  methods: {
    async fnLogin() {
      if (!this.userName) {
        uni.$u.toast("请输入用户名");
        return;
      }
      if (!this.password) {
        uni.$u.toast("请输入密码");
        return;
      }
      const resData = await submitLogin({
        KEYDATA: `qdkjchina${this.userName},qd,${this.password}`,
      });
      await this.$store.dispatch("setUserInfo", { ...resData });
      uni.$u.route({
        url: "/pages/index/index",
        type: "switchTab",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tips {
  font-size: 26upx;
  color: #ff0000;
  text-indent: 2em;
}
.wui_login {
  width: 100%;
  height: 100vh;

  .login_top {
    width: 100%;
  }

  .login_main {
    width: 100%;
    background: #ffffff;
    border-radius: 50upx 50upx 0 0;
    margin-top: -150upx;
    position: relative;
    z-index: 99;
    min-height: 1000upx;

    .title {
      text-align: center;
      padding-top: 50upx;

      .tit {
        font-size: 40upx;
        position: relative;
        height: 50upx;

        &:after {
          content: "";
          width: 120upx;
          height: 10upx;
          background: #1d82fe;
          position: absolute;
          bottom: -10upx;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 6rpx;
          z-index: -1;
        }
      }

      .name {
        font-size: 34upx;
        margin-top: 20upx;
      }
    }

    .login_form {
      width: 75%;
      margin: 100upx auto 0;

      .wrap {
        margin-bottom: 50rpx;
      }
    }
  }
}
</style>
