<template>
  <span v-if="b||m">
    {{description}}<br/>
    <suspense>
      <pair-price :base="base" :quote="quote" :value="price" :show-btn="showBtn"/>
    </suspense>
  </span>
</template>

<script setup>

import {computed, defineAsyncComponent} from "vue";
import {useStore} from "@/store/store.js";
const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))

const props = defineProps(['base', 'quote', 'm', 'b', 'isBreakout', 'showBtn', 'buy'])
const s = useStore()


const price = computed(()=>{
  if (props.m === 0)
    return props.b === 0 ? null : props.b
  // console.log('raw line price', props.b + props.m * s.clock)
  return props.b + props.m * s.clock
})

const description = computed(()=>{
  let msg = props.isBreakout ? 'breakout' : 'limit'
  if( props.m !== 0 )
    msg += ' diagonal'
  return msg
})


</script>

<style scoped lang="scss">

</style>