<template>
  <div class="label-filter">
    <label-select
      v-model="filter.color"
      label="颜色"
      :options="colorList"
      :label-width="60"
      @on-change="colorChange"
    ></label-select>
    <label-select
      v-model="filter.size"
      label="尺码"
      :options="sizeList"
      :label-width="60"
      @on-change="colorChange"
      multiple
    ></label-select>

    <div class="label-list">
      {{ strFilter }}
    </div>
  </div>
</template>

<script>
import LabelSelect from "./LabelSelect";

const colorList = "#"
  .repeat(6)
  .split("")
  .map((item, index) => {
    return {
      id: index + 1,
      name: "红色" + (index + 1)
    };
  });

const sizeList = "#"
  .repeat(6)
  .split("")
  .map((item, index) => {
    return {
      id: index + 1,
      name: "大号" + (index + 1)
    };
  });

export default {
  name: "label-filter",
  components: { LabelSelect },
  data() {
    return {
      filter: {
        color: "",
        size: ""
      },
      colorList: colorList,
      sizeList: sizeList
    };
  },
  computed: {
    strFilter() {
      return JSON.stringify(this.filter);
    }
  },
  methods: {
    colorChange(val) {
      console.log(val);
    }
  }
};
</script>
