<template>
  <!-- 问卷 -->
  <div class="last-survey">
    <div class="survey_header">
      <div class="flex space-between">
        <div class="flex align-center">
          <p class="fw-bold">最新问卷</p>
          <p class="survey_header_tag">NEW</p>
        </div>
        <p @click="$router.push('/survey')">全部问卷 ></p>
      </div>
    </div>
    <div class="survey_con">
      <div class="flex">
        <div>
          <div class="survey_con_title flex align-center">
            <p class="mr-10 fw-bold">{{ survey.project_name }}</p>
            <p class="survey_con_num">{{ survey.answer_num }}份</p>
          </div>
          <div class="survey_con_label flex">
            <div class="flex align-center">
              <img src="../../../../assets/img/publish/baoming.png" alt="" />
              {{ survey.scene_name }} |
            </div>
            <div class="flex align-center">
              <img
                v-if="survey.source === 1"
                src="../../../../assets/img/publish/phone.png"
                alt=""
              />
              <img v-else src="../../../../assets/img/publish/phone.png" alt="" />
              {{ survey.source === 1 ? '移动端' : 'PC端' }} |
            </div>
            <div class="flex align-center">
              <img src="../../../../assets/img/publish/time.png" alt="" />
              {{ survey.created_at }}
            </div>
          </div>
        </div>
        <img src="" alt="" />
      </div>
      <div class="survey_remark">{{ survey.remarks }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getSurveysPage } from '@/api/home/index.js';

const survey = ref({
  project_name: ''
});
const fetchSurveys = async () => {
  const params = {
    page: 1,
    per_page: 10,
    group_id: 0
  };
  const res = await getSurveysPage(params);
  if (res.data.code === 0) {
    survey.value = res.data.data[0];

    const sceneName = JSON.parse(JSON.stringify(survey.value.scene_name));
    const nameList = sceneName.split('-');
    if (nameList.length > 0) {
      survey.value.scene_name = nameList[1] ? nameList[1] : nameList[0];
    }

    const timeList = survey.value.created_at.split(' ');
    if (nameList.length) {
      survey.value.created_at = timeList[0];
    }
  } else {
    // Toast()
  }
};

onMounted(() => {
  fetchSurveys();
});
</script>

<style scoped lang="scss">
.last-survey {
  margin-top: 6px;
  padding: 10px 3px 3px;
  border-radius: 10px;
  background-color: #27d6ac;
  color: #fff;

  .survey_header {
    padding: 0 10px;
    font-size: 15px;

    .survey_header_tag {
      width: 32px;
      height: 15px;
      margin-left: 3px;
      border-radius: 4px;
      background-color: #fff;
      color: #27d6ac;
      font-size: 10px;
      line-height: 15px;
      text-align: center;
    }
  }

  .survey_con {
    margin-top: 10px;
    border-radius: 10px;
    background: #fff;
    color: #000;
    img {
      height: 12px;
      margin-right: 3px;
    }

    .survey_con_title {
      //border: 1px solid red;
      padding: 10px;
      font-size: 15px;

      .survey_con_num {
        width: 30px;
        height: 15px;
        margin-left: 3px;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        color: #d0d0d0;
        font-size: 10px;
        line-height: 15px;
        text-align: center;
      }
    }

    .survey_con_label {
      margin-left: 10px;
      color: #666;
      font-size: 10px !important;

      div {
        margin-right: 5px;
      }
    }

    .survey_remark {
      box-sizing: border-box;
      margin: 10px 0 0 10px;
      padding: 10px 5px;
      border-radius: 10px;
      color: #828282;
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
    }
  }
}
</style>
