<template>
  <div class="view-content">
    <preview :is-preview="false"></preview>
  </div>
  <div class="bottom-past flex align-center space-between">
    <div class="flex align-center space-between past-text">
      <p>{{ $route.query.title }}</p>
      <div class="line"></div>
      <p>引用{{ $route.query.quote_nums }}次</p>
      <div class="line"></div>
      <p>创建人{{ $route.query.user }}</p>
      <div></div>
    </div>
    <van-button class="past theme-background" size="small" @click="pastTemplate">
      使用该模板
    </van-button>
  </div>
</template>

<script setup lang="ts">
import preview from '@/views/Survey/views/Preview/Index.vue';
import { useTemplate } from '@/api/home';
import { getSurveyTemplate, saveQuestions, snQuestions } from '@/api/design';
import { useRoute, useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
// 获取 Store 实例
const counterStore = useCounterStore();
const store = storeToRefs(counterStore);
const route = useRoute();
const router = useRouter();

const pastTemplate = async () => {
  const { data } = await getSurveyTemplate(route.query.sn as string, {
    is_preview: 0,
    is_template: 1
  });
  const { title, introduction } = data.data.survey;

  const query = {
    group_id: 0,
    source: 1,
    project_name: title,
    remarks: introduction,
    scene_code: route.query.parentCode,
    scene_code_info: route.query.code,
    // 很迷茫  模板新增 tag 空数组  非模板 就是k
    tags: []
  };
  useTemplate(route.query.sn, query).then((res) => {
    if (res.data) {
      snQuestions({ sn: res.data.data.sn }).then((ques) => {
        if (ques.data) {
          ques.data.data.survey.introduction = introduction;
          store.questionsInfo.value = ques.data.data;
          saveQuestions({
            sn: res.data.data.sn,
            introduction: introduction,
            title: title
          }).then((q) => {
            if (q.data) {
              router.replace({
                path: '/create',
                query: {
                  sn: res.data.data.sn
                }
              });
            }
          });
        }
      });
    }
  });
};
</script>

<style scoped lang="scss">
@use '@/assets/css/theme';

.theme-background {
  background-color: theme.$theme-color;
}
.view-content {
  overflow: scroll;
  height: calc(100% - 45px);
}

.bottom-past {
  height: 45px;
  padding: 0 10px;
  background: #fff;

  .past-text {
    color: #999;
    font-size: 12px;

    & p {
      padding: 0 5px;
    }

    & .line {
      width: 1px;
      height: 8px;
      background: #999;
    }
  }

  .past {
    padding: 4px 20px !important;
    border: none;
    border-radius: 8px;
    color: #fff;
    outline: none;
  }
}
</style>
