<template>
  <div class="comp-config-form">
    <a-form
      v-if="form.name !== 'SpanLayout'"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      layout="horizontal"
    >
      <a-form-item v-if="false" label="表单标识">
        <a-input v-model="form.id" disabled size="small" allow-clear />
      </a-form-item>
      <a-form-item label="表单名称">
        <a-input v-model="form.title" size="small" allow-clear />
      </a-form-item>

      <component :is="form.name" v-model="form.props" />

      <a-form-item label="必填项">
        <a-switch v-model="form.props.required" />
      </a-form-item>
      <a-form-item label="可打印">
        <a-switch v-model="form.props.enablePrint" />
      </a-form-item>
    </a-form>

    <a-empty v-else description="当前组件不支持配置" />
  </div>
</template>

<script>
import TextInput from './config/TextInputConfig.vue';
import TextareaInput from './config/TextareaInputConfig.vue';
import NumberInput from './config/NumberInputConfig.vue';
import AmountInput from './config/AmountInputConfig.vue';
import SelectInput from './config/SelectInputConfig.vue';
import MultipleSelect from './config/MultipleSelectConfig.vue';
import DateTime from './config/DateTimeConfig.vue';
import DateTimeRange from './config/DateTimeRangeConfig.vue';
import ImageUpload from './config/ImageUploadConfig.vue';
import FileUpload from './config/FileUploadConfig.vue';
import UserPicker from './config/UserPickerConfig.vue';
import Description from './config/DescriptionConfig.vue';
import DeptPicker from './config/DeptPickerConfig.vue';

import { mapState } from 'vuex';

export default {
  name: 'FormComponentConfig',
  components: {
    TextInput,
    TextareaInput,
    NumberInput,
    AmountInput,
    SelectInput,
    MultipleSelect,
    DateTime,
    DateTimeRange,
    ImageUpload,
    FileUpload,
    UserPicker,
    Description,
    DeptPicker,
  },
  computed: {
    ...mapState('workflow', {
      form: state => state.selectFormItem,
    }),
  },
};
</script>

<style scoped lang="less">
/* 按需添加样式 */
.comp-config-form {
  margin: 10px 10px 0 10px;
}
</style>
