<template lang="pug">
  .flex-col
    span.font-bold Общая информация
    .flex-col
      .flex-col.my-6
        .counter.font-semibold.text-smm Категория
        base-custom-select.select.text-sm(
          placeholder="Категория договора",
          v-model="category",
          :items="categories",            
        )
      .flex.w-full.my-6
        .flex-col
          .font-semibold.text-smm Дата подписания 
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
              v-model:value="signedDate"
            )
        .flex-col
          .font-semibold.text-smm Начало оказания услуг
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
              v-model:value="startDate"
            )
        .flex-col
          .font-semibold.text-smm Окончание оказания услуг
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
              v-model:value="endDate"
            )
      
      .flex-col.w-full.my-6
        .font-semibold.text-smm Исполнитель             
        base-custom-select.select.text-sm(
          placeholder="Поручить",
          v-model="employee",
          :items="employees",
        )
</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: "AgreementServices",
  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,
      employee: {},
      employees: [],
    };
  },
};
</script>

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