<template>
  <el-container class="lab-design">
    <el-container>
      <el-aside width="250px" class="lab-design-aside lab-design-left">
        <el-tabs>
          <el-tab-pane label="基础属性" name="attribute">
            <div v-for="(item,index) in elements" :key="index">
              <div class="widget-cate">{{item.label}}</div>
              <draggable tag="ul" :list="item.elements" :setData="()=>{}"
                         v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                         :move="() => {return true}"
              >
                <template v-for="(item, index) in item.elements">
                  <li class="lab-design-item" :class="{'no-put': item.type === 'divider'}" :key="index">
                    <a>
                      <i class="icon iconfont" :class="item.icon" style="color: #409eff"></i>
                      <span>{{item.label}}</span>
                    </a>
                  </li>
                </template>
              </draggable>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-aside>
      <el-main class="lab-design-main">
        <el-header height="50px" class="lab-design-header">
          <div class="lab-design-top">
            <div class="lab-top-left">
              <h2>LAB表单</h2>
            </div>
            <div class="lab-top-right">
              <el-button-group>
                <el-button type="primary" icon="el-icon-tickets" @click="jsonVisible=true">JSON</el-button>
                <el-button type="primary" icon="el-icon-view" @click="()=>{labDesign.switch=false;previewVisible=true}">预览</el-button>
              </el-button-group>
            </div>
          </div>
        </el-header>
        <el-container>
          <lab-form :element.sync="viewModel" :model-data="modelData" />
        </el-container>
      </el-main>
      <el-aside class="lab-design-aside lab-design-right">
        <el-tabs v-model="activeName">
          <template v-if="labDesign.activity.key && labDesign.activity.render">
            <el-tab-pane label="基础属性" name="attribute">
              <attribute :element.sync="labDesign.activity" />
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-aside>
    </el-container>

    <el-dialog :visible.sync="previewVisible" title="预览" width="80%" @close="() => {labDesign.switch=true}">
      <lab-form :element="viewModel" :model-data="modelData" />
    </el-dialog>
    <el-dialog :visible.sync="jsonVisible" title="SCHEMA" width="80%">
      <lab-code v-model="viewModel.elements" :config="{language: 'json'}" style="height: 80vh" />
    </el-dialog>
  </el-container>
</template>

<script>
import Draggable from 'vuedraggable'
import LabForm from "../../components/lab-form/LabForm";
import Attribute from "../../views/lab-design/attribute/Attribute";
export default {
  name: "LabDesignV2",
  components: {Attribute, LabForm, Draggable},
  props: {
    renders: {
      type: Array,
      default: function () {
        return []
      }
    },
    viewModel: {
      type: Object,
      default: function () {
        return { }
      }
    }
  },
  provide(){
    return {
      labDesign: this.labDesign,
    }
  },
  data() {
    return {
      labDesign:  { switch: true, activity: {}, index: -1, list: [], activeChange: this.activeChange },
      modelData: {},
      activeName: 'attribute',
      previewVisible: false,
      jsonVisible: false,
    }
  },
  computed: {
    elements(){
      const levelSorts = this.$LabRender.list().sort((a, b) => a.level - b.level)
      let list = []
      levelSorts.forEach(item => {
        const levelObj = list.find(e => e.level === item.level)
        if (levelObj) {
          levelObj.elements.push(item)
        } else {
          list.push({
            level: item.level, label: item.type, elements: [ item ]
          })
        }
      })
      return list
    }
  },
  methods: {
    activeChange(item, elements, index) {
      if (!this.labDesign.switch) {
        return
      }
      this.$set(this.labDesign, 'activity', item)
      this.$set(this.labDesign, 'index', index)
      this.$set(this.labDesign, 'list', elements)
    }
  }
}
</script>

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