<template>
  <van-popup v-model:show="show" position="bottom" :style="{ height: '70%' }">
    <h3 class="serial-title">
      合集<van-icon name="cross" @click="show = false" />
    </h3>
    <p class="remark">{{ title }}</p>
    <div class="list">
      <SerialItem
        v-for="(item, index) in list"
        :key="index"
        :item="item.shortVideo"
      />
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineProps, watch, defineExpose } from "vue";
import { querySerialContentDetail } from "@/api/serial";
import SerialItem from "./SerialItem.vue";

const show = ref(false);

const props = defineProps({
  id: {
    type: Number,
  },
  title: {
    type: String,
  },
  remark: {
    type: String,
  },
});

const list = ref([]);
const getList = () => {
  querySerialContentDetail({ id: props.id }).then((listRet) => {
    if (listRet.code === 0) {
      list.value = listRet.data || [];
    }
  });
};

watch(
  () => props.id,
  () => {
    getList();
  }
);

defineExpose({
  show,
});
</script>
<style scoped lang="scss">
.serial-title {
  position: relative;
  color: rgba(27, 35, 48, 1);
  font-weight: 500;
  font-size: 36px;
  line-height: 120px;
  ::v-deep(.van-icon) {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(154, 164, 182, 1);
    font-size: 40px;
  }
}
.remark {
  color: rgba(27, 35, 48, 1);
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  text-align: left;
  padding: 0 32px;
}
.list {
  padding: 0 32px;
}
</style>
