<template>
  <view class="pdd">
    <div class="text">
      {{ history }}
    </div>
    <input type="text" v-model="value" />
    <button @click="queryClick">点击发送</button>
  </view>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      text: "",
      value: "",
      messages: [],
    };
  },
  onShow() {},

  /**
   *
   async function query(data) {
        const response = await fetch("https://flowise.tsl3060.com/api/v1/prediction/cf4f7471-7301-4bd6-aaa3-87c16e615b84", {
                headers: {
                        Authorization: "Bearer ZT1v19tYfMb4+2Y6VX7gtf9oacNEy6J03SabP8yfa6w=",
                        "Content-Type": "application/json"
                },
                method: "POST",
                body: JSON.stringify(data)
        });
        const result = await response.json();
        return result;
}
   */
  computed: {
    history() {
      return this.messages.filter(
        (msg) => msg.message !== "Hi there! How can I help?"
      );
    },
  },
  methods: {
    async query() {
      const _this = this;
      const data = {
        question: _this.value,
        history: _this.history,
      };
      axios
        .post(`/api/v1/prediction/cf4f7471-7301-4bd6-aaa3-87c16e615b84`, data, {
          headers: {
            Authorization:
              "Bearer ZT1v19tYfMb4+2Y6VX7gtf9oacNEy6J03SabP8yfa6w=",
            "Content-Type": "application/json",
          },
        })
        .then((response) => {
          // {
          //     "message": "Hello, how can I assist you?",
          //     "type": "apiMessage" | "userMessage"
          // },
          this.messages.push({
            message: this.value,
            type: "userMessage",
          });
          this.messages.push({
            message: response.data.text,
            type: "apiMessage",
          });
        });
    },
    queryClick() {
      this.query();
    },
  },
};
</script>

<style scoped lang="scss"></style>
