<template>
  <div class="app-loading">
    <div class="app-loading-wrap" v-if="!open">
      <div class="app-loading-dots">
        <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
      </div>
    </div>
    <a-card v-else title="绑定建设用地账号" style="width: 420px">
      <a-form :model="formState" name="绑定建设用地账号" @finish="onFinish" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入账号' }]">
          <a-input placeholder="请输入污染地块登录账号" v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password placeholder="请输入污染地块登录密码" v-model:value="formState.password" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
          <a-button type="primary" html-type="submit" style="width: 100%;">绑定</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>


<script lang="ts" setup>
/**
 * 地址中携带token，跳转至此页面进行登录操作
 */
import { useRoute, useRouter } from 'vue-router';
import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user';
import { useI18n } from '/@/hooks/web/useI18n';
import { tokenLogin } from '/@/api/common/api';
import axios from 'axios';
import { ref } from 'vue';
import { RsaParams } from '/@/utils/rsa.js';

// export default {
//   name: "TokenLogin",
//   setup(){
const route = useRoute();
let router = useRouter();
const { createMessage, notification } = useMessage();
const { t } = useI18n();
const routeQuery: any = route.query;
const yzyId = ref('');
const open = ref<boolean>(false);
// if(!routeQuery){
//   createMessage.warning('参数无效')
// }
const formState = ref({
  password: '',
  username: '',
});

const code = routeQuery['code'];
const token = routeQuery['sty_redirect_token'];
const userStore = useUserStore();
if (code || token) {
  // createMessage.warning('code无效')
  userStore.codeLogin({ code: code, token: token, callbackUrl: window.location.origin + window.location.pathname }).then((res) => {
    if (res && res.userInfo) {
      requestSuccess(res);
    } else if (res && res.code == 88) {
      yzyId.value = res.message;
       open.value = true
    } else {
      requestFailed(res);
    }
  });
} else {
  axios
    .get(
      `https://m.gdeei.cn/oauth/oauth/authorize?scope=all&client_id=gdwrdk&redirect_uri=${
        window.location.origin + window.location.pathname
      }&response_type=code`
    )
    .then((res) => {
      if (res.status == 200) {
        let url = res.config.url || '';
        window.location.href = url;
      }
    });
}

function requestFailed(err) {
  notification.error({
    message: '登录失败',
    description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
    duration: 4,
  });
}

function requestSuccess(res) {
  let info = routeQuery.info;
  if (info) {
    let query = JSON.parse(info);
    let taskId = query.taskId;
    let path = '/task/handle/' + taskId;
    router.replace({ path, query });
    notification.success({
      message: t('sys.login.loginSuccessTitle'),
      description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
      duration: 3,
    });
  } else {
    notification.error({
      message: '参数失效',
      description: '页面跳转参数丢失，请查看日志',
      duration: 4,
    });
  }
}

function onFinish() {
  userStore
    .bindYzy({ yzyId: yzyId.value, username: RsaParams(formState.value.username), password: RsaParams(formState.value.password) })
    .then((res) => {
      if (res && res.userInfo) {
        requestSuccess(res);
      } else {
        requestFailed(res);
      }
    });
}
//   }
// }
</script>

<style>

.app-loading .ant-card-head-title {
  text-align: center;
  color: #0065cc;
}

.app-loading .ant-form-item-control-input-content{
  text-align: center;
}
</style>
<style scoped>
html[data-theme='dark'] .app-loading {
  background-color: #2c344a;
}

html[data-theme='dark'] .app-loading .app-loading-title {
  color: rgba(255, 255, 255, 0.85);
}

.app-loading {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f4f7f9;
}

.app-loading .app-loading-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.app-loading .dots {
  display: flex;
  padding: 98px;
  justify-content: center;
  align-items: center;
}

.app-loading .app-loading-title {
  display: flex;
  margin-top: 30px;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.app-loading .app-loading-logo {
  display: block;
  width: 90px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.dot {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  margin-top: 30px;
  font-size: 32px;
  transform: rotate(45deg);
  box-sizing: border-box;
  animation: antRotate 1.2s infinite linear;
}

.dot i {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-color: #0065cc;
  border-radius: 100%;
  opacity: 0.3;
  transform: scale(0.75);
  animation: antSpinMove 1s infinite linear alternate;
  transform-origin: 50% 50%;
}

.dot i:nth-child(1) {
  top: 0;
  left: 0;
}

.dot i:nth-child(2) {
  top: 0;
  right: 0;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.dot i:nth-child(3) {
  right: 0;
  bottom: 0;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.dot i:nth-child(4) {
  bottom: 0;
  left: 0;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
@keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
@-webkit-keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}
@-webkit-keyframes antSpinMove {
  to {
    opacity: 1;
  }
}
</style>
