<script setup lang="ts">
import { ResponseLiveInfoModel } from '@/api/api-models'
import { Info24Filled } from '@vicons/fluent'
import {
  NButton,
  NDivider,
  NIcon,
  NNumberAnimation,
  NPopover,
  NSpace,
  NStatistic,
  NTag,
  NTime,
  NTooltip,
} from 'naive-ui'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const { live } = defineProps<{
  live: ResponseLiveInfoModel
}>()

const defaultDanmakusCount = ref(0)
function OnClickCover() {
  router.push({
    name: 'manage-liveDetail',
    params: { id: live.liveId },
  })
}
const guartPriceStartData = new Date(Date.UTC(2024, 2, 24, 10, 0, 0))

watch(
  () => live,
  (newValue) => {
    defaultDanmakusCount.value = newValue.danmakusCount
  },
)
</script>

<template>
  <div style="display: flex; flex-wrap: wrap">
    <NSpace style="flex-flow: nowrap">
      <span style="display: flex; align-items: center; height: 100%">
        <img
          referrerpolicy="no-referrer"
          :style="!live.isFinish ? 'animation: animated-border 2.5s infinite;cursor: pointer' : 'cursor: pointer'"
          class="liveCover"
          :src="live.coverUrl + '@200w'"
          lazy
          preview-disabled
          @click="OnClickCover()"
        >
      </span>
      <NSpace
        vertical
        justify="center"
        style="gap: 2px"
      >
        <NButton
          text
          @click="OnClickCover()"
        >
          <span style="font-size: 18px; white-space: break-spaces">
            {{ live.title }}
          </span>
        </NButton>
        <span>
          <span v-if="!live.isFinish">
            <NTag
              size="tiny"
              :bordered="false"
              type="success"
              style="justify-items: center; box-shadow: 0 0 3px #589580"
            >
              直播中
            </NTag>
          </span>
          <span
            v-else
            style="color: gray"
          >
            {{ (((live.stopAt ?? 0) - (live.startAt ?? 0)) / (3600 * 1000)).toFixed(1) }}
            时
          </span>
          <NDivider vertical />
          <NPopover trigger="hover">
            <template #trigger>
              <div style="color: grey; font-size: small; display: inline">
                <NTime
                  style="font-size: small"
                  :time="live.startAt"
                />
              </div>
            </template>
            <span v-if="live.isFinish">
              结束于:
              <NTime :time="live.stopAt ?? 0" />
            </span>
            <span v-else>
              已直播:
              {{ ((Date.now() - (live.startAt ?? 0)) / (3600 * 1000)).toFixed(1) }}
              时
            </span>
          </NPopover>
        </span>
      </NSpace>
    </NSpace>
    <div class="liveListItem">
      <NStatistic label="分区">
        <NTooltip>
          <template #trigger>
            <span style="font-size: 16px; font-weight: 500">
              {{ live.area }}
            </span>
          </template>
          {{ live.parentArea }}
        </NTooltip>
      </NStatistic>
      <NStatistic label="弹幕">
        <span style="font-size: 18px; font-weight: 500">
          <NNumberAnimation
            :from="defaultDanmakusCount"
            :to="live.danmakusCount"
            show-separator
          />
        </span>
      </NStatistic>
      <NStatistic
        label="互动"
        tabular-nums
      >
        <span style="font-size: 18px; font-weight: 500">
          <NNumberAnimation
            :from="0"
            :to="live.interactionCount"
            show-separator
          />
        </span>
      </NStatistic>
      <transition>
        <NStatistic tabular-nums>
          <template #label>
            收益
            <NTooltip v-if="new Date(live.startAt) < guartPriceStartData">
              <template #trigger>
                <NIcon :component="Info24Filled" />
              </template>
              因为官方并没有提供上舰的价格, 所以记录中的舰长价格一律按照打折价格计算
              <br>
              即舰长 138, 提督 1598, 总督 15998
              <br>
              把鼠标放在下面的价格上就可以查看排除舰长后的收益
            </NTooltip>
          </template>
          <NTooltip>
            <template #trigger>
              <span style="font-size: 18px; font-weight: 500; color: #a35353">
                <NNumberAnimation
                  :from="0"
                  :to="new Date(live.startAt) < guartPriceStartData ? live.totalIncomeWithGuard : live.totalIncome"
                  show-separator
                />
              </span>
            </template>
            {{ live.totalIncome }}
          </NTooltip>
        </NStatistic>
      </transition>
    </div>
  </div>
</template>

<style scoped>
.n-statistic {
  text-align: right;
  min-width: 62px;
}

@media (max-width: 750px) {
  .liveCover {
    width: 90px;
    height: fit-content;
    border-radius: 4px;
  }

  .liveList {
    display: flex;
    flex-flow: row wrap;
    gap: 8px 10px;
  }

  .liveListItem {
    padding-top: 10px;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .dateEChartStyle {
    height: 500px;
  }
}

@media (min-width: 750px) {
  .liveCover {
    border-radius: 4px;
    width: 120px;
  }

  .liveList {
    display: flex;
  }

  .liveListItem {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
    justify-content: end;
  }

  .dateEChartStyle {
    height: 150px;
  }
}

@keyframes animated-border {
  0% {
    box-shadow: 0 0 0px #589580;
  }

  100% {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
