<template>
  <div class="btn-group-with-icon">
    <div class="btn-group-with-icon-list" v-for="(group, i) of btnGroups" :key="group">
      <i v-if="group.icon != '' && group.icon.indexOf('fa fa') >= 0" :class="group.icon"></i>
      <span v-if="group.icon != '' && group.icon.indexOf('svg-') >= 0" class="svg-icon svg-icon-gray svg-icon-md">
        <SvgIcon :svgid="group.icon"></SvgIcon>
      </span>
      <a href="javascript:;" v-for="(btn, index) of group.btns" :key="btn" @click="click(i, index)" :class="{ active: activeIndex == index && activeRow == i }">
        {{ btn.text }}
      </a>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  // 名称
  name: "BtnGroup2",
  // 组件
  components: {
    SvgIcon,
  },
  // 传入参数
  props: {
    /**
             * {
                    icon: "fa fa-fire",
                    btns: [{
                        text: "某某风场",
                    }, {
                        text: "某某风场",
                    }, {
                        text: "某某风场",
                    }, {
                        text: "某某风场",
                    }, {
                        text: "某某风场",
                    }]
                }
             */
    btnGroups: Array,
    // 默认选择第几组
    rowIndex: {
      type: Number,
      default: 0,
    },
    // 默认选中第几个
    index: {
      type: Number,
      default: 0,
    },
  },
  // 自定义事件
  emits: {
    select: null,
  },
  // 数据
  data() {
    return {
      activeRow: 0,
      activeIndex: 0,
    };
  },
  // 函数
  methods: {
    click: function(i, index) {
      this.activeRow = i;
      this.activeIndex = index;
      this.$emit("select", this.btnGroups[i].btns[index]);
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
    this.activeRow = this.rowIndex;
    this.activeIndex = this.index;
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
.btn-group-with-icon {
  display: flex;
  flex-direction: row;

  .btn-group-with-icon-list {
    display: flex;
    flex-direction: row;
    margin-left: 1.481vh;
    align-items: center;

    &:first-child {
      margin-left: 0;
    }

    i,
    span {
      color: @gray;
      margin-right: 0.556vh;
      font-size: @fontsize-l;
      line-height: 1.5;
    }

    a {
      text-decoration: none;
      color: @gray;
      margin-right: 0.278vh;
      border: 0.093vh solid @darkgray;
      border-radius: 0.185vh;
      width: 9.815vh;
      // height: 2.13vh;
      // line-height: 2.13vh;
      padding: 0.3704vh 0;
      text-align: center;
      font-size: @fontsize-s;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        color: @write;
        background-color: @darkBlue;
      }
    }
  }
}
</style>
