<template>
  <div class="header">
    <van-button type="primary" @click="start()">Start Detect</van-button>
    <van-button type="danger" @click="stop()">Stop Detect</van-button>
  </div>
  <van-cell title="频率" :value="store.frequency" />
  <van-cell title="钢琴按键" :value="store.pitch" />
  <van-divider />
  <div class="error">
    {{store.error}}
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import usePitchDetect from "~/store/pitch-detect";
import { Button, Cell, Divider } from 'vant';

export default defineComponent({
  name: "tensorflow",
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [Divider.name]: Divider
  },
  setup() {

    const {store, start, stop} = usePitchDetect();

    return { start, stop, store}
  }
})
</script>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
}
.error {
  color: red;
  padding: 10px;
  font-size: 20px;

}
</style>
