<template>
  <span class="bk-tag" @click="clickTag" :class="className + ' ' + shape">
    <div><img v-if='beforeIcon' :src="beforeIcon" alt="图标" class='left-icon icon'></div>
    <div class='text'>{{text}}</div>
    <div><img v-if='afterIcon' :src="afterIcon" alt="图标" class=' icon'></div>
  </span>
</template>
<script>
/** 标签组件
 * text： 文案
 * fontColor: 字体言责
 * beforeIcon： 前图标
 * afterIcon: 后图标
 * clickTag： 点击事件
 * className：可用做覆盖样式
 * shape： 预置样式， 矩形两种（block, left-bottom-radius），三角形四种(right-top-triangle, right-bottom-triangle, left-top-triangle, left-bottom-triangle)
*/
export default {
  props: {
    text: ['String'],
    beforeIcon: ['String'],
    afterIcon: ['String'],
    clickTag: ['Function'],
    className: ['String'],
    shape: ['String']
  },
  data: () => {},
  methods: {}
}
</script>

<style>
.bk-tag {
  display: inline-table;
  position: relative;
}
.bk-tag > div {
  display: inline-block;
}
/*三角形*/
[class$='-triangle'] {
  font-size: 22px;
  width: 0;
  height: 0;
  border-style: solid;
}
[class$='-triangle'] .text {
  position: absolute;
  color: #fff;
  left: -30px;
  top: 58px;
}
.right-top-triangle {
  border-width: 0 0 66px 66px;
  transform: rotateX(180deg);
  border-color: transparent transparent #F86139;
}
.right-top-triangle .text {
  transform: rotateX(180deg);
}
.right-bottom-triangle {
  border-width: 0 0 66px 66px;
  border-color: transparent transparent #5498FF;
  transform:translateY(-30px);
}
.left-top-triangle {
  border-width: 0 0 66px 66px;
  transform: rotateY(180deg) translateY(-30px);
  border-color: transparent transparent #F86139;
}
.left-top-triangle .text {
  transform: rotateY(180deg);
}
.left-bottom-triangle {
  border-width: 0 0 66px 66px;
  transform: rotateX(180deg) rotateY(180deg);
  border-color: transparent transparent #F86139;
}
.left-bottom-triangle .text {
  transform: rotateX(180deg) rotateY(180deg);
}

/*矩形*/
.block {
  padding:7px 16px;
  border-radius: 4px;
  align-items: center;
  box-sizing: border-box;
}
.left-bottom-radius {
  background:rgba(59,196,139,1);
  border-radius:0px 8px 0px 30px;
  color: #fff;
  font-size: 22px;
  padding: 6px 18px 6px 30px;
}


/*前后图标*/
.bk-tag .icon {
  width: 20px;
  height: 20px;
}
.right-icon {
  margin-left: 12px;
}
.left-icon {
  margin-right: 12px;
}

</style>

