<template>
  <div
    :class="[
      {
        'k-tab-group-plain': type == 'plain',
        'k-tab-group-fill': type == 'fill',
      },
    ]"
    :style="[
      themeColor ? { '--k-color-primary-01': themeColor } : {},
      type == 'plain'
        ? { paddingLeft: paddingLr + 'px', paddingRight: paddingLr + 'px' }
        : {},
    ]"
  >
    <template v-if="type == 'fill'">
      <span
        v-for="(tab, index) in tabs"
        :key="index"
        :class="[
          'k-tab-group__item',
          {
            'k-tab-group__item-first': index == 0,
            'k-tab-group__item-last': index == tabs.length - 1,
            'k-tab-group__item--active': current == index,
          },
        ]"
        @click="changeTab(index)"
        >{{ tab }}</span
      >
    </template>
    <template v-else>
      <div
        :class="[
          'k-tab-group__item',
          { 'k-tab-group__item--active': current == index },
        ]"
        v-for="(tab, index) in tabs"
        @click="changeTab(index)"
        :key="index"
      >
        <span class="k-tab-group__item__span">{{ tab }}</span>
        <div
          :style="{ width: lineWidth }"
          class="k-tab-group__item__line"
        ></div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'k-tab',
  props: {
    type: {
      type: String,
      default: 'plain', // 'plain' | 'fill'
    },
    tabs: {
      type: Array,
      default: () => [],
    },
    defaultCurrent: {
      type: Number,
      default: 0,
    },
    lineWidth: {
      type: String,
      default: '104px',
    },
    // TODO 多端自适应如何处理
    // width: {
    //   type: String,
    //   default: '350px',
    // },
    themeColor: {
      type: String,
      default: '',
    },
    // padding-left & padding-right,  单位 px
    // 仅在 type = plain 时有效
    paddingLr: {
      type: Number,
      default: 40,
    },
  },
  data() {
    return {
      current: this.defaultCurrent,
    };
  },
  computed: {
    styleObj() {
      // 在真机上不能给 --k-color-primary-01 传入空值
      // 用 styleObj 这个计算属性加上 template 中写 :style="styleObj" 也不行
      if (this.themeColor) {
        return { '--k-color-primary-01': this.themeColor };
      }
      return {};
    },
  },
  watch: {
    defaultCurrent(newVal) {
      this.current = newVal;
    },
  },
  methods: {
    changeTab(index) {
      this.current = index;
      this.$emit('change', index);
    },
  },
};
</script>

<style scoped lang="less">
/* stylelint-disable selector-class-pattern */
.k-tab-group-plain,
.k-tab-group-fill {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--k-color-neutral-01, #333);
}

.k-tab-group-plain {
  justify-content: space-between;
  border-bottom: 0.5px solid #e1e2e8; // TODO 需要替换为 css 变量

  .k-tab-group__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 13px;

    .k-tab-group__item__text {
      color: var(--k-color-neutral-01, #333);
      text-align: center;
      font-size: 24.375px;
    }

    .k-tab-group__item__line {
      width: 100%;
      height: 2px;
      margin-top: 2px;
      background-color: transparent;
    }
  }

  .k-tab-group__item.k-tab-group__item--active {
    .k-tab-group__item__text {
      color: var(--k-color-primary-01, #064c8a);
    }

    .k-tab-group__item__line {
      background-color: var(--k-color-primary-01, #064c8a);
    }
  }
}

.k-tab-group-fill {
  position: relative;
  &:before{
    position: absolute;
    content: "";
    left: 1px;
    right: 1px;
    bottom: 0;
    top: 0;
    -webkit-box-shadow:0px 0px 0px 0.75px var(--k-color-primary-01, #064c8a);
    border-radius: 35.75px;
    z-index: 1;
  }
  .k-tab-group__item {
    z-index: 2;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    //border-top: 1px var(--k-color-primary-01, #064c8a) solid;
    //border-bottom: 1px var(--k-color-primary-01, #064c8a) solid;
    // padding: 8px 16px;
    margin-left: -24.375px;
    // font-size: 15px;
    font-weight: 400;


    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 24.375px;
    line-height: 34px;
    /* identical to box height */
    padding: 13px 26px;
    // text-align: right;
    //color: #999999;
    color: var(--k-color-primary-01, #064c8a);
  }

  .k-tab-group__item.k-tab-group__item-first {
    //border-left: 1px var(--k-color-primary-01, #064c8a) solid;
    margin-left: 0;
    border-radius: 35.75px 0 0 35.75px;
  }

  .k-tab-group__item.k-tab-group__item-last {
    //border-right: 1px var(--k-color-primary-01, #064c8a) solid;
    border-radius: 0 35.75px 35.75px 0;
  }

  .k-tab-group__item.k-tab-group__item--active {
    //border: 1px var(--k-color-primary-01, #064c8a) solid;
    border-radius: 35.75px;
    background-color: var(--k-color-primary-01, #064c8a);
    color: #fff;
  }
}
// TODO plain 模式下选中后加一点动画?
// TODO 左右滑动
</style>
