<template>
  <div class="section-canvas">
    <div class="section-top-toolbar section-toolbar">
      <el-button type="primary" :icon="renderIcon('element TopLeft')" link></el-button>
      <span class="section-toolbar-line"></span>
      <el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable />
    </div>
    <div class="section-content"></div>
    <div class="section-bottom-toolbar section-toolbar">
      <div class="section-toolbar-left">
        <el-button type="primary" :icon="renderIcon('fa MousePointer')" link></el-button>
        <span class="section-toolbar-line"></span>
        <el-button type="primary" :icon="renderIcon('element Aim')" link></el-button>
        <span class="section-toolbar-line"></span>
        <el-button type="primary" :icon="renderIcon('antd LineOutlined')" link></el-button>
        <span class="section-toolbar-line"></span>
        <el-button type="primary" :icon="renderIcon('icon5 BandageSharp')" link></el-button>
        <span class="section-toolbar-line"></span>
        <el-button type="primary" :icon="renderIcon('antd InsertRowLeftOutlined')" link></el-button>
      </div>
      <div class="section-toolbar-right">
        <el-input v-model="searchKeyword" size="small" style="width: 110px" placeholder="Search">
          <template #prefix>
            <component :is="renderIcon('element Search')"></component>
          </template>
        </el-input>
        <span class="section-toolbar-line"></span>
        <el-text type="warning">1</el-text>
        <span class="section-toolbar-line"></span>
        <el-text type="danger">0</el-text>
        <div class="infor">
          X=14.091,Y=12.397
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { renderIcon } from '@/utils/webutils.ts'

export default {
  name: 'ModelEditor',
  components: {
    renderIcon
  },
  data() {
    return {
      currentLevel: '',
      searchKeyword: '',
      sectionLeftSearch: '',
      sectionRightSize: 0,
      sectionBottomSize: 0,
      hideRight: false,
      hideBottom: false,
      calcRightPanel: null,
      calcBottomPanel: null
    }
  },
  methods: {
    renderIcon
  },
  computed: {
    allLevels() {
      return designer.allLevels
    }
  }
}
</script>