<template>
  <div id="tags-scroll-bar-container" class="tags-scroll-bar-container">
    <el-tabs
      @tab-click="handleTabClick"
      @tab-remove="handleCancel"
      v-model="tabActive"
      type="card"
      class="tags-content"
      ref="tab"
    >
      <el-tab-pane
        :label="tab[label]"
        :name="tab.id"
        ref="tabPane"
        v-for="tab in tagsList"
        :key="tab.id"
      >
      </el-tab-pane>
    </el-tabs>
    <el-button
      v-if="tagsList.length > 0 && !disabled"
      :type="!tabActive ? 'primary' : ''"
      @click="handleAdd"
      style="margin-left:5px"
      icon="el-icon-plus"
      >新增</el-button
    >
  </div>
</template>

<script>
export default {
  name: "TagsBar",
  props: {
    tagsList: {
      type: Array,
    },
    disabled: {},
  },
  data() {
    const { label } = this.$attrs.props
    return {
      label,
      affixTags: [],
      tabActive: "",
    }
  },

  methods: {
    handleAdd() {
      this.tabActive = ""
      this.$emit("add")
    },
    handleTabClick(tab) {
      this.$emit("change", tab.index)
    },
    initTags() {},
    handleCancel({ index }) {
      this.$emit("handleCancel", index)
    },
  },
  computed: {
    total() {
      return this.tagsList.length
    },
  },
}
</script>

<style lang="scss" scoped>
.tags-scroll-bar-container {
  position: relative;
  box-sizing: border-box;
  height: $base-input-height + 12;
  user-select: none;
  background: $base-color-white;
  border-top: 1px solid #f6f6f6;

  .tags-content {
    margin-left: 6px;
    margin-right: 6px;
    float: left;
    width: calc(100% - 120px);
    height: $base-input-height;

    ::v-deep {
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        height: $base-input-height;
        line-height: $base-input-height;
      }

      .el-tabs__header {
        border-bottom: 0;

        .el-tabs__nav {
          border: 0;
        }

        .el-tabs__item {
          height: $base-input-height;
          line-height: $base-input-height;
          outline: none;
          border: 1px solid #1890ff !important;
          margin-right: 15px;
          border-radius: $base-border-radius;
          transition: none;

          &:hover {
            color: #1890ff;
          }

          &.is-active {
            color: #fff;
            background-color: #1890ff;
            transition: none;
          }

          .el-icon-close {
            position: absolute;
            font-size: 12px;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            line-height: 14.5px;
            overflow: hidden;
            top: 9px;
            left: 3px;
            transform-origin: 100% 50%;
            &:hover {
              background-color: #1890ff;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .tags-aside {
    line-height: 44px;
    &-cancel {
      margin-left: 18px;
      color: salmon;
      cursor: pointer;
    }
    strong {
      color: #1890ff;
    }
  }
  ::v-deep {
    .el-dropdown {
      margin-top: 13px;
    }
  }
}
</style>
