<template>
  <div class="card">
    <Lottie
      :options="loadingOptions"
      :height="200"
      :width="200"
      v-on:animCreated="handleLoadingAnimation"
    ></Lottie>
    <div class="hint">{{ hint }}</div>
  </div>
</template>

<script>
import { axios4SDK } from "../api/config";
import Lottie from "vue-lottie";
import * as loadingData from "../assets/lottie/walking.json";

export default {
  name: "OauthLoading",
  components: {
    Lottie
  },
  props: {
    systemName: {
      type: String,
      required: true
    },
    config: {
      type: Object,
      required: true,
      default: () => ({
        name: "",
        method: "post",
        url: "",
        config: {},
        beforeRequest: req => {
          return req;
        },
        afterRequest: response => {
          return response;
        }
      }),
      validator: value => {
        return (
          typeof value.name === "string" &&
          ["get", "post"].includes(value.method) &&
          typeof value.url === "string" &&
          typeof value.data === "object" &&
          typeof value.config === "object"
        );
      }
    },
    eventListener: {
      type: Object,
      required: true,
      default: () => ({
        beforeRequest: req => {
          return req;
        },
        afterResponse: response => {
          return response;
        },
        onSuccess: res => {
          console.log(res);
        },
        onError: err => {
          console.log(err);
        }
      })
    }
  },
  data() {
    return {
      animationSpeed: 1,
      successAnim: null,
      loadingAnim: null,
      isSuccess: false,
      loadingOptions: {
        loop: true,
        autoplay: true,
        animationData: loadingData.default,
        rendererSettings: {
          preserveAspectRatio: "xMidYMid slice"
        }
      }
    };
  },
  mounted() {
    document.title = this.systemName;
    this.checkLoginStatus();
  },
  destroyed() {
    this.loadingAnim = null;
  },
  computed: {
    systemLogin() {
      return Object.assign(
        {
          name: "",
          method: "post",
          url: "",
          data: {},
          config: {}
        },
        this.config
      );
    },
    systemEventListener() {
      return Object.assign(
        {
          beforeRequest: req => {
            console.log(req);
            return req;
          },
          afterResponse: response => {
            console.log(response);
            return response;
          },
          onSuccess: res => {
            console.log(res);
          },
          onError: err => {
            console.log(err);
          }
        },
        this.eventListener
      );
    },
    hint() {
      return "登录中...";
    }
  },
  methods: {
    handleLoadingAnimation(anim) {
      this.loadingAnim = anim;
    },
    checkLoginStatus() {
      const { method, url, data, config } = this.systemLogin;
      const {
        beforeRequest,
        afterResponse,
        onSuccess,
        onError
      } = this.systemEventListener;
      axios4SDK.interceptors.request.use(...beforeRequest);
      axios4SDK.interceptors.response.use(...afterResponse);
      axios4SDK[method](url, data, config)
        .then(onSuccess)
        .catch(onError);
      // this.axiosInstance
      //   .post(this.systemLogin, {
      //     code,
      //     redirectUri: `${parseUrl(window.location.href)}`
      //   })
      //   .then(res => {
      //     if (!res) {
      //       this.$emit("loginFail");
      //     } else {
      //       this.$emit("loginSuccess", res.data);
      //     }
      //   });
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  border-radius: 5%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 6rem;
  background: #fff;
  .hint {
    font-size: 1.25rem;
    color: #666;
  }
}
</style>
