<template>
  <div>
    <el-dropdown @command="toProject" trigger="click" @visible-change="toSearch">
      <span class="el-dropdown-link" v-if="$slots.default" style="cursor: pointer">
        <slot />
      </span>
      <span class="el-dropdown-link" v-else style="cursor: pointer">
        <i class="el-icon-arrow-down el-icon--right dropIcon" style="color: #fff"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="system-select-dropdown" :style="{ width: width + 'px' }">
        <div v-if="dropdownAppList.length">
          <el-dropdown-item
            v-for="item in dropdownAppList"
            :key="item.appId"
            :disabled="item.isCurrent"
            :command="item.appId"
          >
            <div class="app-item">
              <div class="f-s-c">
                <img class="app-item-img" :src="item.iconUrl" />
                <span class="app-item-name">{{ item.name }}</span>
              </div>
              <i v-if="item.isCurrent" :class="item.isCurrent ? 'el-icon-check' : 'el-icon-position'"></i>
              <icon-redirect v-else></icon-redirect>
            </div>
          </el-dropdown-item>
        </div>
        <div style="padding: 10px" v-else>
          <el-skeleton :rows="4" animated />
        </div>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import axios from "axios";
import IconRedirect from "./iconRedirect.vue";
export default {
  name: "FtlEntry",
  components: { IconRedirect },
  props: {
    authBaseUrl: {
      type: String,
      default: "https://gateway-staging.ftlapp.io",
    },
    width: {
      type: Number,
      default: 240,
    },
  },
  data() {
    return {
      dropdownAppList: [],
    };
  },
  methods: {
    toSearch(flag) {
      if (flag) {
        this.findWebAppResources();
      }
    },
    // 查询用户的所有项目权限
    async findWebAppResources() {
      this.dropdownAppList = [];
      const token = localStorage.getItem("token") || "";
      if (token) {
        let res = await axios.get(`${this.authBaseUrl}/api/auth/account/findAllWebAppV2`, {
          headers: {
            Authorization: token,
          },
        });
        this.dropdownAppList = res.data;
      }
    },
    // 点击前往指定项目地址
    async toProject(targetAppId) {
      const token = localStorage.getItem("token") || "";
      let res = await axios({
        url: `${this.authBaseUrl}/api/sso/navigatorTo/${targetAppId}`,
        method: "get",
        headers: {
          Authorization: token,
        },
      });
      if (res.data.targetAppUrl) {
        if (res.data.targetAppToken) {
          window.open(`${res.data.targetAppUrl}?token=${res.data.targetAppToken}`, "_blank");
        } else {
          window.open(`${res.data.targetAppUrl}`, "_blank");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dropdown-menu::-webkit-scrollbar {
  width: 0;
}
.el-dropdown-menu__item.is-disabled {
  color: #606266;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #f9f9fa;
  color: #000;
  font-weight: bold;
}
.system-select-dropdown {
  left: 0 !important;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}
.app-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  &-img {
    width: 30px;
    height: 30px;
    margin-right: 12px;
  }
}
</style>
