<template lang="pug">
  .flex.flex-col.gap-y-3.p-4(:style="{'width': '485px'}")
    .flex.flex-col.gap-y-3.relative
      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40", outlined)
      .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
    .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
      textarea.place-input.w-full.outline-0.not-italic.resize-none(
        :cols="24",
        placeholder="Описание",
        v-model="description"
      )
    q-btn(
      label="Добавить",
      no-caps,
      color="primary",
      padding="4px 24px",
      @click="sendNote",
      style="font-weight: 500; height: 40px; width: 122px"
    )
</template>

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

export default {
  name: "TableCreateNote",
  components: { BaseInput },
  props: {
    createNote: Function,
    closePopup: Function,
  },
  data() {
    return {
      title: "",
      description: "",
    };
  },
  computed: {
    changeValue() {
      return this.title.length;
    },
  },
  methods: {
    sendNote() {
      this.createNote(this.title, this.description);
      this.closePopup();
      this.title = "";
      this.description = "";
    },
  },
};
</script>

<style lang="sass" scoped>
.title
  min-height: 39px
.description
  min-height: 70px
.input-wrapper
  border: 2px solid var(--border-light-grey-color)
  border-radius: 4px
  background-color: var(--default-white)
textarea
  overflow: hidden
.text
  color: var(--font-grey-color)
.button
  &:hover
    opacity: 0.7
</style>
