<template>
  <div>
    <p class="flow-description">{{ description }}</p>
    <div :class="[{ 'flow-formFlex': newformConfStyle }, 'flow-form']" :style="{ margin: '0 auto', width: formConf.fullScreenWidth }">
      <parser :style="{ width: newformConfStyle ? '40%' : '' }" :form-conf="oldformConf" :relation-conf="relationConf" :key="key + 1" ref="newdynamicForm" v-if="!loading & newformConfStyle" />
      <i v-if="newformConfStyle" class="el-icon-right" style="font-size: 80px"></i>

      <parser :style="{ width: newformConfStyle ? '40%' : '' }" :form-conf="formConf" :relation-conf="relationConf" @submit="sumbitForm" :key="key" ref="dynamicForm" v-if="!loading" />
    </div>
  </div>
</template>
<script>
import { DynamicInfo } from '@/api/workFlow/workFlowForm'
import { createModel, updateModel, getModelInfo } from '@/api/onlineDev/visualDev'
import Parser from '@/components/Generator/parser/Parser'
export default {
  components: { Parser },
  data() {
    return {
      description: '',
      formConf: {},
      formData: {},
      oldformConf: {},
      relationConf: [],
      newformConfStyle: false,
      columnDict: [],
      key: +new Date(),
      loading: true,
      eventType: '',
      dataForm: {
        id: '',
        data: '',
        flowId: ''
      }
    }
  },
  methods: {
    init(data) {
      this.description = data.description
      this.setting = data
      this.formConf = data.formConf ? JSON.parse(data.formConf) : {}
      this.dataForm.id = data.id || ''
      this.loading = true
      this.newformConfStyle = false
      this.$nextTick(() => {
        if (this.dataForm.id) {
          if (data.type == 1) {
            getModelInfo(data.flowId, this.dataForm.id).then((res) => {
              this.dataForm = res.data.data
              if (!this.dataForm.data) return
              this.formData = JSON.parse(this.dataForm.data)
              this.fillFormData(this.formConf, this.formData)
              this.$nextTick(() => {
                this.loading = false
                this.$emit('setPageLoad')
              })
            })
          } else {
            // DynamicInfo(this.dataForm.id).then(res => {
            this.dataForm = { data: data.formDataJson, id: data.id, flowId: data.flowId }
            if (!this.dataForm.data) return
            this.formData = JSON.parse(this.dataForm.data)
            //表单编辑回显时数据结构跟新增删除不同 需要单独处理
            if (this.formData.data && this.formData.oldData) {
              this.oldformConf = data.formConf ? JSON.parse(data.formConf) : {}
              //编辑回显时样式也不同
              this.newformConfStyle = true
              //编辑后的数据
              let oldData = JSON.parse(this.formData.oldData)
              //老数据
              this.formData = JSON.parse(this.formData.data)
              this.fillFormData(this.oldformConf, oldData)
              this.fillFormData(this.formConf, this.formData)
            } else {
              this.fillFormData(this.formConf, this.formData)
            }
            this.$nextTick(() => {
              this.loading = false
              this.$emit('setPageLoad')
            })
            // })
          }
        } else {
          this.formData = {}
          this.fillFormData(this.formConf, this.formData)
          this.$nextTick(() => {
            this.loading = false
            this.$emit('setPageLoad')
          })
          this.dataForm.flowId = data.flowId
        }
        this.key = +new Date()
      })
    },
    fillFormData(form, data) {
      form.disabled = true // this.setting.readonly
      const loop = (list) => {
        for (let i = 0; i < list.length; i++) {
          let item = list[i]
          if (item.__vModel__) {
            const val = data[item.__vModel__]
            if (val) item.__config__.defaultValue = val
            let noShow = false,
              isDisabled = true
            if (this.setting.formOperates && this.setting.formOperates.length) {
              let arr = this.setting.formOperates.filter((o) => o.id === item.__vModel__) || []
              if (arr.length) {
                let obj = arr[0]
                noShow = !obj.read
                isDisabled = !obj.write
              }
            } else {
              isDisabled = false
            }
            isDisabled = item.disabled ? item.disabled : isDisabled
            noShow = item.__config__.noShow ? item.__config__.noShow : noShow
            if (this.setting.readonly) isDisabled = true
            this.$set(item, 'disabled', isDisabled)
            this.$set(item.__config__, 'noShow', noShow)
          }
          if (item.__config__ && item.__config__.jnpfKey !== 'table' && item.__config__.children && Array.isArray(item.__config__.children)) {
            loop(item.__config__.children)
          }
        }
      }
      loop(form.fields)
    },
    sumbitForm(data) {
      if (!data) return
      this.dataForm.data = JSON.stringify(data)
      if (this.setting.type == 1) {
        if (this.eventType === 'save' || this.eventType === 'submit') {
          this.selfSubmit()
          return
        }
        this.$emit('eventReciver', this.dataForm, this.eventType)
      } else {
        this.$emit('eventReciver', this.dataForm, this.eventType)
      }
    },
    selfSubmit() {
      this.dataForm.status = this.eventType === 'submit' ? 0 : 1
      if (this.eventType === 'save') return this.selfHandleRequest()
      this.$confirm('您确定要提交当前流程吗, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.selfHandleRequest()
        })
        .catch(() => {})
    },
    selfHandleRequest() {
      if (!this.dataForm.id) delete this.dataForm.id
      if (this.eventType === 'save') this.$emit('setLoad', true)
      const formMethod = this.dataForm.id ? updateModel : createModel
      formMethod(this.setting.flowId, this.dataForm)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
            onClose: () => {
              if (this.eventType === 'save') this.$emit('setLoad', false)
              this.$emit('close', true)
            }
          })
        })
        .catch(() => {
          if (this.eventType === 'save') this.$emit('setLoad', false)
        })
    },
    dataFormSubmit(eventType) {
      if (this.setting.isPreview) return this.$message({ message: '功能预览不支持数据保存', type: 'warning' })
      this.eventType = eventType
      this.$refs.dynamicForm && this.$refs.dynamicForm.submitForm()
    }
  }
}
</script>
<style scoped lang="scss">
.flow-description {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 20px;
}
.flow-formFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
