<template>
  <div>
    <Row>
      <div class="create-group">
        <span class="create-group-indicator"></span>
        <span class="create-group-title">类目选择</span>
        <span class="create-group-sub-title">（指定商品的类目）</span>
      </div>
    </Row>

    <Form ref="formData" :model="formData" :label-width="70" :rules="ruleValidate">
      <Form-item label="品牌" prop="brandId">
        <select-brand
          v-model="formData.brandId"
          :select-when-only-one="true"
          style="width: 300px;"
          @change="selectBrand"
        ></select-brand>
      </Form-item>

      <Form-item label="销售类型" prop="sellType">
        <select-sell-type
          v-model="formData.sellType"
          style="width: 300px;"
          :brand-id="formData.brandId"
          :select-when-only-one="true"
          @change="selectSellType"
        ></select-sell-type>
      </Form-item>

      <Form-item label="类目" prop="sortId">
        <select-category :value="formData.sortId" style="width: 300px;" @input="selectSort"> </select-category>
      </Form-item>
    </Form>

    <Button type="primary" @click="nextStep">下一步</Button>
  </div>
</template>

<script>
import { step1 } from '../store';

export default {
  props: ['step', 'product'],
  data() {
    return step1.call(this);
  },
  methods: {
    nextStep() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.goNext();
        } else {
          this.$Message.error('请填写必填项!');
        }
      });
    },
    goNext() {
      this.step.value = 1;
      this.$router.push({ name: 'product.create.step2' });
    },
    selectBrand(brand) {
      if (!brand) {
        this.product.brandId = null;
        this.product.brandName = null;
      } else {
        this.product.brandId = brand.brandId;
        this.product.brandName = brand.brandName;
      }
    },
    selectSort(sorts) {
      this.formData.sortId = sorts;
      this.product.maxSortId = sorts[0].value;
      this.product.middleSortId = sorts[1].value;
      this.product.smallSortId = sorts[2].value;

      this.product.maxSortName = sorts[0].label;
      this.product.middleSortName = sorts[1].label;
      this.product.smallSortName = sorts[2].label;
    },
    selectSellType(sellerType) {
      this.product.sellType = sellerType;
    },
  },
};
</script>

<style lang="scss" scoped>
$prefix: product-create;

.#{product-create}__step1-next {
  text-align: center;
  display: block;
  margin: 20px 0;
}
</style>