<template>
  <div class="form-config-container">
    <el-form label-position="top">
      <el-form-item label="表单标识">
        <el-input v-model="data.formId"></el-input>
      </el-form-item>
      <el-form-item label="表单名称">
        <el-input v-model="data.dbTableName"></el-input>
      </el-form-item>
      <el-form-item label="表单注释">
        <el-input v-model="data.dbTableComment"></el-input>
      </el-form-item>
      <el-form-item label="标签对齐方式">
        <el-radio-group v-model="data.labelPosition">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="标签宽度">
        <el-input-number v-model.number="data.labelWidth" :min="0" />
      </el-form-item>

      <el-form-item label="组件尺寸">
        <el-radio-group v-model="data.size">
          <el-radio-button label="large">大</el-radio-button>
          <el-radio-button label="default">默认</el-radio-button>
          <el-radio-button label="small">小</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="隐藏必选标记">
        <el-switch v-model="data.hideRequiredAsterisk" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { put, widgetForm, WidgetForm } from '../../config/element'
import { element } from '../../config'
import { defineComponent, PropType, ref, watch } from 'vue'

export default defineComponent({
  name: 'ElFormConfig',
  props: {
    config: {
      type: Object as PropType<WidgetForm['config']>,
      required: true
    }
  },
  emits: ['update:config'],
  setup(props, context) {
    const data = ref(props.config)

    watch(data, () => {
      console.log(data);
      context.emit('update:config', data)
    })
    const state = ref<any>({
      widgetForm: element.widgetForm
    })

    // 深度监听 widgetForm.config 表单属性的值，获取最新的数据
    watch(() => data.value, (newVal) => {
      widgetForm.config = newVal
    }, { deep: true })

    return {
      data,
      state
    }
  }
})
</script>
