<script setup>
import Steps from '../components/Steps.vue'
import { getOperations, saveOperations } from '../api'
import { ElMessage } from 'element-plus'

defineProps({ type: { type: String, default: 'plan' } })

const typeMap = {
  plan: {
    steps: [
      {
        name: 1,
        label: '第一步',
        title: '全媒体运营的主题（方向）描述（3分）',
        key: 'theme',
      },
      {
        name: 2,
        label: '第二步',
        title: '运营的渠道路径（3分）',
        key: 'path',
      },
      {
        name: 3,
        label: '第三步',
        title: '运营的重点和难点（4分）',
        key: 'difficulty',
      },
      {
        name: 4,
        label: '第四步',
        title: '运营策划框架方案（从媒介技术、加工匹配、传播、反馈等，要点式表述）（10分）',
        key: 'framework',
      },
    ],
  },
  audiovisual: {
    steps: [
      {
        name: 1,
        label: '第一步',
        title: '综合稿件标题（5分）',
        key: 'title',
      },
      {
        name: 2,
        label: '第二步',
        title: '导语（3分）',
        key: 'intro',
      },
      {
        name: 3,
        label: '第三步',
        title: '正文报道文字（不少于200字）（7分）',
        key: 'content',
      },
      {
        name: 4,
        label: '第四步',
        title: '主题活动（场景）现场照片（不少于2张）（5分）',
        key: 'images',
        isImage: true,
      },
      {
        name: 5,
        label: '第五步',
        title:
          '原创视频短片（不少于60秒）。该视频至少包括：字幕、音乐或音效、一段同期声采访（或现场声）等要素。（35分）',
        key: 'video',
        isVideo: true,
      },
    ],
  },
  flow: {
    steps: [
      {
        name: 1,
        label: '第一步',
        title: '上述全媒体综合文稿拟分发的媒体平台并逐一说明理由（10分）',
        key: 'platforms',
      },
      {
        name: 2,
        label: '第二步',
        title: '流量运营及直播运营的预期成效分析（10分）',
        key: 'traffic',
      },
      {
        name: 3,
        label: '第三步',
        title: '运营风险管控解析（5分）',
        key: 'risk',
      },
    ],
  },
}

const form = reactive({ plan: {}, audiovisual: {}, flow: {} })
const fetchInfo = async () => {
  const res = await getOperations()
  const detail = res.data.detail
  try {
    const parsed = JSON.parse(detail.content)
    Object.assign(form, parsed)
  } catch (error) {
    console.error(error)
  }
}
onMounted(fetchInfo)

const handleSave = async () => {
  await saveOperations({ content: JSON.stringify(form) })
  ElMessage.success('保存成功')
}
</script>

<template>
  <AppCard>
    <Steps v-model:form="form[type]" :steps="typeMap[type].steps" @save="handleSave" />
  </AppCard>
</template>
