<script>
  import {WebpageQueryService} from "../../../assets/webpage";

  export default {
    name: 'ZyGeneralLayout',
    props: ['type', 'requestParams', 'requiredParams'],
    data() {
      return {
        businessType: '',
        items: [],
        horizontal: false,
        params: {},
      }
    },
    created() {
      this.businessType = this.type || this.$route.query.businessType;
      this.init();
    },
    mounted() {
    },
    render() {
      return <splitpanes horizontal={this.horizontal} on-resize={this.resize}>
        {
          this.mapChildPane(this.items)
        }
      </splitpanes>
    },
    updated() {
      this.$nextTick(() => window.onresize());
    },
    watch: {
      '$route.query.businessType': {
        handler: function (nv) {
          if (nv && !this.type) {
            this.businessType = nv;
            this.init();
          }
        }
      },
      'type': {
        handler: function (nv) {
          if (nv) {
            this.businessType = nv;
            this.init();
          }
        }
      }
    },
    computed: {},
    methods: {
      mapChildPane(items) {
        return items.map((item, index) => {
          return <pane class="item" index={index} min-size={10} size={item.size ? item.size : (100 / items.length)}>
            {
              item.children.length === 0 ?
                  <zy-general-page type={item.businessType} ref={item.businessType} on-auto-load={!item.parentBusinessType} show-header={true}
                                   request-params={this.generateRequestParams(item)} required-params={this.generateRequiredParams(item)}
                                   on-selection-change={(selection) => this.selectionChange(selection, item)}
                                   {...{on: this.$listeners}}></zy-general-page>
                  : <splitpanes horizontal={item.horizontal}>
                    {this.mapChildPane(item.children)}
                  </splitpanes>
            }
          </pane>
        })
      },
      resize() {
        window.onresize();
      },
      init() {
        if (!this.businessType) {
          return;
        }
        WebpageQueryService.webpage_query_layout_generate({
          businessType: this.businessType
        }, res => {
          this.items = res.content.children;
          this.horizontal = res.content.horizontal;
        })
      },
      generateRequestParams(item) {
        let params = _.cloneDeep(this.requestParams) || {};
        if (item.parentBusinessType && params.parentIds) {
          delete params.parentIds;
        }
        for (let key in this.params[item.parentBusinessType]) {
          if (Object.prototype.hasOwnProperty.call(this.params[item.parentBusinessType], key)) {
            params[key] = this.params[item.parentBusinessType][key];
          }
        }
        return params;
      },
      generateRequiredParams(item) {
        return item.parentBusinessType ? ['parentIds'] : this.requiredParams;
      },
      selectionChange(selection, item) {
        let _this = this;
        item.childrenBusinessTypes.forEach(child => {
          if (selection.length !== 0) {
            _this.$set(_this.params, item.businessType, {parentIds: selection[selection.length - 1].id});
            _this.$nextTick(() => _this.$refs[child].$refs['page'].loadData());
          } else {
            _this.$set(_this.params, item.businessType, '');
            _this.$refs[child].$refs['page'].clearData();
          }
        })
      }
    },
  }
</script>
<style scoped lang="scss">
</style>
