<template>
  <div v-if="element.visible" class="lab-element">
    <el-divider v-if="element.render === 'divider'" v-bind="element.props"  :style="selfStyle">{{ element.label }}</el-divider>
    <lab-file v-else-if="element.render === 'file'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-view v-else-if="element.render === 'view'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-form v-else-if="element.render === 'form'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-tab v-else-if="element.render === 'tab'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-table v-else-if="element.render === 'table'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-form-table v-else-if="element.render === 'formTable'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-button v-else-if="element.render === 'button'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-button-group v-else-if="element.render === 'buttonGroup'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-switch v-else-if="element.render === 'switch'" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-input v-else-if="['number','textarea','text','password'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-date v-else-if="['date','daterange','datetime','datetimerange'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-select v-else-if="['select','radio','checkbox'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-rate v-else-if="['rate'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-color v-else-if="['color'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-div v-else-if="['div'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-window v-else-if="['window'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-progress v-else-if="['progress'].includes(element.render)" :element="element" :elements="elements" :index="index" :model-data="modelData" />
    <lab-icon v-else-if="['icon'].includes(element.render)" v-model="modelData[element.mapper]" :style="selfStyle" />
    <lab-code v-else-if="['code'].includes(element.render)" v-model="modelData[element.mapper]" :config="{language: element.props.language}" :style="selfStyle"  />
    <div v-else>未识别组件</div>
  </div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
export default {
  name: "LabElement",
  mixins: [LabBase],
  created() {
    if (!Object.keys(this.element).includes('visible')) {
      Reflect.set(this.element, 'visible', true)
    }
    if (['code','icon'].includes(this.element.render)) {
      this.$LabRender.autoFill(this.element, this)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../style/LabDesign";
</style>
