<template>
  <section class="flex h-b100">
    <section class="aside flex-align-center flex-col">
      <span class="py-16">集数</span>
      <div class="flex-1 flex-align-center flex-col gap-10 overflow-y-auto hide-scrollbar">
        <div v-for="(item, index) in 100" :key="index"
          class="cursor-pointer w-36 min-h-36 rounded-4 flex-center text-888 jj"
          :class="indexVal === index ? 'active' : ''" @click="changeJi(item, index)">
          {{ index + 1 }}</div>
      </div>
    </section>
    <StepThree v-if="stepVal === 2" />
    <StepFour v-if="stepVal === 3" />
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StepThree from './StepThree.vue';
import StepFour from './StepFour.vue';

const props = defineProps({
  stepVal: {
    type: Number,
    default: 2
  }
})

const indexVal = ref(0)
const changeJi = (item: any, index: number) => {
  indexVal.value = index
}
</script>

<style lang="scss" scoped>
.aside {
  width: 60px;
  border-right: 1px solid #eee;

  .jj {
    border: 1px solid #ddd;

    &.active {
      border: 1px solid #5252ff;
      background: #5252ff;
      color: #fff;
    }
  }
}
</style>