<template>
  <div class="content-warp">
        <mu-form :config="config" :default-display="config.defaultDisplay" v-model="value" :extension="extensionForm">
        </mu-form>
        <div class="divider"></div>
        <mu-tabs class="current-tabs" v-if="config.childrenFields" v-model="config.activeName" :config="config.childrenFields"
                 :extension="(value)=>{this.tabHandler = value}">
                <template v-slot:[item.name] v-for="(item, index) in config.childrenFields.items"> 
                    <mu-form :key="index" :config="getCurrentForm(item.fields)" v-model="value" :extension="(form, value, i) => extensionChildrenForm(form, value ,index)">
                      <slot></slot>
                    </mu-form>
                </template>
        </mu-tabs>
      </div>
</template>

<script>
export default {
  data() {
    return {
      tabHandler: undefined,
      operateStatus: false
    }
  },
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
      getCurrentForm(fields) {
          // 重新构造form所需属性
          let currentForm = Object.assign({}, this.config);
          this.config.childrenFields.beforeLeave = this.beforeLeave;
          currentForm.name = this.config.childrenFields.name;
          currentForm.fields = fields;
          return currentForm;
      },
      extensionForm(form, value) {
        this.handleSource = value.onHandleSource;
        this.handleEdit = value.onShowEdit;
        this.setDisabled = value.setDisabled;
        this.setHide = value.setHide;
        this.clearValidate = value.clearValidate
        this.resetFields = value.resetFields
        // this.handleEdit(true);
      },
      extensionChildrenForm(form, value, i) {
        // 循环生成children中的 表单函数
        // console.log(form, value, i)
        this[`handleChildrenSource${i}`] = value.onHandleSource;
        this[`handleChildrenEdit${i}`] = value.onShowEdit;
        this[`setChildrenDisabled${i}`] = value.setDisabled;
        this[`setChildrenHide${i}`] = value.setHide;
        this[`clearChildrenValidate${i}`] = value.clearValidate
        this[`resetChildrenFields${i}`] = value.resetFields
      },
      beforeLeave(activeName, oldActiveName) {
        // console.log(activeName, oldActiveName);
        // 切换tabs 函数
        if (this.operateStatus) {
          const index = this.config.childrenFields.items.findIndex(item => {
            return activeName == item.name;
          })
          setTimeout(() => {
            this[`handleChildrenSource${index}`]('add')
          }, 300);
        }
        this.$emit('tabs-change', {
          activeName, oldActiveName
        })
      },
      resetCurrentFields() {
        let { config } = this;
        let results = []
        this.operateStatus = false;
        this.resetFields();
        config.childrenFields.items.forEach((v, i) => {
          this[`resetChildrenFields${i}`]();
        })
      },
      clearCurrentValidate() {
        let { config } = this;
        let results = []
        this.operateStatus = false;
        this.clearValidate();
        config.childrenFields.items.forEach((v, i) => {
          this[`clearChildrenValidate${i}`]();
        })
      },
      validate() {
        let { config } = this;
        let results = []
        this.operateStatus = true;
        config.childrenFields.items.forEach((v, i) => {
          results.push(this[`handleChildrenSource${i}`]('add'))
        })
        return this.handleSource('add') || !results.find(item => {
          return item === false
        })
      }
  }
}
</script>

<style>
  .divider {
    margin: 15px 0;
  }
</style>