<script setup>
import VueMarkdown from 'vue-markdown-render'
import Demo from '../../test/components/Demo.vue'

const props = defineProps({
  data: { type: Object },
})

const detail = computed(() => {
  return { ...props.data, live_info: JSON.parse(props.data.live_info) }
})

function formatDuration(seconds) {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = (seconds % 60).toFixed(2)
  return minutes > 0 ? `${minutes}m${remainingSeconds}s` : `${remainingSeconds}s`
}
</script>

<template>
  <div
    class="live-view"
    style="border: 1px solid #eee; border-radius: 10px; margin-bottom: 20px; overflow: hidden"
    v-if="detail">
    <AppCard>
      <div class="live-info">
        <div class="live-info-header">
          <h2>练习表现</h2>
          <p>评分等级</p>
          <h3>{{ detail.ai_level || '--' }}</h3>
          <p>主播完成质量良好，需要关注细节勤加练习</p>
        </div>
        <div class="live-info-item">
          <div>
            <p>主播姓名</p>
            <p>{{ detail.created_operator.real_name || detail.created_operator.nickname }}</p>
          </div>
          <div>
            <p>直播时长</p>
            <p>{{ formatDuration(detail.live_duration) }}</p>
          </div>
          <div>
            <p>开始时间</p>
            <p>{{ detail.live_start_time }}</p>
          </div>
          <div>
            <p>结束时间</p>
            <p>{{ detail.live_end_time }}</p>
          </div>
          <div>
            <p>视频状态</p>
            <p>已上传</p>
          </div>
          <div>
            <p>观众总人数</p>
            <p>{{ detail.live_info.stats.totalViewers }}</p>
          </div>
          <div>
            <p>最高峰人数</p>
            <p>{{ detail.live_info.stats.peakViewers }}</p>
          </div>
          <div>
            <p>点赞数</p>
            <p>{{ detail.live_info.stats.totalLikes }}</p>
          </div>
          <div>
            <p>刷礼物人数</p>
            <p>{{ detail.live_info.stats.totalGiftViewers }}</p>
          </div>
          <div>
            <p>刷礼物总数</p>
            <p>{{ detail.live_info.stats.totalGifts }}</p>
          </div>
          <div>
            <p>下单量</p>
            <p>{{ detail.orders_count }}</p>
          </div>
        </div>
      </div>
    </AppCard>
    <AppCard>
      <h2 class="live-title">违规情况</h2>
      <div class="live-markdown">
        <VueMarkdown :source="detail.illegal_word" v-if="detail.illegal_word" />
      </div>
    </AppCard>
    <AppCard>
      <h2 class="live-title">卖点讲解</h2>
      <el-steps direction="vertical" :active="1">
        <el-step
          v-for="(item, index) in detail.words"
          :key="index"
          :title="item.name"
          :status="item.time ? 'success' : 'error'">
          <template #description> {{ item.time }} {{ item.subtitle }} </template>
        </el-step>
      </el-steps>
    </AppCard>
    <AppCard>
      <h2 class="live-title">产生订单</h2>
      <el-steps direction="vertical" :active="1">
        <el-step
          v-for="(item, index) in detail.words"
          :key="index"
          :title="item.name"
          :status="item.time ? 'success' : 'error'">
          <template #description> {{ item.time }} {{ item.subtitle }} </template>
        </el-step>
      </el-steps>
    </AppCard>
  </div>
  <Demo :id="detail.live_practice_id" :recordId="detail.id" :isView="true" />
</template>

<style lang="scss" scoped>
.live-view {
  .live-info {
    display: flex;
    gap: 12px;
    p {
      font-size: 14px;
      color: #525252;
      margin: 10px 0;
    }
    .live-info-header {
      display: flex;
      flex-direction: column;
      border-right: 1px solid #e5e5e5;
      padding-right: 12px;
      h2 {
        font-size: 24px;
        font-weight: bold;
      }

      h3 {
        font-size: 40px;
        font-weight: bold;
      }
    }
    .live-info-item {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      div {
        width: 180px;
      }
    }
  }
  .live-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .live-tips {
    margin-top: 10px;
    font-size: 14px;
    color: #000;
    b {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
  .el-step__description {
    margin-bottom: 20px;
  }
  .live-markdown {
    line-height: 1.8;
    li {
      list-style: disc;
      margin-left: 20px;
    }
    p {
      margin: 10px 0;
    }
    strong,
    b {
      font-weight: bold;
    }
  }
}
</style>
