<template>
  <div
    :class="[
      'login-wrapper',
      ['', 'login-form-right', 'login-form-left'][direction]
    ]"
  >
    <a-form class="login-form ele-bg-white">
      <!--      <h4>中控后台登录</h4>-->
      <a-space class="login-title">
        <h4
          class="title-btn"
          :class="loginType === 'scan' ? 'active' : ''"
          @click="onLoginType('scan')"
          >扫码登录</h4
        >
        <a-divider type="vertical" style="height: 20px" />
        <h4
          class="title-btn"
          :class="loginType === 'account' ? 'active' : ''"
          @click="onLoginType('account')"
          >账号登录</h4
        >
      </a-space>
      <template v-if="loginType === 'account'">
        <!--        <a-form-item v-bind="validateInfos.tenantId">-->
        <!--          <a-input-->
        <!--            allow-clear-->
        <!--            size="large"-->
        <!--            v-model:value="form.tenantId"-->
        <!--            :placeholder="`企业ID`"-->
        <!--          >-->
        <!--            <template #prefix>-->
        <!--              <BankOutlined />-->
        <!--            </template>-->
        <!--          </a-input>-->
        <!--        </a-form-item>-->
        <a-form-item v-bind="validateInfos.username">
          <a-input
            allow-clear
            size="large"
            v-model:value="form.username"
            :placeholder="`账号|手机号码|邮箱`"
          >
            <template #prefix>
              <user-outlined />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item v-bind="validateInfos.password">
          <a-input-password
            size="large"
            v-model:value="form.password"
            :placeholder="'请输入密码'"
            @pressEnter="submit"
          >
            <template #prefix>
              <lock-outlined />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item v-bind="validateInfos.code">
          <div class="login-input-group">
            <a-input
              allow-clear
              size="large"
              type="text"
              :maxlength="5"
              v-model:value="form.code"
              :placeholder="'请输入验证码'"
              @pressEnter="submit"
            >
              <template #prefix>
                <safety-certificate-outlined />
              </template>
            </a-input>
            <a-button class="login-captcha" @click="changeCaptcha">
              <img v-if="captcha" :src="captcha" alt="" />
            </a-button>
          </div>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="form.remember"> 记住密码 </a-checkbox>
          <!--        <router-link-->
          <!--          to="/forget"-->
          <!--          class="ele-pull-right"-->
          <!--          style="line-height: 22px"-->
          <!--        >-->
          <!--          {{ t('login.forget') }}-->
          <!--        </router-link>-->
        </a-form-item>
        <a-form-item>
          <a-button
            block
            size="large"
            type="primary"
            :loading="loading"
            @click="submit"
          >
            {{ loading ? '登录中' : '登录' }}
          </a-button>
        </a-form-item>
      </template>
      <template v-if="loginType === 'scan'">
        <WxWork />
        <!--        <div class="ele-text-center" style="padding: 16px 0">-->

        <!--          <a-image-->
        <!--            :preview="false"-->
        <!--            :width="140"-->
        <!--            :height="140"-->
        <!--            src="https://file.wsdns.cn/20230429/bd26a478523242258897a3eb691e90c4.svg"-->
        <!--          />-->
        <!--        </div>-->
        <!--        <div class="ele-text-center" style="padding-bottom: 32px">-->
        <!--          <a href="/wx-work-login">-->
        <!--            <a-image-->
        <!--              :preview="false"-->
        <!--              class="login-oauth-icon"-->
        <!--              :height="50"-->
        <!--              src="https://file.wsdns.cn/20230429/ea43ce7fdc4a46c39f533bd8546b8016.png"-->
        <!--            />-->
        <!--          </a>-->
        <!--        </div>-->
      </template>
    </a-form>
    <div class="login-copyright">
      <p>
        copyright © {{ new Date().getFullYear() }} Websoft Inc. All Rights
        Reserved.
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, unref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { useRouter } from 'vue-router';
  import { Form, message } from 'ant-design-vue';
  import WxWork from './components/wx-work.vue';
  import {
    UserOutlined,
    LockOutlined,
    SafetyCertificateOutlined,
    BankOutlined,
    QqOutlined,
    WechatOutlined,
    WeiboOutlined
  } from '@ant-design/icons-vue';
  import I18nIcon from '@/layout/components/i18n-icon.vue';
  // import { getToken } from '@/utils/token-util';
  // import { TENANT_ID } from '@/config/setting';
  import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
  import { login, getCaptcha, getWxWorkQrConnect } from '@/api/passport/login';
  // import { navTo } from '@/utils/common';
  import { User } from '@/api/system/user/model';
  import { THEME_STORE_NAME } from '@/config/setting';

  const useForm = Form.useForm;

  const { currentRoute } = useRouter();
  const { t } = useI18n();

  // 登录框方向, 0 居中, 1 居右, 2 居左
  const direction = ref(0);
  // 加载状态
  const loading = ref(false);
  const loginType = ref('account');
  const qrConnect = ref<any>();
  // 表单数据
  const form = reactive<User>({
    username: '',
    password: '',
    code: '',
    remember: true,
    tenantId: 10049
  });
  // 验证码 base64 数据
  const captcha = ref('');
  // 验证码内容, 实际项目去掉
  const text = ref('');

  // 表单验证规则
  const rules = computed(() => {
    return {
      username: [
        {
          required: true,
          message: '请输入用户名',
          type: 'string'
        }
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          type: 'string'
        }
      ],
      code: [
        {
          required: true,
          message: '请输入验证码',
          type: 'string'
        }
      ]
    };
  });

  const { clearValidate, validate, validateInfos } = useForm(form, rules);

  /* 跳转到首页 */
  const goHome = () => {
    const { query } = unref(currentRoute);
    goHomeRoute(query.from as string);
    localStorage.removeItem(THEME_STORE_NAME);
  };

  /* 提交 */
  const submit = () => {
    validate().then(() => {
      if (form.code?.toLowerCase() !== text.value) {
        message.error('验证码错误');
        changeCaptcha();
        return;
      }
      loading.value = true;
      // 是否指定租户ID
      const { query } = unref(currentRoute);
      if (query.tenantId) {
        form.tenantId = Number(query.tenantId);
      }
      login(form)
        .then((msg) => {
          message.success(msg);
          loading.value = false;
          cleanPageTabs();
          goHome();
        })
        .catch((e: Error) => {
          message.error(e.message);
          loading.value = false;
        });
    });
  };

  const onLoginType = (text) => {
    loginType.value = text;
  };

  const loginConnect = () => {
    // getWxWorkQrConnect().then((result) => {
    //   console.log(result);
    //   qrConnect.value = result;
    // });
  };

  /* 获取图形验证码 */
  const changeCaptcha = () => {
    // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
    getCaptcha()
      .then((data) => {
        captcha.value = data.base64;
        // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
        text.value = data.text;
        // 自动回填验证码, 实际项目去掉这个
        // form.code = data.text;
        clearValidate();
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  // 首次加载
  changeCaptcha();
  loginConnect();
  // if (getToken()) {
  //   goHome();
  // } else {
  //   changeCaptcha();
  // }
</script>

<style lang="less" scoped>
  /* 背景 */
  .login-wrapper {
    padding: 48px 16px 0 16px;
    position: relative;
    box-sizing: border-box;
    background-image: url('@/assets/bg-2.jpeg');
    background-color: #333333;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
    }
  }
  /* 卡片 */
  .login-form {
    width: 380px;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 28px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    position: relative;
    z-index: 2;

    h4 {
      padding: 22px 0;
      text-align: center;
    }
    .title-btn {
      cursor: pointer;
    }
    .login-title {
      display: flex;
      justify-content: space-around;
      line-height: 50px;
      .active {
        color: #007dff;
      }
    }
  }

  .login-form-right .login-form {
    margin: 0 15% 0 auto;
  }

  .login-form-left .login-form {
    margin: 0 auto 0 15%;
  }

  /* 验证码 */
  .login-input-group {
    display: flex;
    align-items: center;

    :deep(.ant-input-affix-wrapper) {
      flex: 1;
    }

    .login-captcha {
      width: 102px;
      height: 40px;
      margin-left: 10px;
      padding: 0;

      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }

  /* 第三方登录图标 */
  .login-oauth-icon {
    color: #fff;
    padding: 5px;
    margin: 0 12px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
  }
  .work-icon {
    width: 50px;
    height: 50px;
  }

  /* 底部版权 */
  .login-copyright {
    color: #eee;
    text-align: center;
    padding: 48px 0 22px 0;
    position: relative;
    z-index: 1;
  }

  /* 响应式 */
  @media screen and (min-height: 640px) {
    .login-wrapper {
      padding-top: 0;
    }

    .login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -230px;
    }

    .login-form-right .login-form,
    .login-form-left .login-form {
      left: auto;
      right: 15%;
      transform: translateX(0);
      margin: -230px auto auto auto;
    }

    .login-form-left .login-form {
      right: auto;
      left: 15%;
    }

    .login-copyright {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  @media screen and (max-width: 768px) {
    .login-form-right .login-form,
    .login-form-left .login-form {
      left: 50%;
      right: auto;
      margin-left: 0;
      margin-right: auto;
      transform: translateX(-50%);
    }
  }
</style>
