<template>
  <div>
    <van-form ref="form">
      <van-field
        v-model="form.text"
        label="单行文本"
        placeholder="请输入"
        autocapitalize="off"
        autocorrect="off"
        clearable
        required
        name="text"
        :rules="[{ required: true, message: '必填' }]"
      />
      <van-field
        v-model="form.textarea"
        label="多行文本"
        placeholder="请输入"
        autocapitalize="off"
        autocorrect="off"
        clearable
        required
        name="text"
        :rules="[{ required: true, message: '必填' }]"
      />
    </van-form>
    <form-toolbar
      :buttons="actions"
      @action-event="handleButtonEvent"
    />
  </div>
</template>
<script>
import { get, startFlow } from '@/api/demo/url-form'
import FormToolbar from '@/business/platform/form/formrender/url-toolbar'

export default {
  components: {
    FormToolbar
  },
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    params: { // 接收表单传过来
      type: Object
    }
  },
  data() {
    return {
      selectorVisible: false,
      defaultForm: {
        text: '',
        textarea: '',
        number: 0,
        editor: ''
      },
      form: {
      },
      actions: []
    }
  },
  watch: {
    // 路由加载
    '$route.query': {
      handler(val, oldVal) {
        const data = this.$route.query
        if (this.$utils.isNotEmpty(data)) {
          this.loadFormData(data)
        }
      },
      immediate: true
    },
    params: {
      handler(val, oldVal) {
        if (val) {
          this.loadFormData(val.attrs)
        } else {
          this.loadFormData({})
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    loadFormData(attrs) {
      this.loadButtons()
      // 主键
      const id = attrs.id
      if (this.$utils.isEmpty(id)) {
        this.form = JSON.parse(JSON.stringify(this.defaultForm))
        return
      }
      this.dialogLoading = true
      get({
        id: id
      }).then(response => {
        this.form = response.data
        this.dialogLoading = false
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    validate() {
      return this.$refs.form.validate()
    },
    /**
     * 获取表单数据
     */
    getFormData() {
      return this.form
    },
    loadButtons() {
      const params = this.params
      let buttons = []
      if (this.$utils.isNotEmpty(params.taskId)) { // 处理流程任务
        buttons = [{
          key: 'agree',
          icon: 'ibps-icon-send',
          name: '同意',
          type: 'primary'
        }]
      } else if (this.$utils.isNotEmpty(params.defId)) { // 启动 或者草稿流程启动
        buttons = [{
          key: 'startFlow',
          icon: 'ibps-icon-send',
          name: '启动流程',
          type: 'primary'
        }, {
          key: 'saveDraft',
          icon: 'ibps-icon-save',
          name: '保存草稿',
          type: 'primary'
        }]
      } else if (this.$utils.isNotEmpty(params.instanceId)) { // 流程实例

      }

      this.actions = this.actions.concat(buttons)
    },
    handleButtonEvent({ key }) {
      switch (key) {
        case 'close':
          this.closeDialog()
          break
        case 'startFlow':
          // 方式一：调用父组件，需要在前置脚本写 urlFormService.save
          this.handleActionEvent(key)
          // 方式二：自己调用API,需自己处理保存和启动流程
          // this.handleStartFlow()
          break
        default:
          break
      }
    },
    // 关闭当前窗口
    closeDialog() {
      this.$emit('close', false)
    },
    handleActionEvent(key) {
      this.$emit('action-event', key)
    },
    handleStartFlow() {
      // 如需表单验证，请写表单验证

      // 后端启动流程的代码和数据
      startFlow({
        data: JSON.stringify(this.form)
      }).then(() => {

      }).catch(() => {
      })
    }
  }
}
</script>
