<template>
    <row-bar :color="builder.color">
      <div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
      <div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
      <div>
        <v-text-field type="number" v-model="builder.slippage"
                      density="compact" hide-details class="mx-1 my-2" variant="outlined"
                      label="Max Slippage" min="0" max="100" step="0.01"
                      style="width: 9em;"
                      clearable
        >
          <template v-slot:append-inner>%</template>
        </v-text-field>
      </div>
    </row-bar>
</template>

<script setup>
import {useChartOrderStore} from "@/orderbuild.js";
import {builderDefaults} from "@/misc.js";
import {useOrderStore} from "@/store/store.js";
import {computed} from "vue";
import RowBar from "@/components/chart/RowBar.vue";

const co = useChartOrderStore()
const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])

// Fields must be defined in order to be reactive
builderDefaults(props, emit, {slippage: 0.10,})
const slippage = computed({
  get() {console.log('slip',props.builder,props.builder.slippage); return props.builder.slippage},
  set(v) {props.builder.slippage=v; emit('update:builder', props.builder)}
})
console.log('builder.slippage', props.builder.slippage)

</script>

<style scoped lang="scss">
:deep(.v-slider.v-input--vertical > .v-input__control) {
  min-height: 5em !important;
}
//:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
//  background-color: inherit !important;
//}
</style>

