<template>
  <div id="index">
    <div class="user-dialog">
      <div class="user-list" v-if="loginType == 'login'">
        <template v-if="ajaxSuccess && userList.length > 1">
          <div class="title">选择账号登录</div>
          <div
            :class="['user', activeUser == index ? 'active' : '']"
            v-for="(user, index) in userList"
            :key="index"
            @click="activeUser = index"
          >
            <div class="radio" v-if="activeUser != index"></div>
            <div class="select-radio" v-if="activeUser == index"></div>
            {{ user.op_code }}
          </div>
          <el-button style="width: 100%" type="primary" @click="selectLogin"
            >选择登录</el-button
          >
        </template>
        <template v-else>
          <div style="text-align: center">
            <img class="bind-img" src="@/assets/common/logging.png" alt="" />
          </div>
          <div class="bind-text">登录中...</div>
        </template>
      </div>
      <div v-else style="text-align: center">
        <img
          class="bind-img"
          v-if="activeIndex == 0"
          src="@/assets/common/logging.png"
          alt=""
        />
        <img
          class="bind-img"
          v-else-if="activeIndex == 1"
          src="@/assets/common/success.png"
          alt=""
        />
        <div class="bind-text">
          {{ bindText }}
        </div>
        <div style="text-align: center" v-if="jumpUrl">
          <el-button type="primary" @click="jump">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAuth, logout } from "@/api/index";
export default {
  name: "Index",
  data() {
    return {
      loginType:
        this.$route.query.redirectUrl &&
        this.$route.query.redirectUrl.split("_")[0],
      activeIndex: 0,
      userList: [],
      activeUser: 0,
      bindText: "绑定中",
      ajaxSuccess: false,
      jumpUrl: "",
      iframeSrc: "",
    };
  },
  components: {},

  computed: {},
  methods: {
    selectLogin() {
      if (this.activeUser === null) {
        return this.$message.error("请选择用户登录!");
      }
      window.location.href = this.userList[this.activeUser].url;
    },
    autoLogin() {
      if (
        !this.$route.query.redirectUrl ||
        this.$route.query.redirectUrl.indexOf("_") == -1
      ) {
        return this.$message.error("url参数错误!");
      }
      setTimeout(() => {
        getAuth({
          ticketId: this.$route.query.ticketId,
          sp: this.$route.query.redirectUrl.split("_")[0],
          systicketId: this.$route.query.redirectUrl.split("_")[1],
        }).then((res) => {
          if (res.status == 200) {
            this.ajaxSuccess = true;
            if (this.$route.query.redirectUrl.split("_")[0] == "login") {
              if (res.data.length == 1) {
                window.location.href = res.data[0].url;
              } else if (res.data.length > 1) {
                this.userList = res.data;
              }
            } else if (this.$route.query.redirectUrl.split("_")[0] == "bind") {
              this.activeIndex = 1;
              this.bindText = "绑定成功";
            }
          } else {
            if (this.loginType == "login") {
              this.loginType = "bind";
            }

            this.bindText = res.msg;
            if (res.data && res.data.length > 0) {
              this.jumpUrl = res.data;
            }
          }
        });
      }, 1000);
    },
    jump() {
      window.location.href = this.jumpUrl;
    },
  },
  mounted() {},
};
</script>
<style scoped lang="less">
#index {
  height: 100%;
}
.title {
  padding-left: 12px;
  position: relative;
  color: #333;
  font-size: 18px;
  margin-bottom: 32px;
  &::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 50%;
    width: 3px;
    height: 20px;
    transform: translateY(-50%);
    background: #5798eb;
  }
}
.user-dialog {
  width: 420px;
  padding: 30px 0;
  margin: 0 auto;
}
.user {
  padding: 12px 20px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  line-height: 22px;
  margin-bottom: 20px;
  cursor: pointer;
  &.active {
    border: 1px solid #5798eb;
    .radio {
    }
  }
  .radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #d2d2d2;
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
  }
  .select-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    border: 1px solid #5798eb;
    vertical-align: top;
    display: inline-block;
    margin-right: 4px;
    &::after {
      position: absolute;
      left: 3px;
      top: 3px;
      height: 14px;
      width: 14px;
      background: #5798eb;
      content: "";
      border-radius: 50%;
    }
  }
}
img {
  width: 200px;
  vertical-align: top;
  margin: 0 auto;
}
.bind-text {
  text-align: center;
  font-size: 20px;
}
</style>