<template>
  <div class="ewash-good">
    <el-cascader-panel class="cascader" v-model="value" :options="options" :props="props" @change="handleChange"></el-cascader-panel>
  </div>
</template>

<script>
import { getEdxCategory } from '@/service/api/ewashApi.js';
export default {
  data() {
    return {
      value: '',
      options: [],
      props: {
        multiple: true
      }
    };
  },
  methods: {
    handleGetEdxCategory() {
      getEdxCategory().then(res => {
        // console.log(res);
        this.options = res.result.map(v => {
          return {
            label: v.category_name,
            value: v.category_id,
            children:
              v.clothes.map(y => {
                return {
                  label: y.clothes_name,
                  value: y.clothes_id,
                  category_id: v.category_id // 保存category_id
                };
              }) || []
          };
        });
      });
    },
    /* 父组件调用 */
    getCategory() {
      let clothes = [];
      this.options.map(v => {
        clothes = clothes.concat(v.children);
      });
      const clothesIds = this.value.map(v => {
        return v[1];
      });
      return clothes
        .filter(v => {
          return clothesIds.includes(v.value);
        })
        .map(v => {
          return {
            id: v.value,
            name: v.label
            // category_id: v.category_id
          };
        });
    }
  },
  mounted() {
    this.handleGetEdxCategory();
  }
};
</script>

<style lang="scss" scoped>
.ewash-good {
  /deep/ {
    .el-cascader-menu {
      width: 50%;
    }
    .cascader {
      width: 100%;
      margin: 0 auto;
    }
    .el-cascader-menu__wrap {
      margin: 0 auto !important;
    }
    .el-scrollbar__wrap {
      overflow: auto;
    }
    .el-scrollbar__bar {
      opacity: 0;
    }
    .el-cascader-menu {
      height: 500px;
    }
  }
}
</style>
