<template lang="pug">
  .wrap.flex
    .base.flex.flex-col.gap-y-6
      .flex.flex-col.gap-y-6
        span.font-bold Общая информация
        .flex.flex-col(class="gap-y-1.5")
          .counter.font-semibold.text-smm Категория
          base-custom-select.select.text-sm(
            placeholder="Категория договора",
            v-model="category",
            :items="categories",            
          )
        .flex.gap-x-4
          .flex.flex-col.w-full(class="gap-y-1.5")
            .counter.font-semibold.text-smm Дата подписания 
            .input-date.flex.h-10.justify-center
              base-input-date(
                :width-input="200",
                v-model:value="signedDate"
              )
          .flex.flex-col(class="gap-y-1.5")
            .counter.font-semibold.text-smm Начало оказания услуг
            .input-date.flex.h-10.justify-center
              base-input-date(
                :width-input="200",
                v-model:value="startDate"
              )
          .flex.flex-col(class="gap-y-1.5")
            .counter.font-semibold.text-smm Окончание оказания услуг
            .input-date.flex.h-10.justify-center
              base-input-date(
                :width-input="200",
                v-model:value="endDate"
              )
      
</template>

<script>
import BaseButton from "@/components/base/BaseButton";
import BaseStepper from "@/components/base/BaseStepper";
import BaseSelect from "@/components/base/BaseSelect";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseInput from "@/components/base/BaseInput";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";

export default {
  name: "AgreementCommon",
  components: {
    BaseButton,
    BaseStepper,
    BaseSelect,
    BaseInputDate,
    BaseInput,
    BaseCustomSelect,
  },
  data() {
    return {
      isService: true,
      steps: [
        { id: "1", label: "1", value: "Договор" },
        { id: "2", label: "2", value: "Пациент" },
      ],
      category: "",
      categories: [
        { id: "Консультация", label: "Консультация" },
        { id: "Терапия", label: "Терапия" },
        { id: "Хирургия", label: "Хирургия" },
        { id: "Ортопедия", label: "Ортопедия" },
      ],
      signedDate: undefined,
      startDate: undefined,
      endDate: undefined,
    };
  },
};
</script>

<style lang="sass" scoped></style>
