<script setup>
import AudioCard from "../components/AudioCard.vue";
import TotalProgress from "../components/TotalProgress.vue";

const p1 = {
  number: "BV1es41127Fd",
  received: 0,
  total: 0,
};
const p2 = {
  number: "BV1es41127Fd",
  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
  received: 0,
  total: 0,
};
const p3 = {
  number: "BV1es41127Fd",
  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
  received: 1314514,
  total: 1919810,
};
const p4 = {
  number: "BV1es41127Fd",
  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
  received: 1919810,
  total: 1919810,
};
</script>

<template>
  <div
    class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column"
  >
    <div class="container overflow-y-scroll flex-grow-1">
      <div class="row g-3 py-3">
        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
          <AudioCard v-bind="p1"></AudioCard>
        </div>
        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
          <AudioCard v-bind="p2"></AudioCard>
        </div>
        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
          <AudioCard v-bind="p3"></AudioCard>
        </div>
        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
          <AudioCard v-bind="p4"></AudioCard>
        </div>
      </div>
    </div>
    <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress>
  </div>
</template>

<style scoped></style>
