<script setup>
import VueMarkdown from 'vue-markdown-render'
import Demo from '../components/Demo.vue'
import { getRecord } from '../api'

const route = useRoute()
const id = route.query.id
const recordId = route.query.record_id
const dialogVisible = ref(false)

const detail = ref(null)

const fetchRecord = async () => {
  const res = await getRecord({ id: recordId })
  const resDetail = res.data.detail
  detail.value = { ...resDetail, live_info: JSON.parse(resDetail.live_info) }
}
onMounted(() => {
  fetchRecord()
})
const tipsList = {
  A: [
    { title: '卖点讲解', content: '强化产品独特性与情感场景化表达。' },
    { title: '违规情况', content: '关注平台新规并规避敏感词。' },
    { title: '讲解时长', content: '精准分配时间，促销环节压缩冗余。' },
    { title: '其他建议', content: '模拟实战并复盘转化数据。' },
  ],
  B: [
    { title: '卖点讲解', content: '场景化设计减少参数罗列。' },
    { title: '违规情况', content: '熟记合规词库并规避竞品对比。' },
    { title: '讲解时长', content: '控制节奏，促销环节提速。' },
    { title: '其他建议', content: '学习高感染力话术并准备互动模板。' },
  ],
  C: [
    { title: '卖点讲解', content: '结构化表达并突出核心卖点。' },
    { title: '违规情况', content: '系统学习规则并使用AI审核。' },
    { title: '讲解时长', content: '分段练习并制定时间分配表。' },
    { title: '其他建议', content: '参加基础培训并拆解优秀案例。' },
  ],
  D: [
    { title: '卖点讲解', content: '模板化练习并记忆关键词。' },
    { title: '违规情况', content: '精读合规手册并替换敏感词。' },
    { title: '讲解时长', content: '分段训练并使用计时器。' },
    { title: '其他建议', content: '录制回放并建立反馈机制。' },
  ],
}
const tips = computed(() => {
  return tipsList[detail.value?.ai_level || 'A']
})
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" 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>
            <p>操作</p>
            <el-button type="primary" link @click="dialogVisible = true">查看</el-button>
          </div>
        </div>
      </div>
    </AppCard>
    <AppCard>
      <h2 class="live-title">练习优化建议</h2>
      <div v-for="(item, index) in tips" :key="index">
        <p class="live-tips">
          <b>{{ item.title }}</b> {{ item.content }}
        </p>
      </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>
    <el-dialog v-model="dialogVisible" title="直播回放" width="1200px">
      <div style="height: 740px">
        <Demo :id="id" :recordId="recordId" :isView="true" />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.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>
