<template lang="pug">
  .list-wrapper.rounded.w-full(id="listWrapper")
    .w-full.header.h-10.flex
      .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
        v-for="field in headerConfig",
        :key="field.title",
        :style="headerStyle(field)"
      ) {{ field.title }}
      .h-full.w-8(v-if="scrollPresence")
    .body.w-full
      row(
        v-for="medcard in medcardsInfo",
        :key="medcard.id"
        :scroll-presence="scrollPresence",
        :header-style="headerStyle",
        :medcard-info="medcard",
      )
</template>

<script>
import {
  searchListConfig,
  medcardsList,
} from "@/pages/medcards/utils/medcardsConfig.js";
import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";

export default {
  name: "MedicalCardSearchList",
  components: { Row },
  data() {
    return {
      headerConfig: searchListConfig,
      medcardsInfo: medcardsList,
    };
  },
  computed: {
    scrollPresence() {
      return this.medcardsInfo.length > 9;
      // const wrapper = document.getElementById("listWrapper");
      // return wrapper?.scrollHeight > wrapper?.clientHeight;
    },
  },
  methods: {
    headerStyle(field) {
      return {
        width:
          !this.scrollPresence && field.spareWidth
            ? field.spareWidth
            : field.width,
        "min-width":
          this.scrollPresence && field.compressedMinWidth
            ? field.compressedMinWidth
            : field.minWidth,
        "justify-content": field.title === "Do" ? "center" : "",
      };
    },
  },
};
</script>

<style lang="sass" scoped>
.header
  background-color: var(--gray-thirdly)
  border-bottom: 1px solid var(--gray-secondary)
.grey-color
  color: var(--font-grey-color)
.body
  height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
  overflow-y: auto
  &::-webkit-scrollbar-track
    margin: 24px 0 24px 0
    background: #E9E9ED
  &::-webkit-scrollbar-thumb
    background: var(--font-grey-color)
</style>
