<template>
  <div>
    <slot :list="list" :field="field" :option="finalOption" v-bind="$attrs"></slot>
  </div>
</template>
<script>
import { getStore } from '../../../lib/store';
import { loadDic, loadJson, mergeColumn, vaildData, getFilePath } from '../../../lib/utils';
import { isNotEmptyPureObject } from '../../../lib/validate';
import { handleColumn } from '../../../lib/blockHander';

export default {
  name: 'BlockProvider',
  inheritAttrs: false,
  props: {
    version: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: null
    },
    path: {
      type: String,
      default: null
    },
    fileType: {
      type: String,
      default: 'block'
    },
    option: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  data() {
    return {
      list: [],
      field: [],
      filePath: getFilePath(),
      finalOption: null,
      dicts: null
    };
  },
  watch: {
    finalOption(val) {
      if (val) {
        this.$emit('update-option', val);
      }
    }
  },
  created() {
    this.checkDic();
  },
  mounted() {
    const configFilePath = localStorage.getItem('config-url');

    if (configFilePath && configFilePath !== '') {
      this.filePath = configFilePath;
    }

    if (this.path) {
      this.filePath = this.path;
    }

    if (this.version) {
      this.loadConfigurationFile(this.version);
    } else {
      this.finalOption = vaildData(this.option, { column: [] });
      this.finalOption.column = handleColumn(this.finalOption.column);
    }
  },
  methods: {
    async loadConfigurationFile(slug = this.version) {
      const versions = (slug || '').split('_');
      versions.shift();
      const version = versions.join('_');
      const queryString = version ? `v=${version}` : `t=${new Date().valueOf()}`;

      const url = `${this.filePath}/${this.fileType}/${slug}.json?${queryString}`;
      let list = getStore({ name: slug, timer: 600 });

      if (!list) {
        list = await loadJson(url, slug);
      }

      this.handlerLayoutData(list);
    },
    checkDic() {
      const dicts = getStore({ name: 'commondic', timer: 1200 });

      if (dicts) {
        this.dicts = dicts;
      } else {
        loadDic();
      }
    },

    handlerLayoutData(list) {
      this.list = list;

      let finalOption;

      if (vaildData(this.option)) {
        finalOption = { column: [] };
      } else if (isNotEmptyPureObject(this.option)) {
        finalOption = this.option;
      } else {
        finalOption = { column: [] };
      }

      const findStr = {
        crud: 'listLayout',
        form: 'detailLayout',
        detail: 'detailLayout'
      };

      const options = list.filter((item) => {
        return item.id === findStr[this.type];
      });

      let option;

      const optionObject = options[0] || {};

      if (vaildData(optionObject)) {
        option = { data: { column: [] } };
      } else if (isNotEmptyPureObject(optionObject)) {
        option = optionObject;
      } else {
        option = { data: { column: [] } };
      }

      const column = mergeColumn(finalOption.column, option.data.column);
      if (!column || !column.length) {
        return false;
      }

      this.finalOption = JSON.parse(JSON.stringify(finalOption));
      this.finalOption.column = handleColumn(column);

      this.$forceUpdate();
    }
  }
};
</script>
