<template>
  <div class="multiple-operation">
    <ul class="multiple-operation-main">
      <li
        class="multiple-operation-main-item"
        v-for="item in tabList"
        :key="item.id"
        v-show="item.visible"
        @click="onClickIcon(item)"
      >
        <div class="icon">
          <WlPic :src="item.icon" />
        </div>
        <p class="title">{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "MtFooterTabs",
  props: {
    tabList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: { WlPic },
  methods: {
    onClickIcon(item) {
      this.$emit("onChange", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.multiple-operation {
  height: 76px;
  background-color: #1c9fff;
  box-shadow: 0px -4px 8px rgba(28, 159, 255, 0.1);
  @extend %flex-direction-column;
  &-main {
    flex: 1;
    @extend %flex-middle;
    &-item {
      flex: 1;
      cursor: pointer;
      .icon {
        width: j(20);
        height: j(20);
        margin: 0 auto;
      }
      .title {
        color: #fff;
        font-size: j(12);
        margin-top: j(4);
        text-align: center;
      }
    }
  }
}
</style>
