<template>
  <div
    class="zr-tabs"
    :style="{ color: color + '!important',margin:margin}"
    :class="{
        'zr-tabs-positon-left': position == 'left',
        'zr-tabs-positon-right': position == 'right',
        'zr-tabs-bottm-line':bottomLine
    }"
  >
    <div
      class="zr-tabs-items"
      v-for="(item, index) in tabs"
      :key="index"
      :class="{
        'zr-tabs-flex': flex,
        'is-active': item[option.value] == curIndex,
        'zr-tabs-vertical': vertical,
        'zr-tabs-normal': type === 'normal',
        'zr-tabs-line': type === 'line',
        'zr-tabs-card': type === 'card',
      }"
      :style="{ 
        'height': height + 'px',
        'border-color': borderColor,
        'backgroundColor':item[option.value] == curIndex? curBackground:''}"
      @click="changeTabs(item)"
    >
      <div class="zr-tabs-icon" v-if="showIcon">
        <i
          class="zr-icon iconfont"
          :class="item.icon ? item.icon : item[option.icon]"
        ></i>
      </div>
      <div class="zr-tabs-title" :style="{ 'fontSize': fontSize }">
        <span>{{ item.title ? item.title : item[option.label] }}</span>
      </div>
      <div class="zr-tabs-num" v-if="showNum">
          <slot name="tabsNum" :tabsNum="item.count"></slot>
      </div>
      <div
        class="zr-tabs-bar"
        v-if="item.id ? item.id == curIndex : item[option.value] == curIndex"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZrTabs",
  props: {
    // tabs 数据
    tabs: {
      type: Array,
      default() {
        return [];
      },
    },
    // 配置项
    option: {
      type: Object,
      default() {
        return {};
      },
    },
    // 当前选中
    curIndex: {
      type: Number | String,
      default: 0,
    },
    // tabs 高度 默认高度40px
    height: {
      type: Number,
      default: 40,
    },
    // 字体默认颜色
    color: {
      type: String,
      default: "#333333",
    },
    // 是否显示icon
    showIcon: {
      type: Boolean,
      default: true,
    },
    // 纵向排版方式vertical 默认为横向
    vertical: {
      type: Boolean,
      default: false,
    },
    // tabs 风格类型：line 分隔线 card 卡片
    type: {
      type: String,
      default: "normal",
    },
    // 自定义分隔线属性
    borderColor: {
      type: String,
      default: "rgba(0,0,0,.1)",
    },
    // 选中背景颜色设置
    curBackground: {
        type: String,
        default: "",
    },
    // 是否自适应宽度
    flex: {
      type: Boolean,
      default: false,
    },
    // 排版位置
    position: {
        type: String,
        default: "",
    },
    fontSize: {
      type: String,
      default: "14px",
    },
    bottomLine: {// 底部是否显示线条
      type: Boolean,
      default: false,
    },
    showNum: {//是否显示数字
      type: Boolean,
      default: false,
    },
    // 边距
    margin:{
      type:String,
      defalut:'',
    },
  },
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {
    changeTabs(row) {
      this.$emit("changeTabs", row);
    },
  },
};
</script>

<style lang="less" scoped>
.zr-tabs {
  display: flex;
  width: 100%;
  .zr-tabs-items {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0 15px;
    cursor: pointer;
    opacity: 0.9;
    .zr-tabs-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      .zr-icon {
        font-size: 16px;
      }
    }
  }
  .zr-tabs-flex {
    flex: 1;
  }
  .zr-tabs-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 1px;
    z-index: 2;
  }
  .zr-tabs-items:hover {
    opacity: 1;
    color: var(--primary-color);
  }
  .zr-tabs-vertical {
    flex-direction: column;
    .zr-tabs-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      .zr-icon {
        font-size: 20px;
      }
    }
  }
  .zr-tabs-line {
    border-right: 1px solid;
  }
  .zr-tabs-line:last-child {
    border-right: none;
  }
  .is-active {
    opacity: 1;
    color: var(--primary-color);
    z-index:2;
  }
  .is-active .zr-tabs-bar {
    background-color: var(--primary-color);
  }
}
.zr-tabs-positon-left {
    flex-direction: column;
    .zr-tabs-items {
        position: relative;
        width: 100px;
        border-right: 3px solid rgba(0,0,0,.1);
        .zr-tabs-bar {
            position: absolute;
            left: 130px;
            top: 0;
            width: 3px;
            height: 100%;
            border-radius: 1px;
        }
    }
    
}
.zr-tabs-positon-right {
    flex-direction: column;
    .zr-tabs-items {
        position: relative;
        width: 100px;
        border-left: 3px solid rgba(0,0,0,.1);
        .zr-tabs-bar {
            position: absolute;
            left: -3px;
            top: 0;
            width: 3px;
            height: 100%;
            border-radius: 1px;
        }
    }
    
}
.zr-tabs-bottm-line{
   position: relative;
    &:after{
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #dfe4ed;
      z-index: 1;
    }
}
</style>