<template>
  <div class="index">
    <HCreateForm
      :value="dataValue"
      :custom="true"
      :hideElementNames="hideElementNames"
      :hideFormSettings="hideFormSettings"
      :hideFormSettingPanel="true"
      :hideActions="hideActions"
      :customElements="initCustomItems(hideElementNames)"
      @change="createForm"
    >
      <div slot-scope="{data, model, type, prop}">
        <custom-which-component :data="data" :model="model" :type="type" :prop="prop" />
      </div>
      <div class="actions" slot="actions" slot-scope="{ formDesignData }">
        <el-button type="text" icon="el-icon-copy-document" @click="createForm(formDesignData)">生成表单</el-button>
      </div>
    </HCreateForm>
  </div>
</template>

<script>
import { ItemEnum } from '@/test-npm'
import { CustomWhichComponent, initCustomItems} from '../components/customFormItem/index.js'
export default {
  components: {
    CustomWhichComponent
  },
  data() {
    return {
      dataValue: {},
      hideElementNames: [ItemEnum.ELEMENTS.RATE],
      hideFormSettings: [ItemEnum.SETTINGS.SIZE],
      hideActions: [ItemEnum.ACTIONS.SHOWJSON]
    }
  },
  created() {
  },
  methods: {
    initCustomItems,
    createForm(formDesign) {
      console.log(formDesign)
    }
  }
}
</script>

<style lang="scss">
@import '../../dist/hr-dynamic-form.css';
.index {
  height: 100vh;
}
.actions{
  margin-right: 10px;
}
</style>