<!-- 门店选择组件 -->
<template>
  <el-cascader
    clearable
    filterable
    collapse-tags
    :value="value"
    :options="regionsData"
    :placeholder="placeholder"
    popper-class="ele-pop-wrap-higher"
    :props="props"
    @input="updateValue"
    :show-all-levels="false"
  />
</template>

<script>
  import { pageProvinceBiz } from '@/api/auto';
  export default {
    name: 'BizSelect',
    props: {
      value: Array,
      placeholder: String,
      options: Array,
      valueField: {
        type: String,
        validator: (val) => {
          return !val || val === 'label';
        }
      },
      props: Object
    },
    data() {
      return {
        // 级联选择器数据
        regionsData: []
      };
    },
    methods: {
      /* 更新 value */
      updateValue(value) {
        this.$emit('input', value);
      },
      /* 级联选择器数据 value 处理 */
      formatData(data) {
        if (this.valueField === 'label') {
          return data.map((d) => {
            const item = {
              label: d.label,
              value: d.label
            };
            if (d.children) {
              item.children = d.children.map((c) => {
                const cItem = {
                  label: c.label,
                  value: c.label
                };
                if (c.children) {
                  cItem.children = c.children.map((cc) => {
                    return {
                      label: cc.label,
                      value: cc.label
                    };
                  });
                }
                return cItem;
              });
            }
            return item;
          });
        } else {
          return data;
        }
      },
      /* 省市区数据筛选 */
      filterData(data) {
        return this.formatData(data);
      }
    },
    watch: {
      options: {
        handler(options) {
          console.log(options);
          this.regionsData = this.filterData(options ?? []);
          if (!options) {
            pageProvinceBiz().then((data) => {
              this.regionsData = this.filterData(data ?? []);
              this.$emit('load-data-done', data);
            });
          }
        },
        immediate: true
      }
    }
  };
</script>
