<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import Footer from "../components/Footer.vue";

let router = useRouter();
let loading = ref(false);
let inputValue = ref("");
let skyImageUrl = ref("");

function getValue(state) {
  loading.value = true;
  axios
    .post(`https://cmm.ai:9101/tendentest?client_message=${inputValue.value}`)
    .then((response) => {
      loading.value = false;

      if (state) {
        skyImageUrl.value = response.data.url;
      } else {
        router.push("/interact_step3");
        // window.location = "https://cmm.ai/skylantern/";
      }
    })
    .catch((error) => {
      loading.value = false;
      console.log(error);
    });
}
</script>

<template>
  <div class="lartern-content px-10">
    <div class="lartern-item">
      <div v-if="loading">
        <v-progress-circular
          :size="70"
          :width="7"
          color="white"
          indeterminate
        ></v-progress-circular>
      </div>

      <img
        v-else-if="skyImageUrl === ''"
        src="/src/assets/img/skylentern.webp"
        alt=""
        class="skyLarten"
      />

      <img
        v-else
        :src="`https://cmm.ai:9101/${skyImageUrl}`"
        class="skyLarten"
        alt=""
      />
    </div>

    <h3 class="title">寫下你的願望</h3>
    <input v-model="inputValue" type="text" />

    <div class="d-flex flex-column align-center my-15">
      <button @click="getValue(true)" class="main-btn mb-5">預覽</button>
      <button @click="getValue(false)" class="main-btn mb-5">送出</button>
    </div>

    <Footer url="/interact_step1" back="/interacthome" />
  </div>
</template>

<style lang="scss" scoped>
.lartern-content {
  height: 100%;
  padding-top: 8rem;

  input {
    padding: 10px;
    background-color: transparent;
    color: #fff;
    border: 2px solid var(--main-color);
    border-radius: 10px;
  }

  .lartern-item {
    height: 40vh;
    display: flex;
    align-items: center;

    img {
      max-width: 300px;
      height: auto;

      @media (max-width: 600px) {
        max-width: 250px;
      }
    }
  }
}
</style>
