<template>
  <order title="DCA / TWAP" subtitle="Multiple tranches over a time range" :tranches="buildTranches" :valid="validOrder">
    <Tranches/>
    <LimitPrice v-model="os.limitPrice"/>
  </order>
</template>

<script setup>
// noinspection ES6UnusedImports
import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
import Order from "@/components/Order.vue";
import LimitPrice from "@/components/LimitPrice.vue";
import {timesliceTranches, applyLimit} from "@/orderbuild.js";
import Tranches from "@/components/Tranches.vue";
import {useOrderStore} from "@/store/store.js";

const os = useOrderStore()

function buildTranches() {
  const ts = timesliceTranches();
  const os = useOrderStore()
  const price = os.limitPrice
  if( price )
    for( let i=0; i<ts.length; i++)
      applyLimit(ts[i], price)
  return ts
}

function validOrder() {
  return os.validOrder
}

</script>

<style scoped lang="scss">
@use "@/styles/vars" as *;

.tordercard {
  max-width: $card-maxw;
}
.token-choice {
  width: 16em;
}
.bs-button {
  width: 6em;
}
.amount {
  width: 23em;
}

.total {
  width: 9em;
}

.split-into {
  width: 8em;
}

.v-input {
  margin-top: 1em;
  margin-bottom: 1em;
}

</style>
