<template lang="pug">
  .section-wrapper.flex.flex-col.h-fit.cursor-pointer
    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-3
      span.text-sm.font-semibold.whitespace-normal {{title}}
    .flex.gap-y-4.px-4.py-3(
      :style="{height: `${height}px`}"
      v-if="!isNoData"
      :class="{'flex-col': !directionRow}"
      )
      slot
    .section-add.flex.justify-center.items-center.cursor-pointer(
      :style="{height: `${height}px`}"
      v-if="isNoData"
      @click="openAddDoc"
    ) Добавить данные
</template>

<script>
export default {
  name: "BaseDetailInfo",
  props: {
    title: String,
    height: Number,
    data: Object,
    directionRow: Boolean,
  },
  data() {
    return {
      isNoData: true,
    };
  },
  methods: {
    openAddDoc() {
      this.isNoData = false;
    },
  },
  watch: {
    data() {
      Object.values(this.data)
        .map((el) => (el ? el : undefined))
        .forEach((el) => {
          if (el) {
            this.isNoData = false;
          }
        });
    },
  },
};
</script>

<style lang="sass" scoped>
.section-wrapper
  border: 1px solid var(--border-light-grey-color)
  border-radius: 4px
  color: var(--font-dark-blue-color)
  &.click
    background-color: var(--light-grey-bg-color)

.section-header
  min-height: 44px
  border-bottom: 1px solid var(--border-light-grey-color)

.section-add
  height: 100%
  color: var(--btn-blue-color)
</style>
