<template>
  <div class="flex flex-pack-center" style="height: 100%;height: 100%;margin-top: 5px;">
    <!--左侧面板-->
    <div class="dev-container dev-left-panel">
      <el-tabs value="components" :stretch="true">
        <el-tab-pane label="组件" name="components">
          <custom-components />
        </el-tab-pane>
        <el-tab-pane label="数据" name="data">
          <custom-data-tree />
        </el-tab-pane>
        <el-tab-pane label="结构" name="struts">配置管理</el-tab-pane>
      </el-tabs>
    </div>

    <!--中间面板-->
    <div class="flex-1 flex flex-direction-column">
      <custom-tools />
      <div style="margin: 10px;" class="flex-1 dev-container">
        <div ref="rootContainer" class="dev-main-panel" data-ref="rootContainer">
          <ap-dev-container-row options="rootContainer" />
        </div>
      </div>
    </div>

    <!--右侧面板-->
    <div class="dev-container dev-right-panel">
      <el-tabs value="property" :stretch="true">
        <el-tab-pane label="属性" name="property">
          <comment :is="currentComps.type" :options="currentComps.ref" />
        </el-tab-pane>
        <el-tab-pane label="式样" name="style">
          <ap-dev-prop-style v-if="currentComps.ref" :options="currentComps.ref" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import CustomDataTree from './CustomDataTree'
import CustomComponents from './CustomComponents'
import CustomTools from './CustomTools'
import ApDevBase from './items/base/ApDevBase'
import ApDevPropStyle from './items/base/ApDevPropStyle'
import apDevStore from './../dev/devStore'

// 批量导入组件
const allComponents = require.context('./items', false, /\.vue$/)
const apDevComponents = {}
allComponents.keys().forEach(fileName => {
  const comp = allComponents(fileName)
  apDevComponents[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
apDevComponents['ApDevBase'] = ApDevBase
apDevComponents['ApDevPropStyle'] = ApDevPropStyle
apDevComponents['CustomDataTree'] = CustomDataTree
apDevComponents['CustomTools'] = CustomTools
apDevComponents['CustomComponents'] = CustomComponents

export default {
  name: 'CustomPanel',
  components: apDevComponents,
  store: apDevStore,
  data() {
    return {}
  },
  computed: {
    // store数据修改，itemObj对应修改
    currentComps() {
      return this.$store.state.currentComps
    }
  }
}
</script>

<style scoped>
    .dev-container {
        height: 100%;
        background-color: white;
    }

    .dev-left-panel {
        width: 270px;
    }

    .dev-right-panel {
        width: 270px;
    }

    .dev-right-panel /deep/ .el-form-item {
        margin-bottom: 12px;
    }

    .dev-left-panel /deep/ .el-tabs__header {
        margin: 0px;
    }

    .dev-main-panel {
        height: 100%;
        width: 100%;
    }
</style>
