<template>
  <el-dialog
    class="article-popup"
    v-model="show"
    :close-on-click-modal="false"
    :show-close="false"
    :modal="false"
  >
    <img
      class="article-popup__close"
      src="@/assets/images/wsyd/sidebar-close-min.png"
      @click="show = false"
    />

    <ul class="article-popup-tabs">
      <li
        v-for="(item, index) in LIST"
        :key="item.title"
        :class="{ active: activeTab === index }"
        @click="handleClick(index)"
      >
        <span>{{ item.title }}</span>
      </li>
    </ul>

    <h3>{{ currentItem.title }}</h3>
    <el-scrollbar srcoll-y class="article-popup-content">
      <div v-html="currentItem.content" />
    </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';

  const LIST = [
    {
      title: '前言',
      content: `
      <p>1925年爆发的震惊中外的五卅运动，标志着大革命高潮的到来。</p>
      <p>中国共产党领导的五卅运动，是中华民族直接反抗帝国主义的伟大运动。它冲破了长期笼罩全国的沉闷的政治空气，大大促进了群众的觉醒，显示了各革命阶级、各阶层民众在无产阶级领导下联合斗争的巨大威力，给帝国主义和军阀势力一次前所未有的打击，有力地推动了国民革命运动的蓬勃发展，彰显了伟大建党精神的实践价值。</p>
      <p>为纪念五卅运动100周年，中共一大纪念馆特举办此展，以缅怀革命先辈的英勇事迹，弘扬伟大建党精神，激励广大党员干部群众在中国式现代化的道路上砥砺前行，为全面推进强国建设、民族复兴伟业不懈奋斗！</p>
      `,
    },
    {
      title: '新生·锋芒',
      content: `<p>近代中国成为半殖民地半封建国家，国家蒙辱、人民蒙难、文明蒙尘。中国共产党在上海诞生后，高度重视工人运动，通过组织工会、领导罢工提升工人阶级觉悟，推动工人运动发展，为后续革命积累了宝贵经验、奠定了重要基础。</p>`,
    },
    {
      title: '前哨·斗争',
      content: `<p>1925年2月2日，日商内外棉第八厂殴打开除中国工人。在中国共产党领导下，大规模总同盟罢工爆发。党组织在领导二月罢工中积累宝贵经验，堪称五卅运动的前哨战。5月15日，内外棉第七厂日本资本家枪杀工人党员顾正红，激起民债，成为五卅运动的导火索。</p>`,
    },
    {
      title: '热血·迸发',
      content: `<p>五卅惨案激发了全上海乃至全中国人民的极大愤怒，在中国共产党的领导和推动下，反帝爱国怒潮从工人发展到学生、商人等社会各阶层，形成工人罢工、学生罢课、商人罢市的局面。</p>`,
    },
    {
      title: '怒嘲·燎原',
      content: `<p>在中国共产党鼓舞下，一场反帝爱国运动在全国范围轰轰烈烈地开展起来。这一运动波及27个省区，有将近700个市、县、城镇投入，参加运动的各方面人士约1700万人。</p>`,
    },
    {
      title: '烙印·新篇',
      content: `<p>五卅运动沉重打击了帝国主义，大大提高了中国人民的觉悟。在党的领导下，各地接连举行五卅运动周年纪念，号召民众继续发扬反帝爱国精神，为北伐战争奠定了群众基础，并将国民革命推向高潮，揭开了中国大革命的序幕。</p>`,
    },
    {
      title: '结语',
      content: `
      <p>百年前的1925年，五卅运动如一声惊雷，划破黑暗的长空，震撼了整个中国大地。在那风云激荡的岁月里，无数英勇先驱挺身而出，以热血和生命谱写了一曲壮丽的抗争之歌。</p>
      <p>如今，悠悠百年已逝，曾经帝国主义肆意剥削和残酷压迫中国人民的屈辱时代早已一去不复返。而中国人民在五卅运动中所彰显的不畏强暴、不怕晒牲的崇高精神，仍熠熠生辉。让我们在新时代的征程中，坚定理想信念，勇担时代使命，继续挥洒我们的热血，绘就属于我们的热血篇章！</p>
      `,
    },
  ];

  const props = defineProps<{
    visible: boolean;
  }>();
  const emits = defineEmits(['update:visible']);

  const show = computed({
    get() {
      return props.visible;
    },
    set(v) {
      emits('update:visible', v);
    },
  });
  const activeTab = ref(0);
  const currentItem = computed(() => LIST[activeTab.value]);

  const handleClick = (idx: number) => {
    // @ts-ignore
    window.player.director.goToHighlight([idx, 0]);
    activeTab.value = idx;
  };

  // watch(show, (v) => {
  //   if (v) {
  //     // @ts-ignore
  //     window.player.director.goToHighlight([0, 0]);
  //   }
  // });
</script>

<style lang="scss">
  @use './index.scss';
</style>
