<template>
  <div class="serial-item">
    <div class="header">
      <div class="icon">
        <img src="@/assets/images/course/serial.png" alt="" />
      </div>
      <div
        class="header-title"
        @click="router.push(`/serialDetail?id=${item.id}`)"
      >
        <div class="title">
          <span>{{ item.name }}</span>
        </div>
        <div class="arrow">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="body">
      <div class="detail-list" v-if="isExpand">
        <video-item
          v-for="video in item.list"
          :key="video.id"
          :item="video.type === 2 ? video.video : video.shortVideo"
          :type="video.type"
          no-bg
        ></video-item>
      </div>
      <div
        class="expand"
        :class="{ reverse: isExpand }"
        @click="isExpand = !isExpand"
      >
        <span>{{ isExpand ? "收起" : "展开" }}</span>
        <svg
          width="7"
          height="5"
          viewBox="0 0 7 5"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            opacity="0.6"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M1.6 0C0.940764 0 0.564458 0.752611 0.96 1.28L2.88941 3.85255C3.20941 4.27922 3.84941 4.27922 4.16941 3.85255L6.09882 1.28C6.49437 0.752611 6.11806 0 5.45882 0L1.6 0Z"
            fill="#999999"
          />
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue";

import VideoItem from "./VideoItem.vue";
import { useRouter } from "vue-router";

defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const router = useRouter();
const isExpand = ref(false);
</script>

<style scoped lang="scss">
.serial-item {
  margin-top: 32px;

  .header {
    display: flex;
    align-items: center;

    .icon {
      width: 64px;
      height: 64px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .header-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-left: 16px;

      .title {
        color: rgba(51, 51, 51, 1);
        font-weight: 500;
        font-size: 32px;
        height: 48px;
        line-height: 48px;
      }

      .arrow {
        font-size: 20px;
      }
    }
  }

  .body {
    margin-left: 80px;
    margin-top: 8px;

    .detail-list {
      background: rgba(248, 249, 250, 1);
      margin-bottom: 16px;
    }

    .expand {
      width: 80px;
      height: 40px;
      border-radius: 40px;
      background: rgba(153, 153, 153, 0.1);
      display: flex;
      align-items: center;

      span {
        color: rgba(153, 153, 153, 1);
        font-weight: 400;
        font-size: 24px;
        margin-left: 10px;
      }

      svg {
        transition: all 0.2s;
        margin-left: 2.6px;
        margin-right: 2.6px;
      }
    }

    .expand.reverse {
      svg {
        transition: all 0.2s;
        transform: rotate(180deg);
      }
    }
  }
}
</style>
