<template lang="pug">
  //TODO: Поправить бордеры у таблицы
  .table-formula.flex.border-collapse(:class="{'rounded-t': data.name === 'upperJaw', 'rounded-b': data.name === 'lowerJaw'}")
    .flex.flex-col.border-collapse
      .cell-number.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.border-collapse(v-for="row in data.rowMap" :class="{'cell-number': row.name === 'tooth_number'}")
        span(v-if="row.name === 'tooth_number'") {{tooth[row.name]}}
        input.w-8.outline-0(v-if="row.name === 'dental_condition'" v-model="tooth[row.name]" maxlength="2")
        input.w-8.outline-0(v-if="row.name === 'tooth_mobility'" v-model="tooth[row.name]" maxlength="3")
</template>

<script>
export default {
  name: "MedicalFormulaTable",
  props: {
    data: Object,
    rowMap: Array,
    condition: Array,
  },
};
</script>

<style lang="sass" scoped>
.table-formula
  border: 2px solid var(--font-black-color)
.cell
  border: 1px solid var(--font-black-color)
.cell-number
  @extend .cell
  background-color: var(--border-light-grey-color)
</style>
