<template>
  <div class="es-page">
    <template v-for="(items, indexs) in contents">
      <es-dialog
        v-if="items.type === 'dialog'"
        v-bind="
          handleExclAttribute({
            data: items,
            attrs: ['events', 'visible', 'type', 'contents']
          })
        "
        :key="indexs"
        :visible.sync="visible[indexs]"
        @close="
          res => {
            handleDialogClose(items, res);
          }
        "
        v-on="{ ...items.events }"
      >
        <template v-if="items.module">
          <component
            :is="items.module"
            v-bind="
              handleExclAttribute({
                data: items,
                attrs: ['events', 'visible', 'type', 'contents', 'module']
              })
            "
          ></component>
        </template>

        <template v-else>
          <template v-for="(item, index) in items.contents">
            <es-form
              v-if="item.type === 'form'"
              :key="index"
              v-bind="
                handleExclAttribute({
                  data: item,
                  attrs: ['events', 'visible', 'type', 'model']
                })
              "
              :model="item.model"
              v-on="{ ...item.events }"
            ></es-form>
            <es-data-table
              v-if="item.type === 'data-table' || item.type === 'dataTable'"
              :key="index"
              v-bind="
                handleExclAttribute({
                  data: item,
                  attrs: ['events', 'visible', 'type']
                })
              "
              v-on="item.events"
            ></es-data-table>
            <es-tree-group
              v-if="item.type === 'data-table' || item.type === 'dataTable'"
              :key="index"
              v-bind="
                handleExclAttribute({
                  data: item,
                  attrs: ['events', 'visible', 'type']
                })
              "
              v-on="{ ...item.events }"
            ></es-tree-group>
          </template>
        </template>
      </es-dialog>
      <es-form
        v-if="items.type === 'form'"
        v-bind="
          handleExclAttribute({
            data: items,
            attrs: ['events', 'visible', 'type', 'model']
          })
        "
        :key="indexs"
        v-model="items.value"
        padding="16px"
        :height="formHeight"
        :model="items.model"
        v-on="{ ...items.events }"
      ></es-form>
      <es-data-table
        v-if="items.type === 'data-table' || items.type === 'dataTable'"
        v-bind="
          handleExclAttribute({
            data: items,
            attrs: ['events', 'visible', 'type']
          })
        "
        :key="indexs"
        v-on="{ ...items.events }"
      ></es-data-table>
      <es-tree-group
        v-if="items.type === 'tree-group' || items.type === 'treeGroup'"
        v-bind="
          handleExclAttribute({
            data: items,
            attrs: ['events', 'visible', 'type']
          })
        "
        :key="indexs"
        v-on="{ ...items.events }"
      ></es-tree-group>
    </template>
  </div>
</template>
<script>
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'EsPage',
  componentName: 'EsPage',
  mixins: [],
  props: {
    contents: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    visible: {
      get() {
        let visibles = [];
        this.contents.forEach(item => {
          visibles.push(item.visible);
        });
        return visibles;
      }
    }
  },
  mounted() {},
  methods: {
    handleExclAttribute({ data, attrs }) {
      return util.exclAttribute({
        data: data,
        attrs: attrs
      });
    },
    //数据表刷新
    dataTableReload(obj, first, tree) {
      this.$refs.dataTable && this.$refs.dataTable.reload(obj, first, tree);
      this.$refs.treeGroup && this.$refs.treeGroup.reload(obj, first, tree);
    },
    handleDialogClose(res, num) {
      let changeData = {};
      if (Object.prototype.hasOwnProperty.call(res, 'visibleKey')) {
        changeData[res.visibleKey] = false;
      } else {
        changeData = { visible: false };
      }
      if (num !== 0) {
        this.$parent.handleChangeData(changeData);
      }
    }
  }
};
</script>
