<template lang="pug">
  //TODO: Поправить бордеры у таблицы
  .table-formula.flex.border-collapse
    .flex.flex-col.border-collapse
      .cell-grey.flex.w-52.h-50px.font-bold.text-lg.justify-center.items-center.border-collapse(v-for="row in data.rowMap") {{row.label}}
    .flex.flex-col.border-collapse(v-for="tooth in data.columns")
      .cell.flex.w-50px.h-50px.font-bold.text-2xl.justify-center.items-center(v-for="(row, index) in data.rowMap" :class="{'cell-grey': row.name === 'tooth_number'}")
        span(v-if="row.name === 'tooth_number'") {{tooth[row.name]}}
        base-input.pl-4.pr-2(v-if="row.name === 'dental_condition'" v-model="tooth[row.name]" :rules="[ruleCondition]" :max-length="2" borderless no-error-icon)
        label.flex.w-full.h-full.justify-center.items-center.cursor-pointer(v-if="row.name === 'tooth_mobility'")
          base-select.pl-4.pr-4(v-model="tooth[row.name]" :id="`${row.name}_${index}`" :items="mobilityMap" :outlined="false" menu-anchor="bottom start" borderless hide-dropdown-icon)
</template>

<script>
import { ruleDentalCondition } from "@/assets/rules/rulesInput";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
export default {
  name: "MedicalFormulaTable",
  components: { BaseInput, BaseSelect },
  props: {
    data: Object,
    rowMap: Array,
    condition: Array,
  },
  data() {
    return {
      ruleCondition: ruleDentalCondition,
      mobilityMap: [
        { id: 1, label: "I" },
        { id: 2, label: "II" },
        { id: 3, label: "III" },
      ],
    };
  },
};
</script>

<style lang="sass" scoped>
.table-formula
  border-left: 1.5px solid var(--font-black-color)
  border-top: 1.5px solid var(--font-black-color)
.cell
  border-bottom: 1.5px solid black
  border-right: 1.5px solid black
.cell-grey
  @extend .cell
  background-color: var(--border-light-grey-color)
.not-border
  border: none
</style>
