<template>
  <div class="change-content">
    <el-dropdown size="medium" @command="handleCommand">
      <span class="el-dropdown-link">
        <span>
          <i class="el-icon-sort icon-change" />
          切换应用
        </span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in appData"
          :key="index"
          :command="item.linkUrl"
        >{{ item.appName }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import { changeApplication } from "@/api/menu";

  export default {
    name: "change",
    data() {
      return {
        appData: [],
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        changeApplication().then((res) => {
          console.log(res);
          this.appData = res.data || [];
        });
      },
      handleCommand(command) {
        this.$message("click on item " + command);
        window.location.href = command;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .change-content {
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    .el-dropdown {
      color: white;
      width: 100%;
      .el-dropdown-link {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-change {
          margin-right: 15px;
        }
      }
    }
  }

  .el-dropdown-menu {
    top: 80px !important;
    left: 200px !important;
  }
</style>
