<template>
  <a v-if="type === 'link'" :href="link" target="_blank" class="fp-aside-btn" :class="{ 'activated': activated }" >
    <i class="iconfont" :class="[ `icon-${icon}`]"></i>
    {{ text }}
  </a>
  <button v-else-if="type === 'button'" class="fp-aside-btn" :class="{ 'activated': activated }" @click="clickHandler">
    <i class="iconfont" :class="[ `icon-${icon}`]"></i>
    {{ text }}
  </button>
</template>

<script>
export default {
  name: "FpAsideButton",
  props: {
    id: {
      type: Number,
      default: 0
    },
    activated: {
      type: Boolean,
      default: false
    },
    extend: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'zujian'
    },
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'button'
    },
    link: {
      type: String,
      default: '/'
    }
  },
  methods: {
    clickHandler() {
      let t = !this.activated
      // if (this.extend) {
      // }
      this.$emit('update:activated', t)
      this.$emit('changeState')
    }
  }
}
</script>

<style scoped>

.fp-aside-btn {
  text-align: center;
  position: relative;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 500;
  /*line-height: 17px;*/
  color: var(--font-color);
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 0;
  user-select: none;
  display: inline-block;
  text-decoration: none;
}

.fp-aside-btn.activated:before, .fp-aside-btn:hover:before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  height: 40px;
  width: 3px;
  background-color: var(--primary-color);
}

.fp-aside-btn.activated, .fp-aside-btn.activated i {
  color: var(--primary-color);
}

.fp-aside-btn i {
  display: block;
  margin: 0 auto 4px;
  font-size: 24px;
  /*font-weight: 500;*/
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  color: var(--icon-color);
  fill: currentColor;
}

</style>