<template>
  <toolbar-pane title="Status" icon="mdi-format-list-bulleted-square">
    <template #toolbar>
      <v-btn variant="text" v-if="s.vault" prepend-icon="mdi-delete-alert" color="red"
             @click="(async function (vault){
  new CancelAllTransaction(useStore().chainId, vault).submit()
})(s.vault)" :disabled="!anyOrdersOpen"
             text="Cancel All"/>
    </template>
    <needs-signer>
      <orders/>
    </needs-signer>
  </toolbar-pane>
</template>

<script setup>

import ToolbarPane from "@/components/chart/ToolbarPane.vue";
import Orders from "@/components/Status.vue";
import NeedsSigner from "@/components/NeedsSigner.vue";
import {useStore} from "@/store/store.js";
import {computed} from "vue";
import {isOpen} from "@/blockchain/orderlib.js";
import {CancelAllTransaction} from "@/blockchain/transaction.js";

const s = useStore()

const anyOrdersOpen = computed(()=>{
  console.log('vo', s.vaultOrders)
  for ( const order of Object.values(s.vaultOrders) )
    if ( isOpen(order.state) )
      return true
  return false
})

</script>

<style scoped lang="scss">

</style>