<template lang="pug">
  .list-wrapper.h-full.flex.gap-y-1.flex-col
    .p-4.rounded.background
      q-btn(
        color="primary",
        size="16px",
        label="Создать осмотр",
        no-caps,
        icon="add",
        :style="{width: '100%'}"
      )
    .p-4.rounded.background.h-full
      .flex
        base-select(
          :style="{flex: 1}",
        )
        q-btn.ml-2(
          icon="sort"
          :style="{width: '40px', height: '40px'}",
          padding="0"
          :class="sortingClass"
          @click="invertSorting"
        )
      .flex.py-4.w-full.color-grey.text-base.justify-center
        span.opacity-50 Осмотров: 5
      .flex.gap-y-2
        .w-full.border.rounded.border-grey.p-4(@click="openInspection")
          .flex.justify-between.mb-7
            .flex.flex-col.gap-y-1
              span.text-xl.font-bold.color-blue.line-height 2023 г.
              .text-smm.color-grey.flex.items-center.gap-x-6px.line-height
                span.align-middle 22.02
                .rounded-full.h-1.w-1.background-grey
                span.align-middle 18:30 - 19:30
            .flex.items-center.justify-center.h-6.w-6.rounded.background-grey
              img.teeth-icon(src="@/assets/icons/teeth.svg")
          .h-10
</template>

<script>
import BaseSelect from "@/components/base/BaseSelect.vue";
export default {
  name: "MedicalProtocolsList",
  components: { BaseSelect },
  props: { openInspection: Function },
  data() {
    return {
      sorting: false,
    };
  },
  computed: {
    sortingClass() {
      return this.sorting
        ? {
            "sort-icon-active": true,
          }
        : {
            "sort-icon-default": true,
          };
    },
  },
  methods: {
    invertSorting() {
      this.sorting = !this.sorting;
    },
  },
};
</script>

<style lang="sass" scoped>
.list-wrapper
  width: 19.6%
.background
  background-color: var(--default-white)
.sort-icon-default
  background-color: var(--bg-light-grey)
  color: var(--font-grey-color)
.sort-icon-active
  background-color: var(--btn-blue-color)
  color: var(--default-white)
.color-grey
  color: var(--font-grey-color)
.background-grey
  background-color: var(--font-grey-color)
.border-grey
  border-color: var(--border-grey-color)
.color-blue
  color: var(--font-dark-blue-color)
.line-height
  line-height: 135%
.teeth-icon
  width: 16px
  height: 16px
</style>
