<script setup lang="ts">
import { useExample } from '../composables/useExample'

interface Props {
  experiment_id: string
}

const props = defineProps<Props>()

const emits = defineEmits(['empty', 'goToFunction'])

const experimentId = computed(() => props.experiment_id)

const { example, tasks, currentTask, operationSteps, selectedTask, selectedStep, currentStep, switchTask, switchStep } =
  useExample(experimentId, emits)

const goToFunction = (path: string) => {
  emits('goToFunction', path)
}
</script>

<template>
  <div class="example-container">
    <template v-if="example">
      <!-- 头部信息 -->
      <div class="header">
        <div class="title">{{ example.name }}</div>
        <div class="times">{{ example.times }}学时</div>
      </div>

      <!-- 案例原文 -->
      <div class="section">
        <div class="section-title">案例原文</div>
        <div class="content-area">
          <div class="content-text" v-html="example.content.find((item) => item.type === 1)?.content || ''"></div>
        </div>
      </div>

      <!-- 任务选择 -->
      <div class="section" v-if="tasks.length > 0">
        <div class="task-buttons">
          <button
            v-for="task in tasks"
            :key="task.id"
            class="task-button"
            :class="{ active: selectedTask === task.id }"
            @click="switchTask(task.id)">
            {{ task.name }}
          </button>
        </div>
      </div>

      <!-- 任务描述 -->
      <div class="section" v-if="currentTask">
        <div class="section-title">任务描述</div>
        <div class="content-area">
          <div class="content-text" v-html="currentTask?.content || ''"></div>
        </div>
      </div>

      <!-- 操作步骤 -->
      <div class="section" v-if="operationSteps.length > 0">
        <div class="section-title">操作步骤:</div>
        <div class="steps-container">
          <button
            v-for="(step, index) in operationSteps"
            :key="step.id"
            class="step-button"
            :class="{ active: selectedStep === step.id }"
            @click="switchStep(step.id)">
            {{ index + 1 }}
          </button>
        </div>
        <div class="content-area">
          <div class="content-text" v-html="currentStep?.content"></div>
        </div>
        <!-- 快速进入按钮 -->
        <div class="quick-access" v-if="currentStep?.relatedFunction">
          <el-button plain type="primary" @click="goToFunction(currentStep.relatedFunction.path)">快速进入</el-button>
        </div>
      </div>
    </template>
    <el-empty description="暂无数据" v-else />
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .times {
    font-size: 16px;
    color: #666;
    background: #f5f5f5;
    padding: 4px 12px;
    border-radius: 4px;
  }
}

.section {
  margin-bottom: 30px;

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
  }
}

.content-area {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;

  .content-text {
    line-height: 1.6;
    color: #333;

    :deep(p) {
      margin-bottom: 10px;
    }
  }

  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.task-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;

  .task-button {
    padding: 10px 20px;
    border: 2px solid var(--main-color);
    border-radius: 20px;
    background: #fff;
    color: var(--main-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #f8f8f8;
    }

    &.active {
      background: var(--main-color);
      color: #fff;
    }
  }
}

.steps-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;

  .step-button {
    width: 40px;
    height: 40px;
    border: 2px solid var(--main-color);
    border-radius: 50%;
    background: #fff;
    color: var(--main-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: #f8f8f8;
    }

    &.active {
      background: var(--main-color);
      color: #fff;
    }
  }
}
.quick-access {
  margin-top: 20px;
  text-align: center;
}
</style>
