<template>
  <view class="subject">
    <view v-if="!showEvery" class="crosswise">
      <scroll-view scroll-x="true" show-scrollbar="false" class="srcoll_box">
        <view class="filter_list">
          <view
            v-for="(item, index) in tabsList"
            :key="index"
            :class="{ filter_list_item: true, active: xzIndex === index }"
            @click="selectFun(item, index)"
          >
            <text class="text">{{ item.subject }}</text>
            <image
              v-show="xzIndex === index"
              class="item-icon"
              :src="`${OSS_URL}/urm/checked_angle_bg.png`"
              mode=""
            >
            </image>
          </view>
        </view>
      </scroll-view>
      <image
        :src="`${OSS_URL}/iconfont/dark_arrow.png`"
        mode=""
        class="arrows_icon"
        @click="tapShowEvery"
      ></image>
    </view>
    <view v-else class="full_display">
      <view class="filter_list full">
        <view
          v-for="(item, index) in tabsList"
          :key="index"
          :class="{ filter_list_item: true, active: xzIndex === index }"
          @click="selectFun(item, index)"
        >
          <text class="text">{{ item.subject }}</text>
          <image
            v-show="xzIndex === index"
            class="item-icon"
            :src="`${OSS_URL}/urm/checked_angle_bg.png`"
            mode=""
          >
          </image>
        </view>
      </view>
      <image
        :src="`${OSS_URL}/iconfont/dark_arrow.png`"
        mode=""
        :class="{ arrows_icon: true, arrows_up: showEvery }"
        @click="tapShowEvery"
      ></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { SubjectType } from '../interface';
import { watch } from 'vue';

const props = withDefaults(
  defineProps<{
    tabsList: SubjectType[];
    userId?: number | string;
  }>(),
  {
    tabsList: () => [],
  },
);
const emits = defineEmits(['handleFilter']);
const OSS_URL = import.meta.env.VITE_OSS_HOST;

const xzIndex = ref(0);
const showEvery = ref(false);

function selectFun(e, i) {
  xzIndex.value = i;
  emits('handleFilter', e);
}

function tapShowEvery() {
  showEvery.value = !showEvery.value;
}
watch(
  () => props.userId,
  val => {
    xzIndex.value = 0;
  },
);
</script>

<style lang="scss" scoped>
.subject {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
  }

  .arrows_icon {
    margin: 46rpx 0 0 0;
    width: 32rpx;
    height: 32rpx;
    transform: rotate(180deg);
  }
}

.crosswise {
  display: flex;
  justify-content: space-between;

  .srcoll_box {
    width: calc(100% - 48rpx);
  }
}

.filter_list {
  display: flex;

  flex-direction: row;
  padding-bottom: 13rpx;

  &_item {
    position: relative;
    padding: 12upx 32upx;
    background-color: #f9f9fb;
    margin: 30rpx 16rpx 0 0;
    font-size: 30rpx;
    line-height: 42rpx;
    font-weight: 500;
    border-radius: 8upx;
    box-sizing: border-box;

    .text {
      max-width: 300rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-icon {
      position: absolute;
      bottom: -13rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 35upx;
      height: 20upx;
    }
  }
}

.full_display {
  position: relative;
  .full {
    position: relative;
    flex-wrap: wrap;
    max-width: 658rpx;
  }

  .arrows_up {
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-360deg);
  }
}

.active {
  background-color: #615dff;
  color: #fff;
}
</style>
