<template>
  <flexbox
    :class="{ 'is-select': isSelect}"
    class="wk-border-menu">
    <div
      v-for="(tab, index) in list"
      :key="index"
      :class="{ 'is-select': tabType == tab.name}"
      class="wk-border-menu__item"
      @click="tabClick(tab, index)">
      <div class="label">{{ tab.label }}</div>
      <div class="num">{{ tab.num }}</div>
    </div>
  </flexbox>
</template>

<script>

export default {
  // border 菜单 员工头部筛选效果
  name: 'WkBorderMenu',
  components: {},
  props: {
    list: Array,
    value: [String, Number],
    isSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabType: ''
    }
  },
  computed: {},
  watch: {
    value: {
      handler(val) {
        this.tabType = val
      },
      immediate: true
    }
  },
  mounted() {},

  beforeDestroy() {},
  methods: {
    tabClick(tab, index) {
      this.$emit('input', tab.name)
      this.$emit('select', tab, index)
    }
  }
}
</script>

<style lang="scss" scoped>
.wk-border-menu {
  border: 1px solid #EBECF0;
  background-color: #FAFAFA;
  border-radius: 4px;
  position: relative;
  overflow: hidden;

  &__item {
    cursor: pointer;
    position: relative;
    text-align: center;
    flex-shrink: 0;
    flex: 1;
    padding-top: 15px;
    height: 76px;
    min-width: 70px;

    &:hover {
      background-color: #ECEEF2;
    }

    .num {
      font-size: 18px;
      font-weight: bold;
      margin-top: 8px;
    }

    &.is-select {
      background-color: #ECEEF2;
      color: $xr-color-primary;
    }

    &::before {
      position: absolute;
      content: "";
      top: 20px;
      left: 0;
      bottom: 20px;
      width: 1px;
      background-color: #EBECF0;
    }

  }

  &__item:first-child::before {
    display: none;
  }

  &::after {
    position: absolute;
    content: "";
    right: -4px;
    bottom: -4px;
    border: 6px solid transparent;
    border-left: 6px solid #E6E6E6;
    transform: rotate(45deg);
  }

  &.is-select {
    background-color: white;
    &::after {
      border-left-color: $xr-color-primary;
    }
    border-color: $xr-color-primary;
  }
}
</style>
