<template>
  <div>
    <template v-if="list && list.length">
      <el-tabs v-model="active">
        <template v-for="subItem in list">
          <el-tab-pane :label="subItem.label" :name="subItem.prop" type="block" :key="subItem.prop">
            <RenderDynamicTab @updateLayout="updateTabLayoutOption" :api="subItem.version">
              <template slot-scope="component">
                <fast2-component-render
                  :ProviderData="subItem.data"
                  :list="component.blockList"
                ></fast2-component-render> </template
            ></RenderDynamicTab> </el-tab-pane></template
      ></el-tabs>
    </template>
  </div>
</template>
<script>
import RenderDynamicTab from './widget/page-provider';

const BLOCK_TYPE = {
  LIST: 'crud',
  FORM: 'form',
  DETAIL: 'detail',
  FIELD: 'field',
  BUTTONS: 'button',
  COMPONENT: 'block',
  DYNAMIC: 'dynamicBlock'
};

export default {
  name: 'TabRender',
  components: { RenderDynamicTab },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    ProviderData: {
      type: Object,
      default: () => {
        return {
          tableData: []
        };
      }
    }
  },
  data() {
    return {
      BLOCK_TYPE,
      tableObj: {},
      tableData: {},
      active: ''
    };
  },
  mounted() {
    this.active = this.list[0].prop;
  },
  methods: {
    listRowUpdate(row, index, done, loading) {
      // 行修改
      this.$set(this.ProviderData.tableData, index, row);
      loading();
      this.$emit('change', this.ProviderData);
      done();
    },
    listRowSave(payload, done) {
      this.ProviderData.tableData.push(payload);
      this.$emit('change', this.ProviderData);
      done();
    },
    listRowDel(payload) {
      this.ProviderData.tableData.splice(payload.index, 1);
    }
  }
};
</script>
