<script setup>
import { onMounted, ref } from 'vue';
import { consoleSurveys, getQuestionList, useTemplate } from '@/api/home/index.js';
import { saveQuestions, snQuestions } from '@/api/design/index.js';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import homePen from '@/assets/img/home/home-pen.png';
// 获取 Store 实例
const counterStore = useCounterStore();
const store = storeToRefs(counterStore);

const router = useRouter();
const surveys = ref([]);

const createdNewPage = defineModel('createdNewPage', {
  type: Boolean,
  default: false
});
const createdQuestion = (item) => {
  // 为 智能创建建立链接
  if (item.h5Title === 'AI智能创建') {
    return router.push({ name: 'intelligentGeneration' });
  }
  // 为 更多模板添加对应的跳转链接
  if (item.h5Title === '更多模板') {
    return router.push({ name: 'templateMarket' });
  }

  const query = {
    group_id: 0,
    source: 1,
    project_name: `${item.title ? item.title : '请输入问卷标题'} `,
    remarks: item.title
      ? '为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要！'
      : '请输入问卷描述',
    scene_code: item.parentCode,
    scene_code_info: item.code,
    tags: ''
  };

  if (createdNewPage.value) {
    query.scene_code = item.parentCode;
    query.tags = '';
  } else {
    if (item.sn) {
      query.scene_code = null;
      query.tags = [];
    }
  }

  // 如果放在了底部 当作新增组件
  if (createdNewPage.value) {
    consoleSurveys(query).then((res) => {
      if (res.data) {
        createdApx(res);
      }
    });
  } else {
    if (item.sn) {
      useTemplate(item.sn, query).then((temp) => {
        if (temp.data) {
          createdApx(temp);
        }
      });
    } else {
      consoleSurveys(query).then((res) => {
        if (res.data) {
          createdApx(res);
        }
      });
    }
  }
};
const createdApx = (res) => {
  snQuestions({ sn: res.data.data.sn }).then((ques) => {
    console.log(`res`, res);
    if (ques.data) {
      const { data } = res.data;
      ques.data.data.survey.introduction = `<p>${data.remarks}</p>`;
      store.questionsInfo.value = ques.data.data;
      saveQuestions({
        sn: res.data.data.sn,
        introduction: ques.data.data.survey.introduction,
        title: ques.data.data.survey.title
      }).then(() => {
        router.push({
          path: '/create',
          query: {
            sn: res.data.data.sn
          }
        });
      });
    }
  });
};

// 添加获取问卷列表的方法
const getList = () => {
  getQuestionList().then((res) => {
    if (res.data.code === 0) {
      if (res.data.data) {
        res.data.data.forEach((item) => {
          // if (item.parentCode && item.parentCode === 1) {
          surveys.value.push(item);
          // }
        });

        // surveys.value.push({});
      }
    }
  });
};

// 在组件挂载时调用
onMounted(() => {
  getList();
});
</script>

<template>
  <div class="create_survey">
    <div class="create_survey_title">新建任务</div>
    <div class="home-pen">
      <img :src="homePen" alt="" />
    </div>
    <div class="surveys">
      <!-- <div @click="$router.push({ name: 'intelligentGeneration' })">AI 智能创建</div> -->
      <div
        v-for="survey in surveys"
        :key="survey.title"
        class="survey"
        @click="createdQuestion(survey)"
      >
        <img :src="survey.h5Image" alt="" width="40" />
        <span>{{ survey.h5Title }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-pen {
  //height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  //width: 100%;
  background: #fff;

  img {
    width: 100%;

    //height: 200px;
  }
}

.create_survey {
  overflow: hidden;
  margin-top: 10px;
  border-radius: 16px;
  background-image: url('@/assets/img/home/item-back.png');
  background-position: center; /* 确保图片居中显示 */
  background-size: cover; /* 或者使用具体的尺寸，如 100% 100% */
  background-repeat: no-repeat;

  //padding: 15px;

  color: #000;

  .create_survey_title {
    margin: 16px 10px;
    font-size: 15px;
    font-family: PingFangSC-Heavy;
    font-weight: 900;
    line-height: 20px;
  }

  & .warp {
    flex-wrap: wrap;
  }
}

//全部问卷容器
.surveys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  // 单个问卷
  .survey {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    img {
      width: 50px;
      height: 50px;
    }

    span {
      margin-top: 8px;
      margin-bottom: 10px;
      color: #000;
      font-weight: 400;
      font-size: 0.34rem;
    }
  }
}
</style>
