<!--
 * @Author: WangJiaCheng
 * @Date: 2021-08-20 09:10:36
 * @LastEditors: wjc
 * @LastEditTime: 2021-09-24 16:40:57
 * @Description: 编辑器
-->
<template>
  <div class="editor-container">
    <div class="editor-menu">
      <el-tabs
        tab-position="left"
        style="height: 100%;"
      >
        <el-tab-pane>
          <span slot="label" style="text-align: center">
            <img :src="wcIconImg" alt="wc" style="width: 16px; vertical-align: middle">
          </span>
          <wisdom-ui-panel
            @drag-end="handleDragEnd"
          />
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" style="text-align: center">
            <svg-icon icon-class="element-icon" style="font-size: 24px; vertical-align: middle" />
          </span>
          <element-ui-panel />
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" style="text-align: center">
            <svg-icon icon-class="component" style="font-size: 24px; vertical-align: middle" />
          </span>
          自定义组件
        </el-tab-pane>
      </el-tabs>
    </div>
    <editor-area
      ref="editorArea"
      :active-id="activeId"
      @active-item="handleActiveItem"
    />
    <attribute-panel
      :drag-list="dragList"
      :active-data="activeData"
    />
  </div>
</template>

<script>
import wcIcon from '@/assets/wc.png'

import AttributePanel from '../components/AttributePanel'
import WisdomUiPanel from '../components/WisdomUiPanel'
import ElementUiPanel from '../components/ElementUiPanel'

import EditorArea from './EditorArea'

export default {
  name: 'Editor',
  components: {
    AttributePanel,
    WisdomUiPanel,
    ElementUiPanel,
    EditorArea
  },
  data() {
    return {
      activeId: 1,
      activeData: {},
      dragList: []
    }
  },
  computed: {
    wcIconImg() {
      return wcIcon
    }
  },
  methods: {
    handleActiveItem(data, id) {
      this.activeData = data
      this.activeId = id
    },
    handleDragEnd(data, id) {
      this.activeData = data
      this.activeId = id
    }
  }
}
</script>

<style lang="less">
  .editor-container {
    width: 100%;
    height: 100%;
    display: flex;
    .editor-menu {
      width: 20%;
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 60px);
        overflow: scroll;
      }
      .el-tabs__nav {
        .el-tabs__item {
          text-align: center;
        }
      }
    }
  }
</style>
