<template lang="pug">
  .flex.flex-col.gap-y-6
    span.font-bold Общая информация
    base-select(
      placeholder="Категория договора",
      v-model="category",
      :items="categories",
      label="Категория",
      size="M"
    )
    .flex.gap-x-4
      base-input(
        type="date",
        v-model="signedDate",
        label="Дата подписания",
        size="M"
      )
      base-input(
        type="date",
        v-model="startDate",
        label="Начало оказания услуг",
        size="M"
      )
      base-input(
        type="date",
        v-model="endDate",
        label="Окончание оказания услуг",
        size="M"
      )         
    base-select(
      placeholder="Поручить",
      v-model="employee",
      :items="employees",
      label="Исполнитель",
      size="M"
    )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect.vue";

export default {
  name: "AgreementServices",
  components: {
    BaseInput,
    BaseSelect,
  },
  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>
