<script setup>
import ModuleCard from './ModuleCard.vue'
import ScoreCardSub from './ScoreCardSub.vue'
import AppEditor from '@/components/base/AppEditor.vue'

const props = defineProps({
  detail: { type: Object, default: () => ({}) },
})

const scoreDetails = defineModel('scoreDetails', {
  required: true,
  default: () => ({}),
})

// 定义需要的所有 key 及其默认值
const requiredKeys = {
  plan_theme: { score: null, comment: '' },
  plan_path: { score: null, comment: '' },
  plan_difficulty: { score: null, comment: '' },
  plan_framework: { score: null, comment: '' },
  audiovisual_title: { score: null, comment: '' },
  audiovisual_intro: { score: null, comment: '' },
  audiovisual_content: { score: null, comment: '' },
  audiovisual_images: { score: null, comment: '' },
  audiovisual_video: { score: null, comment: '' },
  flow_platforms: { score: null, comment: '' },
  flow_traffic: { score: null, comment: '' },
  flow_risk: { score: null, comment: '' },
}

// 确保所有必需的 key 都存在，如果不存在则初始化
watchEffect(() => {
  Object.keys(requiredKeys).forEach((key) => {
    if (!scoreDetails.value[key]) {
      scoreDetails.value[key] = { ...requiredKeys[key] }
    } else if (!scoreDetails.value[key].hasOwnProperty('score') || !scoreDetails.value[key].hasOwnProperty('comment')) {
      // 如果存在但结构不完整（缺少 score 或 comment），则合并默认值
      scoreDetails.value[key] = { ...requiredKeys[key], ...scoreDetails.value[key] }
    }
  })
})

defineEmits(['save'])

const json = computed(() => {
  try {
    return JSON.parse(props.detail?.operation_data?.content || '{}')
  } catch (error) {
    console.log(error)
    return { plan: {}, audiovisual: {}, flow: {} }
  }
})

const activeTab = ref(1)

const handleNext = () => {
  activeTab.value++
}
</script>

