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

<script>
export default {
  data() {
    return {
      // handleSource: undefined,
      // handleEdit: undefined,
      // setDisabled: Function,
      // setHide: Function
      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.tabsConfig.beforeLeave = this.beforeLeave;
          currentForm.fields = fields;
          return currentForm;
      },
      extensionForm(form, value, i) {
        // 循环生成children中的 表单函数
        // console.log(form, value, i)
        this[`handleSource${i}`] = value.onHandleSource;
        this[`handleEdit${i}`] = value.onShowEdit;
        this[`setDisabled${i}`] = value.setDisabled;
        this[`setHide${i}`] = value.setHide;
        this[`clearValidate${i}`] = value.clearValidate
        this[`resetFields${i}`] = value.resetFields
      },
      beforeLeave(activeName, oldActiveName) {
        console.log(activeName, oldActiveName);
        // 切换tabs 函数
        if (this.operateStatus){
          const index = this.config.tabsConfig.items.findIndex(item => {
            return activeName == item.name;
          })
          setTimeout(() => {
            this[`handleSource${index}`]('add')
          }, 300);
        }
        this.$emit('tabs-change', {
          activeName, oldActiveName
        })
      },
      resetCurrentFields() {
        let { config } = this;
        let results = []
        this.operateStatus = false;
        config.tabsConfig.items.forEach((v, i) => {
          this[`resetFields${i}`]();
        })
      },
      clearCurrentValidate() {
        let { config } = this;
        let results = []
        this.operateStatus = false;
        config.tabsConfig.items.forEach((v, i) => {
          this[`clearValidate${i}`]();
        })
      },
      validate() {
        let { config } = this;
        let results = []
        this.operateStatus = true;
        config.tabsConfig.items.forEach((item, i) => {
          results.push(this[`handleSource${i}`]('add'))
        })
        return !results.find(item => {
          return item === false
        })
      }
  }
}
</script>

<style>
    .content-warp {
        /* padding: 30px; */
    }
    .el-tabs--card>.el-tabs__header {
        border-bottom: none!important;
    }
</style>