<!--<template>
  <router-view />
</template>-->
<template>
  <el-container>
    <el-header height="40px">
      <publish :publish="gen"></publish>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <div>{{ $lang.element }}</div>
        <el-row>
          <el-col class="align-r" :span="12">
            <el-button-group>
              <!-- <el-button
                size="mini"
                type="primary"
                @click="addNode(nodeType.collect)"
                >{{ $lang.addCollectElement }}</el-button
              > -->
              <el-button size="mini" type="primary" @click="addAttribute()">{{
                $lang.addNormalElement
              }}</el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <attribute @changeName="changeName" ref="attribute"></attribute>
        <div>{{ $lang.calc }}</div>

        <div>
          <el-button @click="addCalc">{{ $lang.addCalc }}</el-button>
        </div>
        <calc @changeName="changeName" ref="calc"></calc>
      </el-aside>
      <!-- <el-main><router-view /></el-main> -->
      <el-main><process ref="process"></process></el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import SwtionProject from "@/plugins/project";
@Options({})
export default class layout extends Vue {
  public changeName() {
    (this.$refs["process"] as any).changeName();
  }
  public gen(data: any) {
    console.log(data);
  }
  public addCalc() {
    (this.$refs["calc"] as any).addCalc();
  }
  public addAttribute() {
    (this.$refs["attribute"] as any).addAttribute();
  }
}
</script>

<style lang="scss"></style>
