<template>
  <div v-if="isActive" class="measure-pop">
    <div>Scale</div>
    <div>
      <input type="number" v-model="measure.scale.origin.num">
      <select class="unit-input" v-model="measure.scale.origin.unit">
        <!-- <option value="in">in</option> -->
        <!-- <option value="mm">mm</option> -->
        <!-- <option value="cm">cm</option> -->
        <option value="pt">pt</option>
      </select>
      <span>=</span>
      <input type="number" v-model="measure.scale.actual.num">
      <select class="unit-input" v-model="measure.scale.actual.unit">
        <!-- <option value="in">in</option> -->
        <!-- <option value="mm">mm</option> -->
        <!-- <option value="cm">cm</option> -->
        <option value="pt">pt</option>
      </select>
    </div>
    <div class="precision">
      <div class="precision-text">Precision</div>
      <div class="precision-content">
        <select class="precision-input" v-model="precision">
          <option value="0.1">0.1</option>
          <!-- <option value="0.01">0.01</option> -->
        </select>
      </div>
    </div>
    <div class="distance">
      <div>Distance</div>
      <div class="distance-content">
        {{ measure.distance + ' ' + measure.scale.actual.unit }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import { computed } from 'vue'
  const useViewer = useViewerStore()
  const { item } = defineProps(['item'])
  const isActive = computed(() => {
    return useViewer.getActiveMeasure
  })
  const useDocument = useDocumentStore()
  const measure = computed(() => useDocument.getMeasure)
  const precision = computed(() => useDocument.getPrecision)

</script>

<style lang="scss">
  .measure-pop {
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 100000;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 3px 0 #868e96;
    background-color: #FFFFFF;
  }
  .measure-pop input {
    width: 45px;
    height: 28px;
    flex-basis: 0px;
    text-align: right;
    border: 1px solid rgb(226, 227, 230);
    padding: 5px 8px;
    margin-right: 4px;
    font-size: 1rem;
    line-height: 1.5rem;
    background: #fff;
    color: rgb(36, 42, 51);
    box-sizing: border-box;
    outline: none;
    -moz-appearance: textfield;
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
  .measure-pop select {
    width: 45px;
    height: 28px;
    border: 1px solid rgb(226, 227, 230);
    border-radius: 5px;
    background: #fff;
    color: rgb(36, 42, 51);
    &.precision-input {
      width: 60px;
    }
  }
</style>
