<template>
	<el-container style="background-image: url(img/background.png);" class="aminui-login-container">
		<el-image class="aminui-login-container__header" src="img/login_header.png"></el-image>
		
		<el-form class="aminui-login-container__content" ref="loginForm" :model="form" :rules="rules" label-width="0" @keyup.enter="login">
			<div class="login-form-title">
				<el-image src="img/login_logo.png"></el-image>
				{{ $t("login.formTitle") }}
			</div>
			<el-form-item prop="user">
				<el-input v-model="form.user" prefix-icon="sc-icon-user" :placeholder="$t('login.userPlaceholder')"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="form.password" type="password" show-password prefix-icon="sc-icon-password" :placeholder="$t('login.PWPlaceholder')"></el-input>
			</el-form-item>
			<el-form-item class="login-form-code-item" prop="code">
				<el-input v-model="form.code" prefix-icon="sc-icon-valid-code" :placeholder="$t('login.codePlaceholder')"></el-input>
				<div class="code-image" @click="getCode">
					<el-image :src="codeUrl">
						<template #placeholder>
							<div class="sc-upload__img-slot">Loading...</div>
						</template>
					</el-image>
				</div>
			</el-form-item>

			<el-form-item class="login-form-button-item">
				<el-button type="primary" size="large" :loading="islogin" @click="login">{{ $t("login.signIn") }}</el-button>
			</el-form-item>
		</el-form>

		<div class="aminui-login-container__footer">
			<span>Copyright ©2016-2024 城发地产运营管理平台</span>
			<span>京ICP备10021606号</span>
		</div>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				islogin: false,
				codeUrl: "",

				form: {
					user: null,
          			password: null,
					code: null,
					uuid: null
				},

				rules: {
					user: [{ required: true, message: this.$t("login.userError") }],
					password: [{ required: true, message: this.$t("login.PWError") }],
					code: [{ required: true, message: this.$t("login.codeError") }]
				}
			}
		},

		mounted() {
			this.$TOOL.cookie.remove("TOKEN");
			this.$TOOL.data.remove("USER_INFO");
			this.$TOOL.data.remove("OA_USER_INFO");
			this.$TOOL.data.remove("APPLY_SQL");
			this.$TOOL.data.remove("MENU");
			this.$TOOL.data.remove("PERMISSIONS")
			this.$store.commit("clearViewTags");
			this.$store.commit("clearKeepLive");
			this.$store.commit("clearIframeList");
      		this.getCode();
		},

		methods: {
			async getCode() {
				try {
					const res = await this.$API.auth.codeImg.get();
					this.codeUrl = res.img;
					this.form.uuid = res.uuid;
				} catch (error) {
					this.codeUrl = "";
					this.form.code = null;
					this.form.uuid = null;
				}
			},

			async login() {
				try {
					const validate = await this.$refs.loginForm.validate();
					if (!validate) return false;

					this.islogin = true;
					// 获取token
					const { token, user } = await this.$API.auth.token.post(this.form);
					this.$TOOL.cookie.set("TOKEN", token);
					this.$TOOL.data.set("USER_INFO", user.user);

                    let applySql = null;
                    const { id, projectIds } = user.user;
                    if (id && id != 1) {
                        applySql = `create_id = ${id}`;
                        if (projectIds) applySql += ` or project_id in (${projectIds})`;
                    }
                    applySql && this.$TOOL.data.set("APPLY_SQL", applySql);

					this.$router.replace({ path: this.$route.redirectedFrom ? this.$route.redirectedFrom.fullPath : "/" });
					this.$message.success("Login Success 登录成功");
					this.islogin = false;
				} catch (error) {
					this.islogin = false;
					this.getCode();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-login-container {
  background-size: 100% 100%;

  .aminui-login-container__header {
    position: absolute;
    top: 41px;
    left: 42px;
    height: 72px;
  }

  .aminui-login-container__content {
    position: absolute;
    top: 45%;
    left: 75%;
    transform: translate(-212px, -248px);
    z-index: 5;
    width: 424px;
    padding: 60px 60px 12px;
    border-radius: 4px;
    background: #fff;

    .login-form-title {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
      line-height: 30px;
      font-size: 24px;
      font-weight: bold;
      color: #000;
      letter-spacing: 1px;

      .el-image {
        height: 27px;
        margin-right: 10px;
      }
    }

    .el-form-item {
      margin-bottom: 40px;
    }

    .el-input {
      height: 42px;

      :deep(.el-input__wrapper) .el-input__prefix .el-icon {
        font-size: 16px;
      }
    }

    .login-form-code-item :deep(.el-form-item__content) {
      justify-content: space-between;

      .el-input {
        width: 63%;
      }

      .code-image {
        width: 33%;
        height: 42px;

        .el-image {
          cursor: pointer;
          width: 100%;
          height: 100%;

          .sc-upload__img-slot {
            background: #e8f0fe;
            border-radius: var(--el-border-radius-base);
            text-align: center;
            line-height: 38px;
            font-size: 12px;
            color: var(--el-text-color-placeholder);
          }
        }
      }
    }

    .login-form-button-item .el-button {
      width: 100%;
    }
  }

  .aminui-login-container__footer {
    position: fixed;
    bottom: 32px;
    z-index: 10;
    display: inline-block;
    width: 100%;
    text-align: center;
    font: 14px NotoSansCJK-Light;
    font-weight: 600;
    color: #fff;

    span {
      line-height: 24px;

      &:first-child {
        margin-right: 13.3px;
      }

      &:last-child {
        padding-left: 5.4px;
      }
    }
  }
}
</style>