<template>
  <div class="btns">
    <div class="item" v-for="item in items" :class="{ 'item-active': activeText === item.text }" @click="btnClick(item)">
      <div class="item__icon">
        <SvgIcon :icon-class="item.icon"></SvgIcon>
      </div>

      <div class="item__text">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 60" preserveAspectRatio="xMinYMin meet">
          <defs>
            <linearGradient id="active-item-color" x1="50%" y1="0%" x2="50%" y2="100%">
              <stop offset="0%" stop-color="#00000066"></stop>
              <stop offset="100%" stop-color="#3eb29caa"></stop>
            </linearGradient>
          </defs>
          <path d="M 0 0 L 165 0 Q 180 0 180 15 L 180 45 Q 180 60 165 60 L 0 60 Q 30 30 0 0 z" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
        </svg>
        <p>{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon"
export default {
  components: {
    SvgIcon
  },
  data() {
    return {
      activeText: "资产总览",
      items: [
        { text: "资产总览", icon: "house",  type: 1 },
        { text: "租赁数据", icon: "qiandai", type: 2 },
        { text: "安全巡检", icon: "weixiu", type: 3 },
      ]
    }
  },
  methods: {
    btnClick (item) {
      this.activeText = item.text
      this.$store.commit("bigdata/SET_TYPE", item.type)
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss">
.btns {
  position: absolute;
  top: 20%;
  left: 8px;

  .item {
    transition: all .2s;
    cursor: pointer;
    color: #8ecec2;
    display: flex;
    align-items: center;

    &__icon {
      color: currentColor;
      border-radius: 100%;
      border: 2px dashed currentColor;
      width: 50px;
      height: 50px;
      padding: 10px;
      position: relative;

      & > svg {
        width: 100%;
        height: 100%;
      }

      &::after {
        content: "";
        width: 60px;
        height: 60px;
        border-radius: 100%;
        border: 2px solid currentColor;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &__text {
      height: 60px;
      line-height: 60px;
      width: 180px;
      letter-spacing: 1px;
      color: currentColor;
      position: relative;
      & > svg {
        width: 100%;
        height: 100%;

        position: absolute;
        top: 0;
        right: 0;
        left: -2%;
        bottom: 0;
      }
      & > p {
        font-weight: 600;
        font-size: 18px;
        color: #fff;
        text-align: center;
        position: relative;
        z-index: 2;
      }
    }

    &-active {
      color: #3eb29c;

      & > .item__text svg {
        transition: all .2s;
        fill: url(#active-item-color);
      }
    }
  }
  .item + .item {
    margin-top: 40px;
  }
}
</style>
