<template>
  <v-card :title="valveName">
    <v-card-text>
      <v-row>
        <v-col cols="6">
          <control-button block :control-button-base-node-id="openCBNodeId">
            Open
          </control-button>
        </v-col>
        <v-col>
          <control-button block :control-button-base-node-id="closeCBNodeId">
            Close
          </control-button>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script>
import { mapStores } from "pinia";
import { useOpcuaStore } from "@/stores/opcua";
import ControlButton from "./ControlButton.vue";

export default {
  name: "ValveControl",
  computed: {
    ...mapStores(useOpcuaStore),
    openCBNodeId() {
      return `${this.valveNodeId}.stOpenButton`;
    },
    closeCBNodeId() {
      return `${this.valveNodeId}.stCloseButton`;
    },
  },
  components: {
    ControlButton,
  },
  props: {
    valveNodeId: {
      type: String,
      required: true,
    },
    valveName: {
      type: String,
    },
  },
};
</script>
