import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'SkDesignForm',
  setup() {
    const states = reactive({})
    return () => {
      return (
        <div class="sk-fc-style">
          <el-container class="fc-container">
            <el-main class="fc-main">
              <el-container>
                <el-aside width="250px">
                  <div class="components"></div>
                </el-aside>
                <el-main class="center-container">
                  <el-header class="btn-bar">
                    <el-button type="text" size="medium">导入JSON</el-button>
                    <el-button type="text" size="medium">清空</el-button>
                    <el-button type="text" size="medium">预览</el-button>
                    <el-button type="text" size="medium">生成JSON</el-button>
                    <el-button type="text" size="medium">生成代码</el-button>
                  </el-header>
                  <el-main class="widget-empty">
                    <div class="widget-form-container">
                      <div class="form-empty">从左侧拖拽来添加字段</div>
                    </div>
                  </el-main>
                </el-main>
                <el-aside class="widget-config-container" width="300px">
                  <el-container>
                    <el-header>
                      <div class="config-tab">字段属性</div>
                      <div class="config-tab">表单属性</div>
                    </el-header>
                    <el-main class="config-content"></el-main>
                  </el-container>
                </el-aside>
              </el-container>
            </el-main>
          </el-container>
        </div>
      )
    }
  },
})