<template>
  <el-dialog
    class="third-auth-dialog"
    :visible.sync="modalIsShow"
    title="请选择阅卷身份"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    @open="visibleChange"
  >
    <div class="auth-list">
      <div
        v-for="item in roles"
        :key="item.type"
        class="auth-item"
        @click="toAuth(item)"
      >
        {{ item.name }}
      </div>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

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

export default {
  name: "third-auth-dialog",
  data() {
    return {
      modalIsShow: false,
      roles: []
    };
  },
  methods: {
    visibleChange() {
      this.getRoles();
    },
    async getRoles() {
      this.roles = [];
      const data = await userSysRoles();
      this.roles = data || [];
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async toAuth(item) {
      const data = await yptAuth(item.type);
      const url = data.redirectUrl;
      const params = { ...data, returnUrl: window.location.href };
      delete params.redirectUrl;
      autoSubmitForm(url, params);
    }
  }
};
</script>
