<template>
  <div class="marker-login">
    <div class="part-box part-box-pad">
      <el-button
        v-for="item in roles"
        :key="item.type"
        type="primary"
        class="auth-item"
        :disabled="loading"
        @click="toAuth(item)"
        >{{ item.name }}</el-button
      >
    </div>
  </div>
</template>

<script>
import { userSysRoles, yptAuth } from "../api";
import { autoSubmitForm } from "@/plugins/utils";

export default {
  name: "marker-login",
  data() {
    return {
      roles: [],
      loading: false,
      roleNames: {
        MARKER: "评卷员",
        SUBJECT_HEADER: "科组长",
      },
    };
  },
  mounted() {
    this.getRoles();
    if (this.$route.query.trigger) {
      this.toAuth({ type: this.$route.query.trigger });
    }
  },
  methods: {
    async getRoles() {
      this.roles = [];
      const data = await userSysRoles();
      this.roles = data.map((type) => {
        return {
          type,
          name: this.roleNames[type],
        };
      });
    },
    async toAuth(item) {
      if (this.loading) return;
      this.loading = true;
      const data = await yptAuth(item.type).catch(() => {});
      this.loading = false;

      if (!data) return;
      const url = data.redirectUrl;
      const params = { ...data, returnUrl: window.location.href };
      delete params.redirectUrl;
      autoSubmitForm(url, params);
    },
  },
};
</script>
