<template>
  <van-popup
    v-model="dialogVisible"
    class="ibps-fullscreen-popup"
    position="bottom"
    @opened="loadFormData"
  >
    <van-nav-bar
      :title="title"
      fixed
      @click-left="closeDialog"
    >
      <template #left>
        <van-icon name="cross" class="ibps-nav-bar__close-icon" />
      </template>
    </van-nav-bar>
    <div>
      <ibps-data-template-formrender
        v-if="dialogVisible && formDef"
        ref="formrender"
        :form-def="formDef"
        :buttons="buttons"
        :data="formData"
        :params="formParams"
        :readonly="readonly"
        @action-event="(actionKey,args)=>emitEventHandler(actionKey,args)"
        @callback="callbackPage"
        @close="closeDialog"
      />
    </div>
    <!-- 流程定义选择器 -->
    <!-- <bpm-def-dialog
      v-model="dialogValue"
      :visible="bpmDefDialogVisible"
      :form-key="formKey"
      :multiple="false"
      :is-data-template-use="true"
      @close="visible => bpmDefDialogVisible = visible"
      @action-event="handleDialogActionEvent"
    /> -->
  </van-popup>
</template>
<script>
import { getFormData } from '@/api/platform/form/formDef'
import FormUtil from '@/business/platform/form/utils/formUtil'
import FormButton from './button'
import ActionMixin from './action'
// import BpmDefDialog from '@/business/platform/bpmn/definition/dialog'

import IbpsDataTemplateFormrender from '@/business/platform/form/formrender'

export default {
  components: {
    // BpmDefDialog,
    IbpsDataTemplateFormrender
  },
  mixins: [ActionMixin],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    params: Object
  },
  data() {
    return {
      title: '',
      dialogVisible: this.visible,
      dialogLoading: false,

      dialogValue: {},
      bpmDefDialogVisible: false,

      formDef: null,
      formData: {},
      formParams: {}, // 扩展参数
      buttons: [],
      boCode: '',
      version: 0
    }
  },
  computed: {
    formId() {
      return this.pkValue
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    }
  },
  methods: {
    loadFormData() {
      this.templateKey = this.params.templateKey
      this.formKey = this.params.formKey
      this.pkValue = this.params.pkValue
      this.toolbars = this.params.toolbars
      this.readonly = this.params.readonly
      this.rightsScope = this.params.rightsScope || 'data'

      this.dialogLoading = true
      getFormData({
        templateKey: this.templateKey || '',
        formKey: this.formKey,
        pk: this.pkValue,
        rightsScope: this.rightsScope
      }).then(response => {
        const data = response.data
        let responses = {}
        if (this.$utils.isNotEmpty(this.defaultData)) {
          responses = this.defaultData
        } else {
          responses = data.boData ? this.$utils.parseJSON(data.boData) : {}
        }

        this.formData = {
          // 表单数据
          responses: responses,
          // 表单权限
          permissions: this.$utils.parseData(data.permissions) || {}
        }
        // 从后台获取表单定义数据
        this.formDef = this.$utils.parseData(data.form) || {}

        const titleKey = !this.readonly ? (this.$utils.isNotEmpty(this.pkValue) ? '[编辑]' : '[新增]') : '[明细]'
        this.title = titleKey + this.formDef.name || ''

        this.boCode = this.formDef.code
        // 版本号
        this.version = data.version

        // 表单意见
        this.formParams.formOpinionData = FormUtil.initFormOpinionData(data.attributes || {})

        // 流程关联数据
        this.formParams.bpmLinkData = FormUtil.getBpmLinkData(data.attributes)

        // 业务主键
        this.formParams.bizKey = this.pkValue

        this.buttons = this.getButtons(this.toolbars, {})

        this.dialogLoading = false
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    getButtons(buttons, params) {
      if (this.$utils.isEmpty(buttons)) { return null }
      const btns = []
      for (let i = 0; i < buttons.length; i++) {
        const button = buttons[i]
        const alias = button.button_type
        const code = button.code
        button.key = alias === 'custom' ? (code || (alias + i)) : alias
        btns.push(button)
      }

      const btn = new FormButton({
        buttons: btns,
        params: params
      })
      return btn.response_buttons
    },
    getFormData() {
      return this.$refs.formrender.getFormData()
    },
    getFormEL() {
      return this.$refs.formrender
    },
    // 后置事件
    afterScript(key, params, callback) {
      if (!(this.getFormEL() && this.getFormEL().afterScript)) {
        const flag = true
        callback(flag)
        return
      }
      return this.getFormEL().afterScript(key, params, callback)
    },
    /**
     * 回调上个页面
     */
    callbackPage() {
      this.closeDialog()
      this.$emit('callback', true)
    },
    // 关闭当前窗口
    closeDialog() {
      this.title = ''
      this.formDef = null
      this.$emit('close', false)
    },
    // 验证表单
    validate(callback) {
      if (!this.$refs.formrender.validate) {
        const flag = true
        callback(flag)
        return
      }
      this.$refs.formrender.validate((valid, invalidFields) => {
        callback(valid, invalidFields)
      })
    },
    formSubmitVerify(callback) {
      return this.$refs.formrender.formSubmitVerify(callback)
    },
    formErrorToast() {
      return this.$refs.formrender.formErrorToast()
    }
  }
}
</script>
