<template>
  <div v-if="inited">
    <div class="source-list-wrap">
      <ul class="source-list">
        <li class="source-item" v-for="item in pluginList" :key="item.name">
          <Button
            v-if="item.icon"
            @click="change(item)"
            :tooltip="item.aliasName"
            :customIcon="`uino-icon uino-icon-${item.icon}`"
            :style="item.active ? 'color: #1f87ff' : ''"
          ></Button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import pluginMixin from '@/mixins/plugin'

export default {
  mixins: [pluginMixin],
}
</script>

<style lang="less" scoped>
.source-list-wrap {
  position: fixed;
  left: 270px;
  top: 10px;
  background: rgba(29, 30, 33, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  z-index: 99;

  ul {
    list-style: none;
    display: flex;
    padding: 5px;
    width: auto;
  }

  li > div {
    margin-right: 10px;
  }

  li:last-of-type > div {
    margin-right: 0;
  }
}
</style>
