<!--
 * @Date: 2024-04-10 16:08:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-12 15:31:51
 * @FilePath: /fxPark/src/views/fxPark/intro.vue
 * @Description: 文件描述
-->
<template>
  <div class="intro-page">
    <div></div>
    <div style="margin: 1rem;">
      <div style="margin-bottom: 1rem;">
        <span style="font-size: 1.25rem;">{{ tree_data?.name }}</span>
        <span style="font-size: 0.85rem;">{{ tree_data?.nickname }}</span>
      </div>
      <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;">
        <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被类型:</span>&nbsp;{{ tree_data?.type }}</div>
        <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span>&nbsp;{{ tree_data?.study_name }}</div>
        <div style="margin-bottom: 1.5rem;white-space: pre-wrap;line-height: 1.8;">
          {{ tree_data?.note }}
        </div>
        <div style="margin-bottom: 1rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被介绍:</span></div>
        <div class="tree-intro" v-html="formattedIntro"></div>
      </div>
    </div>
    <div class="task-tips">
      <div class="title-wrapper">
        <span class="title-text">任务卡</span>
      </div>
      <div class="task-wrapper">
        <div class="task-title">{{ tree_data?.mission_title }}</div>
        <div class="tree-mission-note" v-html="formattedNote"></div>
      </div>
    </div>
    <div class="light-up-text">恭喜您植被已被点亮</div>
    <div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center;">
      <div @click="goToPoster" style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">生成海报</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { getTreeAPI, activeTreeAPI } from '@/api/carbon.js';

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const revision = $route.query.revision; // revision 植被编号
const tree_data = ref({});

onMounted(async () => {
  const { code, data } = await getTreeAPI();
  if (code) {
    let index = data.findIndex(item => item.revision == revision); // 植被信息index
    tree_data.value = data[index];
    // 植被介绍样式
    nextTick(() => {
      $('.tree-intro').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
      $('.tree-mission-note').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
    })
  }
  // 进入页面激活
  const activeTree = await activeTreeAPI({ tree_revision: revision });
});

const formattedIntro = computed(() => {
  return tree_data?.value?.intro?.split("\n").map((line) => `<p>${line}</p>`).join("");
});
const formattedNote = computed(() => {
  return tree_data?.value?.mission_note?.split("\n").map((line) => `<p>${line}</p>`).join("");
});

const goToPoster = () => {
  $router.push({
    path: '/poster',
    query: {
      revision
    }
  });
};

</script>

<style lang="less" scoped>
.intro-page {
  display: flex;
  flex-direction: column;
  .task-tips {
    .title-wrapper {
      text-align: center;
      .title-text {
        font-size: 24px;
        font-weight: bold;
        color: #BBFEE2; /* 文字颜色 */
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
      }
    }
    .task-wrapper {
      border: 1px solid #000;
      margin: 1rem;
      padding: 1rem;
      border-radius: 10px;
      background: linear-gradient(to bottom, #FBFFE9, #BEE9F8);
      text-align: center;
      .task-title {
        background-color: #D6F4BD;
        padding: 0.5rem 1.5rem;
        border-radius: 1.5rem;
        display: inline-block;
        font-weight: bold;
        margin-bottom: 1rem;
      }
    }
  }
  .light-up-text {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #F8E9C1; /* 文字颜色 */
    text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px  1px 0 #000,
      1px  1px 0 #000;
    margin: 1rem 0;
  }
}
</style>