<template>
  <div class="serviceCard">
    <a-tabs :activeKey="tabsActive" type="editable-card" hideAdd size="small" :tabBarGutter="6" :tabBarStyle="{padding: '0 52px 0 8px'}" @tabClick="tabclick" @edit="tabClose">
      <a-tab-pane :forceRender="true" v-for="(item) in tabsArray" :key="item.key" :tab="item.title" :closable="item.closable">
        <a-dropdown style="position: absolute;right: 2px;top: 0" :trigger="['click','']">
          <a class="ant-dropdown-link">
            <a-icon type="double-right" class="adp-icon" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item :disabled="disabled" @click="operation(1,tabsActive)">关闭当前标签页</a-menu-item>
            <a-menu-item @click="operation(2,tabsActive)">关闭其他标签页</a-menu-item>
            <a-menu-item @click="operation(3,tabsActive)">关闭全部标签页</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px;transform:rotate(90deg);width:40px;height:37px;border:0" icon="double-right"></a-button>
        </a-dropdown>
        <!-- <a-dropdown :trigger="['contextmenu']" :value="contextmenuVisible" slot="tab">
          <span>
            <span>{{ item.title }}</span>
            <a-icon type="close" v-if="item.closable" style="margin-left: 8px;margin-right: 0" @click.stop="operation(1,item.key)" />
          </span>
        </a-dropdown> -->
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "ServiceCardList",
  data () {
    return {
      contextmenuVisible: false,
      disabled: false, //判断关闭当前页签是否展示
    }
  },
  created () {

  },
  computed: {
    tabsArray: {
      get () {
        return this.$store.state.app.tabsArray
      },
      set () {

      }
    },
    tabsActive: {
      get () {
        return this.$store.state.app.tabsActive
      },
      set () {

      }
    },
  },
  methods: {
    ...mapMutations(`app`, [`clickCard`, `closeCard`, `optCard`]),
    tabclick (key) {
      this.clickCard(key)
    },
    tabClose (key) {
      this.closeCard(key)
    },
    /**
     * 页签卡片操作
     * @param type 0 点击切换  1 关闭当前页签  2关闭其他标签 3关闭所有标签
     * @param key
     */
    operation (type, key) {
      this.optCard({ key: key, type: type })
    },
  }
}
</script>

<style scoped lang="less">
.serviceCard {
  width: 100%;
  ::v-deep .ant-tabs .ant-tabs-bar {
    height: 36px;
    line-height: 34px;
    margin: 0 !important;
    .ant-tabs-nav-container {
      height: 36px;
    }
    .ant-tabs-nav-container
      .ant-tabs-nav-wrap
      .ant-tabs-nav-scroll
      .ant-tabs-nav {
      .ant-tabs-tab {
        height: 36px;
        line-height: 34px;
        margin-right: 4px !important;
      }
      // .ant-tabs-tab-active {
      //   background: #0079fe !important;
      //   color: #fff;
      //   .ant-tabs-close-x {
      //     color: #fff;
      //   }
      // }
    }
  }
  .adp-icon {
    font-size: 18px;
    color: #949494;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    margin: 6px 14px 0 0;
  }
}
</style>