gistfile1.vue

<template lang="pug">
    .lot-master__section
      .lot-master__subsection
        .lot-master__subsection-left
          h3.lot-master__subsection-heading Выберите категорию
          .lot-master__subsection-desc Верно подобранная категория заметно ускорит продажу&nbsp;лота.<br class="ninja--mobile"> Пожалуйста, сделайте правильный выбор.
        .lot-master__subsection-right
          .form-row.lot-master__subsection-select
            chosen-select(v-model="unity", :search="false", :class-string="'chosen-select form-input'", :placeholder="'Выберите категорию'")
              option(v-for="(unity, index) of unities", :value="unity.code")  {{ unity.name }}

          .form-row.lot-master__subsection-select(v-if="sectionsList.length > 0")
            chosen-select(v-model.number="section", :search="false", :class-string="'chosen-select form-input'", :placeholder="'Выберите категорию'")
              option(v-for="(section, index) of sectionsList", :value="section.id")  {{ section.name }}

          .form-row.lot-master__subsection-select(v-if="subsectionsList.length > 0")
            chosen-select(v-model.number="subsection", :search="false", :class-string="'chosen-select form-input'", :placeholder="'Выберите подкатегорию'")
              option(v-for="(section, index) of subsectionsList", :value="section.id")  {{ section.name }}

          .form-row.lot-master__subsection-select(v-if="typesList.length > 0")
            chosen-select(v-model.number="type", :search="false", :class-string="'chosen-select form-input'", :placeholder="'Выберите тип вещи'")
              option(v-for="(section, index) of typesList", :value="section.id")  {{ section.name }}

      .lot-master__subsection
        .lot-master__subsection-left
          h3.lot-master__subsection-heading Выберите бренд
          .lot-master__subsection-desc Укажите марку вашего&nbsp;лота. У&nbsp;нас большой каталог названий, в&nbsp;нем есть все&nbsp;мировые премиум-бренды.
        .lot-master__subsection-right
          .form-row.lot-master__subsection-select
            chosen-select(v-model="brand", :search="true", :class-string="'chosen-select form-input'", :placeholder="'Выберите дизайнера'")
              option(v-for="(brand, index) of brands", :value="brand.code")  {{ brand.name }}
      .lot-master__step-1-btn
        .btn.btn--primary.btn--70(:class="{ 'btn--disabled' : !this.canCreate }", @click="create") Продолжить
</template>

<script>
import { mapActions } from 'vuex';
import ChosenSelect from '../user/ui/ChosenSelect.vue';

export default {
  components: { ChosenSelect },
  name: 'create-draft-form',
  props: {
    unities: {
      type: Array,
      required: true,
    },
    brands: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      unity: null,
      section: null,
      subsection: null,
      brand: null,
      type: null,
    };
  },
  methods: {
    ...mapActions([
      'createDraft',
    ]),
    create() {
      if (!this.selectedUnity || !this.selectedSection) {
        Application.addError('Выберите категорию вашего лота');
        return false;
      }

      if (!this.selectedSubSection) {
        Application.addError('Выберите подкатегорию вашего лота');
        return false;
      }

      if (!this.selectedBrand) {
        Application.addError('Выберите бренд вашего лота');
        return false;
      }

      this.createDraft({
        unity: this.selectedUnity,
        section: this.selectedType ? this.selectedType : this.selectedSubSection,
        brand: this.selectedBrand,
      }).then((draft) => {
        this.$emit('draft-created', draft);
      }).catch(() => {});
      return true;
    },
  },

  computed: {
    sectionsList() {
      return this.selectedUnity ? this.selectedUnity.categories.filter(category => category.depth === 1) : [];
    },

    subsectionsList() {
      return this.selectedSection ? this.selectedUnity.categories.filter(category => category.parent === this.selectedSection.id) : [];
    },

    typesList() {
      return this.selectedSubSection ? this.selectedUnity.categories.filter(category => category.parent === this.selectedSubSection.id) : [];
    },

    selectedUnity() {
      return this.unity && _.find(this.unities, { code: this.unity });
    },

    selectedBrand() {
      return this.brand && _.find(this.brands, { code: this.brand });
    },

    selectedSection() {
      return this.selectedUnity && this.section && _.find(this.selectedUnity.categories, { id: this.section });
    },

    selectedSubSection() {
      return this.selectedUnity && this.subsection && _.find(this.selectedUnity.categories, { id: this.subsection });
    },

    selectedType() {
      return this.selectedUnity && this.type && _.find(this.selectedUnity.categories, { id: this.type });
    },
    canCreate() {
      return this.selectedSubSection && this.selectedUnity && this.brand;
    },
  },
  watch: {
    unity() {
      this.section = null;
    },
    section() {
      this.subsection = null;
    },
    subsection() {
      this.type = null;
    },
  },
  mounted() {
    Analytics.openSellPage();
  },
};
</script>