<template>
  <ElTabs type="card" v-bind="$attrs" class="CardTabs" v-on="$listeners">
    <ElTabPane :label="item.label" :name="item.key" :index="item.key" v-for="item in panels" :key="item.key" />
  </ElTabs>
</template>

<script>
export default {
  name: 'CardTabs',
  props: {
    /**
     * {key: string; label: string; disabled?: boolean;}[]
     */
    panels: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang='scss' scoped>
.CardTabs {
  ::v-deep {
    .el-tabs__header {
      margin: 0;
      border: 0;

      .el-tabs__nav-wrap {
        border-top: 1px solid #016D90;
        border-bottom: 1px solid #016D90;
        background-color: rgba(19, 39, 47, 0.3);

        .el-tabs__nav {
          border-radius: 0;
          border: 0;

          .el-tabs__item {
            height: 34px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 30px;
            border: 0;
            border-right: 1px solid #016D90;

            &:first-child {
              border-left: 1px solid #016D90;
            }

            &.is-active {
              background: #133242 linear-gradient(180deg, #005C79 0%, #009BCC 100%);
              color: #fff !important;
              border-right: 0;
              border-left: 0;

              // &+.el-tabs__item {
              //   border-right: 0;
              //   border-left: 0;
              // }
            }
          }
        }
      }
    }
  }
}
</style>
