<template lang="pug">
  .wrapper.flex.w-full.px-52px.py-7.gap-x-102px
    .flex.flex-col.gap-y-5
      .flex.flex-col.gap-y-4
        span.font-bold.text-base Состояние зубов:
        .flex.flex-col.gap-y-1
          div(v-for="condition in dentalCondition")
            span.font-bold.text-base {{condition.name}}
            span.text-base {{` - ${condition.discription}`}}
      .flex.flex-col.gap-y-1
        .font-bold.text-base Подвижность:
        span.text-base Степень -
          span.font-bold.text-base  I, II, III
    .flex.flex-col.h-fit.rounded
      medical-formula-table(:data="formulaData[0]")
      medical-formula-table(:data="formulaData[1]")
</template>

<script>
import { dentalСonditionMap } from "@/pages/oldMedicalCard/utils/medicalConfig";
import MedicalFormulaTable from "@/pages/oldMedicalCard/components/MedicalFormulaTable.vue";
export default {
  name: "MedicalDentalFormula",
  components: { MedicalFormulaTable },
  props: {
    formulaData: Array,
  },
  data() {
    return {
      dentalCondition: dentalСonditionMap,
    };
  },
};
</script>

<style lang="sass" scoped>
.wrapper
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px
  overflow: auto
  &::-webkit-scrollbar
    height: 4px
    width: 4px
  &::-webkit-scrollbar-track
    background-color: rgba(211, 212, 220, 0.5)
    border-radius: 8px
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)
</style>
