<template>
 
        <fm-generate-form 
        v-loading="loading"
        v-if="visible"
              :data="options" 
              :edit="edit"
              :value = "formData"
              ref="generateForm"
            >
        </fm-generate-form>

</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        formData: {},
        options: {'list': [], 'config': {'labelWidth': 100, 'labelPosition': 'right', 'size': 'small', 'customClass': ''}}
      }
    },
    props: {
      processDefinitionId: {
        type: String,
        required: true
      },
      taskFormData: {
        type: Array,
        required: false,
        default: []
      },
      edit: {
        type: Boolean,
        default: true
      }
    },
    components: {
    },
    methods: {
      createForm (id) {
        if (id) {
          this.loading = true
          this.$http({
            url: `/extension/formDefinition/queryByJsonId?jsonId=${id}`,
            method: 'get'
          }).then(({data}) => {
            if (data.success) {
              this.options = JSON.parse(data.formDefinition.formDefinitionJson.json)
              this.loading = false
              this.visible = false
              setTimeout(() => {
                this.visible = true
                this.$nextTick(() => {
                  let disabledArra = []
                  let showArra = []
                  this.taskFormData.forEach((item) => {
                    this.formData[`${item.id}`] = item.value
                    if (item.readable === true) {
                      showArra.push(`${item.id}`)
                    }
                    if (item.writable === false) {
                      disabledArra.push(`${item.id}`)
                    }
                  })
                  let hideArra = this.$refs.generateForm.getDataBindFields().filter((field) => {
                    if (!showArra.includes(field)) {
                      return true
                    }
                  })
                  this.$refs.generateForm.hide(hideArra)
                  this.$refs.generateForm.disabled(disabledArra, true)
                  this.$refs.generateForm.setData(this.formData)
                })
              }, 100)
            } else {
              this.loading = false
              this.visible = true
            }
          })
        } else {
          this.$message.info('没有关联流程表单!')
          this.visible = true
        }
      },
      submitStartFormData (vars, callback) {
        this.$refs.generateForm.getData().then(data => {
          this.loading = true
          this.$http({
            url: `/flowable/form/submitStartFormData`,
            method: 'post',
            data: {
              id: this.id,
              ...vars,
              processDefinitionId: this.processDefinitionId,
              data: JSON.stringify(data)
            }
          }).then(({data}) => {
            if (data && data.success) {
              this.visible = false
              this.loading = false
              this.$message.success(data.msg)
              callback(data)
            }
          })
        }).catch(e => {
        })
      },
      submitTaskFormData (vars, taskId, callback) {
        this.$refs.generateForm.getData().then(data => {
          data = {...vars, ...data}
          this.loading = true
          this.$http({
            url: `/flowable/form/submitTaskFormData`,
            method: 'post',
            data: {
              id: this.id,
              taskId: taskId,
              data: JSON.stringify(data)
            }
          }).then(({data}) => {
            if (data && data.success) {
              this.visible = false
              this.loading = false
              this.$message.success(data.msg)
              callback(data)
            }
          })
        }).catch(e => {
        })
      }
    }
  }
</script>