import {
  buildActiveTabs,
  buildDefaultValueListFn,
  buildFieldOptionsFn,
  buildRulesListFn, buildUploadDataFn
} from "../../../components/xform/utils/vue2js-generator";
import {traverseFieldWidgets} from "../../../components/xform/utils/util";

export const genVue3JS = function (formConfig, widgetList) {
  let defaultValueList = []
  let rulesList = []
  let fieldOptions = []
  let uploadData = []
  traverseFieldWidgets(widgetList, (widget) => {
    buildDefaultValueListFn(formConfig, widgetList, defaultValueList)(widget)
    buildRulesListFn(formConfig, widgetList, rulesList)(widget)
    buildFieldOptionsFn(formConfig, widgetList, fieldOptions)(widget)
    buildUploadDataFn(formConfig, widgetList, uploadData)(widget)
  })

  const activeTabs = buildActiveTabs(formConfig, widgetList)

  const v3JSTemplate =
`  import { defineComponent, toRefs, reactive, getCurrentInstance } from 'vue'

  export default defineComponent({
    components: {},
    props: {},
    setup() {
      const state = reactive({
        ${formConfig.modelName}: {
          ${defaultValueList.join('\n')}
        },

        ${formConfig.rulesName}: {
          ${rulesList.join('\n')}
        },

        ${activeTabs.join('\n')}

        ${fieldOptions.join('\n')}

        ${uploadData.join('\n')}
      })

      const instance = getCurrentInstance()

      const submitForm = () => {
        instance.ctx.$refs['vForm'].validate(valid => {
          if (!valid) return

          //TODO: 提交表单
        })
      }

      const resetForm = () => {
        instance.ctx.$refs['vForm'].resetFields()
      }

      return {
        ...toRefs(state),
        submitForm,
        resetForm
      }
    }
  })`

  return v3JSTemplate
}

