<template>
  <div class="xt-tab">
    <div class="tab-list">
      <div
        :class="[
          'tab-list_item',
          selected == item.key ? 'tab-list_item--selected' : '',
          item.disabled ? 'tab-list_item--disabled' : '',
        ]"
        v-for="item in data"
        :key="item.key"
        @click="handleClick(item)"
        :style="{ minWidth: width + 'px' }"
      >
        <a-tooltip placement="top" v-if="item.toolTipTitle">
          <template #title>
            <span>{{ item.toolTipTitle }}</span>
          </template>
          <div
            v-if="item.prefixColor"
            class="tab-list_item-prefix"
            :style="{ backgroundColor: item.prefixColor }"
          />
          <div :class="['tab-list_item-cnt']">
            <span>{{ item.label }}</span>
            <span
              v-if="item.hasValue"
              :style="{ color: selected == item.key ? '#ffffff' : item.valueColor || '#273240' }"
            >
              <span v-if="item.hasBracket">({{ item.value }})</span>
            </span>
          </div>
        </a-tooltip>
        <template v-else>
          <div
            v-if="item.prefixColor"
            class="tab-list_item-prefix"
            :style="{ backgroundColor: item.prefixColor }"
          />
          <div :class="['tab-list_item-cnt']">
            <span>{{ item.label }}</span>
            <span
              v-if="item.hasValue"
              :style="{ color: selected == item.key ? '#ffffff' : item.valueColor || '#273240' }"
            >
              <span v-if="item.hasBracket">({{ item.value }})</span>
            </span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    // 宽度
    width?: number;
    // 类型
    type: string | null;
    // 选中
    selected: string;
    // 数据
    data: Array<{
      // 唯一值
      key: string | number;
      // 是否disabled
      disabled?: boolean;
      // 名称
      label: string;
      // 后缀的值
      value?: string | number | null | undefined;
      // 是否有括号
      hasBracket?: boolean;
      // 是否有后缀值
      hasValue?: boolean | unknown;
      // 前缀颜色
      prefixColor?: string | unknown;
      // 后缀值颜色
      valueColor?: string | unknown;
      // 标头提示内容
      toolTipTitle?: string | unknown;
    }>;
  }
  const props = withDefaults(defineProps<Props>(), {
    type: null,
    width: 100,
    selected: '0',
    data: () => [],
  });
  defineOptions({
    name: 'XTTab',
  });
  const emit = defineEmits(['itemClick']);

  async function handleClick(data) {
    if (!data.disabled) {
      console.log('🚀 ~ file: XTTab.vue:36 ~ handleClick ~ data:', data);
      emit('itemClick', { type: props.type, value: data.key });
    }
  }
</script>

<style lang="less" scoped>
  // .xt-tab {
  // }
  .tab-list {
    display: flex;
    align-items: center;

    &_item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 20px;
      min-width: 100px;
      height: 40px;
      color: #273240;
      border-radius: 4px;
      line-height: 40px;
      font-size: 14px;
      cursor: pointer;
      margin-right: 10px;
      transition: all 0.3s ease-in-out;

      &:hover,
      &--selected {
        font-size: 16px;
        font-weight: 600;
        color: #fff !important;
        background-color: #0075ff;

        span {
          color: #fff !important;
        }
      }

      &--disabled {
        color: #ccc;

        &:hover {
          color: #ccc !important;
          font-size: 14px;
          font-weight: 400;
          background-color: transparent;
          cursor: auto;

          span {
            color: #ccc !important;
          }
        }
      }

      &-prefix {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 4px;
      }
      // &-cnt {
      // }
    }
  }
</style>