<template>
  <el-tabs stretch v-model="activeTab" class="score-tabs">
    <el-tab-pane label="创意策划方案" :name="1">
      <ModuleCard :maxScore="20" @next="handleNext" @save="$emit('save')">
        <ScoreCardSub
          title="全媒体运营的主题（方向）描述（3分）"
          :maxScore="3"
          v-model:score="scoreDetails.plan_theme.score"
          v-model:comment="scoreDetails.plan_theme.comment">
          <AppEditor v-model="json.plan.theme" :toolbar="false" readonly v-if="json.plan?.theme" />
        </ScoreCardSub>
        <ScoreCardSub
          title="运营的渠道路径（3分）"
          :maxScore="3"
          v-model:score="scoreDetails.plan_path.score"
          v-model:comment="scoreDetails.plan_path.comment">
          <AppEditor v-model="json.plan.path" :toolbar="false" readonly v-if="json.plan?.path" />
        </ScoreCardSub>
        <ScoreCardSub
          title="运营的重点和难点（4分）"
          :maxScore="4"
          v-model:score="scoreDetails.plan_difficulty.score"
          v-model:comment="scoreDetails.plan_difficulty.comment">
          <AppEditor v-model="json.plan.difficulty" :toolbar="false" readonly v-if="json.plan?.difficulty" />
        </ScoreCardSub>
        <ScoreCardSub
          title="运营策划框架方案（从媒介技术、加工匹配、传播、反馈等，要点式表述）（10分）"
          :maxScore="10"
          v-model:score="scoreDetails.plan_framework.score"
          v-model:comment="scoreDetails.plan_framework.comment">
          <AppEditor v-model="json.plan.framework" :toolbar="false" readonly v-if="json.plan?.framework" />
        </ScoreCardSub>
      </ModuleCard>
    </el-tab-pane>
    <el-tab-pane label="视听运营" :name="2">
      <ModuleCard :maxScore="55" @next="handleNext" @save="$emit('save')">
        <ScoreCardSub
          title="综合稿件标题（5分）"
          :maxScore="5"
          v-model:score="scoreDetails.audiovisual_title.score"
          v-model:comment="scoreDetails.audiovisual_title.comment">
          <AppEditor v-model="json.audiovisual.title" :toolbar="false" readonly v-if="json.audiovisual?.title" />
        </ScoreCardSub>
        <ScoreCardSub
          title="报道的导语（3分）"
          :maxScore="3"
          v-model:score="scoreDetails.audiovisual_intro.score"
          v-model:comment="scoreDetails.audiovisual_intro.comment">
          <AppEditor v-model="json.audiovisual.intro" :toolbar="false" readonly v-if="json.audiovisual?.intro" />
        </ScoreCardSub>
        <ScoreCardSub
          title="正文报道文字（不少于200字）（7分）"
          :maxScore="7"
          v-model:score="scoreDetails.audiovisual_content.score"
          v-model:comment="scoreDetails.audiovisual_content.comment">
          <AppEditor v-model="json.audiovisual.content" :toolbar="false" readonly v-if="json.audiovisual?.content" />
        </ScoreCardSub>
        <ScoreCardSub
          title="主题活动（场景）现场原创照片（不少于2张）（5分）"
          :maxScore="5"
          v-model:score="scoreDetails.audiovisual_images.score"
          v-model:comment="scoreDetails.audiovisual_images.comment">
          <div class="html-content">
            <ul class="image-list" v-if="json.audiovisual?.images">
              <li v-for="url in json.audiovisual?.images" :key="url">
                <img :src="url" />
              </li>
            </ul>
          </div>
        </ScoreCardSub>
        <ScoreCardSub
          title="原创视频短片（不少于60秒）。该视频至少包括：字幕、音乐或音效、一段同期声采访（或现场声）等要素。（35分）"
          :maxScore="35"
          v-model:score="scoreDetails.audiovisual_video.score"
          v-model:comment="scoreDetails.audiovisual_video.comment">
          <div class="html-content">
            <video class="video-player" v-if="json.audiovisual?.video" :src="json.audiovisual?.video" controls></video>
          </div>
        </ScoreCardSub>
      </ModuleCard>
    </el-tab-pane>
    <el-tab-pane label="流量运营" :name="3">
      <ModuleCard :maxScore="20" :hasNextButton="false" @next="handleNext" @save="$emit('save')">
        <ScoreCardSub
          title="作品（或产品）发布的运营计划，上述全媒体综合文稿拟分发的媒体平台，并逐一说明理由（10分）"
          :maxScore="10"
          v-model:score="scoreDetails.flow_platforms.score"
          v-model:comment="scoreDetails.flow_platforms.comment">
          <AppEditor v-model="json.flow.platforms" :toolbar="false" readonly v-if="json.flow?.platforms" />
        </ScoreCardSub>
        <ScoreCardSub
          title="流量运营（含直播运营）的预期成效分析（10分）"
          :maxScore="10"
          v-model:score="scoreDetails.flow_traffic.score"
          v-model:comment="scoreDetails.flow_traffic.comment">
          <AppEditor v-model="json.flow.traffic" :toolbar="false" readonly v-if="json.flow?.traffic" />
        </ScoreCardSub>
        <ScoreCardSub
          title="运营风险管控解析（5分）"
          :maxScore="5"
          v-model:score="scoreDetails.flow_risk.score"
          v-model:comment="scoreDetails.flow_risk.comment">
          <AppEditor v-model="json.flow.risk" :toolbar="false" readonly v-if="json.flow?.risk" />
        </ScoreCardSub>
      </ModuleCard>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.html-content {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #dcdfe6;
  background-color: #dcdfe6;
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    li {
      position: relative;
      width: 180px;
      height: 240px;
      background-color: #fff;
      border: 1px solid #eee;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .el-icon {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        color: #999;
        font-size: 22px;
      }
      &:hover {
        .el-icon {
          display: block;
        }
      }
    }
  }
  .video-player {
    max-height: 400px;
  }
}
</style>
