<template>
  <m-form ref="form" :items="formItems" v-model="formValues"></m-form>
</template>

<script>
import MForm from '@/components/MForm'

export default {
  name: 'RegisterForm',
  components: { MForm },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formValues: {
        product_name: '',
        product_name_en: '',
        target_table: '',
        target_schema: 'public',
        description: '',
        source_dataflow_id: null,
        source_dataflow_name: ''
      }
    }
  },
  computed: {
    formItems () {
      return [
        {
          type: 'text',
          key: 'product_name',
          label: '产品名称 *',
          placeholder: '请输入中文名称',
          rules: [v => !!v || '请输入产品名称']
        },
        {
          type: 'text',
          key: 'product_name_en',
          label: '英文名称 *',
          placeholder: '请输入英文名称',
          rules: [v => !!v || '请输入英文名称']
        },
        {
          type: 'text',
          key: 'target_table',
          label: '目标表名 *',
          placeholder: '例如: dwd_talent_info',
          rules: [v => !!v || '请输入目标表名']
        },
        {
          type: 'text',
          key: 'target_schema',
          label: '数据库结构（schema）',
          placeholder: '默认 public'
        },
        {
          type: 'textarea',
          key: 'description',
          label: '描述',
          placeholder: '请输入产品描述',
          rows: 3
        },
        {
          type: 'number',
          key: 'source_dataflow_id',
          label: '关联数据流ID'
        },
        {
          type: 'text',
          key: 'source_dataflow_name',
          label: '关联数据流名称'
        }
      ]
    }
  },
  watch: {
    itemData: {
      handler (newVal) {
        if (newVal && Object.keys(newVal).length) {
          this.formValues = {
            product_name: newVal.product_name || '',
            product_name_en: newVal.product_name_en || '',
            target_table: newVal.target_table || '',
            target_schema: newVal.target_schema || 'public',
            description: newVal.description || '',
            source_dataflow_id: newVal.source_dataflow_id || null,
            source_dataflow_name: newVal.source_dataflow_name || ''
          }
        } else {
          this.formValues = {
            product_name: '',
            product_name_en: '',
            target_table: '',
            target_schema: 'public',
            description: '',
            source_dataflow_id: null,
            source_dataflow_name: ''
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    validate () {
      return this.$refs.form.validate()
    },
    resetValidation () {
      if (this.$refs.form) {
        this.$refs.form.resetValidation()
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      const id = this.itemData.id
      return {
        ...this.formValues,
        id
      }
    }
  }
}
</script>
