<template>
  <div>
    <h2>PlatformServiceMixin Test</h2>
    <button @click="testInsert">Test Insert</button>
    <button @click="testUpdate">Test Update</button>
    <pre>{{ result }}</pre>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-facing-decorator";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";

@Options({
  mixins: [PlatformServiceMixin],
})
export default class PlatformServiceMixinTest extends Vue {
  result: string = "";

  testInsert() {
    const contact = {
      name: "Alice",
      age: 30,
      isActive: true,
      tags: ["friend"],
    };
    const { sql, params } = this.$generateInsertStatement(contact, "contacts");
    this.result = `SQL: ${sql}\nParams: ${JSON.stringify(params)}`;
  }

  testUpdate() {
    const changes = { name: "Bob", isActive: false };
    const { sql, params } = this.$generateUpdateStatement(
      changes,
      "contacts",
      "id = ?",
      [42],
    );
    this.result = `SQL: ${sql}\nParams: ${JSON.stringify(params)}`;
  }
}
</script>
