<template>
  <div class="form-main">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <!-- <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="标题"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input :disabled="disabled"
                   v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入标题' }]}
          ]"
                   name="name"
                   placeholder="给目标起个名字" />
        </a-form-item>
        <a-form-item v-if="!disabled"
                     :wrapperCol="{ span: 24 }"
                     style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" :disabled="disabled||btndisabled" @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 8px" :disabled="disabled" @click="close">取消</a-button>
        </a-form-item>
      </a-form>-->
      <k-form-build :value="jsonData" :dynamicData="dynamicData" ref="KFB" @submit="handleSubmit" />
      <a-button
        htmlType="submit"
        type="primary"
        :disabled="disabled||btndisabled"
        @click="handleSubmit"
      >保存</a-button>
      <a-button style="margin-left: 8px" :disabled="disabled" @click="close">取消</a-button>
    </a-card>
  </div>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'demoForm',
  props: {
    /*全局禁用，可表示查看*/
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    /*流程数据*/
    processData: {
      type: Object,
      default: () => {
        return {}
      },
      required: false
    },
    /*是否新增*/
    isNew: { type: Boolean, default: false, required: false }
  },
  data() {
    return {
      jsonData: {},
      url: {
        getForm: '/actBusiness/getForm',
        addApply: '/actBusiness/add',
        editForm: '/actBusiness/editForm'
      },
      description: '流程表单demo，按例开发表单。需在 activitiMixin.js 中加入写好的表单',
      // form
      form: this.$form.createForm(this),
      /*表单回显数据*/
      data: {},
      btndisabled: false,
      ceshi_file: null,
      dynamicData: {
        aa: [
          {
            value: '1',
            label: '男'
          },
          {
            value: '2',
            label: '女'
          }
        ]
      }
    }
  },
  created() {
    console.log('流程数据', this.processData)
    let businessTable = ''
    //如果没有值则在另一个属性上有值
    if (!this.processData.businessTable) {
      this.processData.businessTable = this.processData.tableName
    }
    this.getAction('/tbTableInfo/query', { businessTable: this.processData.businessTable }).then(res => {
      this.jsonData = res.result.jsonContent
      // this.$refs.KFB.setData({aaa:null,bbb:null,name:"123"})
      // this.$refs.KFB.getData().then(res => {
      //   console.log('aaa',res)
      // })

      if (!this.isNew) {
        this.init()
      }
    })
  },
  methods: {
    /*回显数据*/
    init() {
      this.btndisabled = true
      var r = this.processData
      this.getAction(this.url.getForm, {
        tableId: r.tableId,
        tableName: r.tableName
      }).then(res => {
        if (res.success) {
          let formData = res.result
          formData.tableName = r.tableName
          this.data = formData
          console.log('表单回显数据', this.data)
          console.log(this.data)
          this.$refs.KFB.setData(this.data)
          // this.$nextTick(() => {
          //   this.$refs.KFB.form.setFieldsValue(pick(this.data, 'name'))

          // })
          this.btndisabled = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // handler
    handleSubmit(e) {
      // 通过函数获取数据
      this.$refs.KFB.getData()
        .then(res => {
          // 获取数据成功
          let formData = JSON.parse(JSON.stringify(res))
          console.log(formData)
          formData.id = this.data.id
          formData.procDefId = this.processData.id
          formData.procDeTitle = this.processData.name
          if (!formData.tableName) formData.tableName = this.processData.businessTable
          formData.filedNames = _.keys(res).join(',');
          formData.filedNames=getFiledNames(formData);//获取主表字段，排除子表标识
          var url = this.url.addApply
          if (!this.isNew) {
            url = this.url.editForm
          }
          //是否存在子表
          let ischild=false;
          //循环表单字段属性判断是否属性中包含数组对象
          let i=0;//子表数量
          _.keys(res).join(',').split(',').forEach(element => {
            if (formData[element] instanceof Array) {
              //判断是否符合子表命名规则
              if (element.indexOf('&') != -1) {
                let tableChildNameList = element.split('&')
                //判断是否能拆分两个字符，子表标识和子表数据库名称
                if (tableChildNameList.length == 2) {
                  i++;
                  let childName = tableChildNameList[1] //子表数据库名称
                  if(!formData.table_name_children){
                    //第一次拼接
                    formData.table_name_children = childName //表名
                  }else{//后面的表明拼接用“,”隔开
                    formData.table_name_children = formData.table_name_children+","+childName //表名
                  }
                  //定义属性名和值
                  formData["childFiledNames"+i] = _.keys(formData[element][0]).join(',') //子表字段名
                  formData["childList"+i] = JSON.stringify(formData[element]) //子表数据
                  ischild=true;
                }
              } else {
                //如果不是子表则是上传文件，则转字符串
                formData[element] = JSON.stringify(formData[element])
              }
            }
            // formData[element];
          })
          //判断需不需要存子表
          if(ischild){
            formData.filedNames=formData.filedNames+",table_name_children";
          }

          console.log(formData)
          //子表数据

          //调用保存接口
          this.btndisabled = true
          this.postFormAction(url, formData)
            .then(res => {
              if (res.success) {
                this.$message.success('保存成功！')
                this.$emit('afterSubmit', formData)
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {
              this.btndisabled = false
            })
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    },
    close() {
      this.$emit('close')
    },
    getData() {
      // 通过函数获取数据
      this.$refs.KFB.getData()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res))
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    }
  }
}
//获取主表字段，排除子表标识
function getFiledNames(formData) {
  let filedNames="";
  let list = formData.filedNames.split(',');//获取表单属性名集合
  list.forEach(element => {
    if (element.indexOf('&')==-1) {//查询是否有这个字段
      if(filedNames==""){//第一次则直接等于
        filedNames=element;
      }else{//后面用逗号隔开
        filedNames=filedNames+","+element
      }
    }
  })
  return filedNames;
}
</script>
<style lang="less" scoped>
.form-main {
}
</style>