<template>
  <div class="addon" :class="{collapse:isCollapse}">
    <div class="addon-info">
      <img alt="" :src="icon||addon.icon" class="logo">
      <div class="addon-name over">{{ title || addon.title }}</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAddonInfo } from '../../api/addon'

export default {
  name: 'DkAddonInfo',
  inject: {
    layout: {
      default: {
        opened: true
      }
    }
  },
  props: {
    value: {
      default: '',
      type: String
    },
    icon: {
      default: '',
      type: String
    },
    title: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      addon: {}
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    isCollapse() {
      if (this.layout) {
        return !this.layout.opened
      } else {
        return false
      }
    }
  },
  mounted() {
    if (!this.title || !this.icon) {
      getAddonInfo().then(res => {
        this.addon = res.data
      })
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.addon {
  border-top: 1px solid #f5f5f5;
  text-align: center;

  .addon-info {
    margin: 20px 0;

    .logo {
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      border-radius: 100%;
    }

    .addon-name {
      margin: 5px 0;
      font-size: 14px;
    }

    .addon-type {
      margin-top: 10px;

      span {
        margin: 0 2px
      }
    }
  }

  &.collapse {
    .logo {
      width: 32px;
      height: 32px;
    }

    .addon-name {
      display: none;
      width: 50px;
      overflow: hidden;
    }
  }
}
</style>
