<script setup>
import { ref } from "vue";
import axios from "axios";

let content = ref("");
let articleKw = ref("");
let loading = ref(false);

async function getArticle() {
  loading.value = true;
  // let url = `https://cmm.ai:8084/get_article3?kw=${articleKw.value}`;
  let url = `https://cmm.ai:8081/local_qa/?kw=${articleKw.value}`;

  try {
    let response = await axios.get(url);
    console.log("response", response);
    if (response.status === 200) {
      loading.value = false;
      content.value = response.data.message;
    }
  } catch (error) {
    console.log("error", error);
  }
}

function copy() {
  if (content.value) {
    navigator.clipboard.writeText(content.value).then(() => {
      alert(`文字已複製: ${content.value}`);
    });
  }
}
</script>

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="6" class="d-flex flex-column">
        <v-card class="mt-10 ma-3 pa-sm-5">
          <v-card-title primary-title>
            <h3 class="card-title mb-3">AI 文章生成</h3>
          </v-card-title>
          <v-card-text class="mx-auto">
            <v-textarea
              v-model="articleKw"
              class="my-3"
              label="關鍵字"
              placeholder="請輸入關鍵字"
            ></v-textarea>

            <button @click="getArticle()" class="send-data">
              <p v-if="!loading">產生文章</p>
              <p v-else>文章產生中，請稍候…</p>
            </button>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col cols="6" class="d-flex flex-column">
        <v-card class="mt-10 ma-3 pa-sm-5">
          <v-card-text class="mx-auto">
            <v-btn
              @click="copy()"
              class="mb-4"
              variant="flat"
              color="grey-lighten-4"
            >
              <v-icon icon="file_copy" size="x-small"></v-icon>
              複製
            </v-btn>

            <v-textarea
              v-model="content"
              label="文章內容"
              rows="20"
            ></v-textarea>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<style>
.send-data {
  width: 100%;
  padding: 8px 18px;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  border: none;
  border-radius: 3rem;
  transition: all 0.3s;
  letter-spacing: 1px;
  background: linear-gradient(
    -225deg,
    rgb(234, 84, 19) 35%,
    rgb(178, 69, 146) 100%
  );
}
</style>
