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

const { t } = useI18n();
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("/skylantern_step3");
        // window.location = "https://cmm.ai/skylantern/";
      }
    })
    .catch((error) => {
      loading.value = false;
      console.log(error);
    });
}

const blessArray = [
  "福如東海 壽比南山",
  "年年有餘 歲歲平安",
  "花開富貴 竹報平安",
  "金玉滿堂 喜氣洋洋",
  "財源廣進 運籌帷幄",
  "吉祥如意 心想事成",
  "開門大吉 大展鴻圖",
  "四季平安 五福臨門",
  "萬事如意 幸福美滿",
  "平安喜樂 福壽安康",
];

function assignBless(val) {
  inputValue.value = val;
  getValue(true);
}
</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">{{ t("skylantern.step2.text_1") }}</h3>

    <v-menu max-height="200" location="bottom" transition="slide-y-transition">
      <template v-slot:activator="{ props }">
        <v-btn color="primary" v-bind="props" append-icon="mdi-menu-down">
          {{ inputValue !== "" ? inputValue : "請選擇祝福" }}
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in blessArray"
          :key="item"
          :value="item"
        >
          <v-list-item-title @click="assignBless(item)">{{
            item
          }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- <input v-model="inputValue" class="mt-10" type="text" readonly /> -->

    <div class="d-flex flex-column align-center my-15">
      <!-- <button @click="getValue(true)" class="main-btn mb-5">
        {{ t("skylantern.step2.text_2") }}
      </button> -->
      <button @click="getValue(false)" class="main-btn mb-5">
        {{ t("skylantern.step2.text_3") }}
      </button>
    </div>

    <Footer url="/skylantern_step1" back="/skylanternhome" />
  </div>
</template>

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

  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>
