<template>
  <van-popup
    v-model="dialogVisible"
    class="ibps-fullscreen-popup"
    @opened="getFormData"
  >
    <div v-if="!dialogLoading" class="ibps-fixed-top">
      <van-nav-bar
        :title="actionTitle"
        fixed
        @click-left="closeDialog"
      >
        <template #left>
          <van-icon name="cross" class="ibps-nav-bar__close-icon" />
        </template>
      </van-nav-bar>
      <van-form ref="form" label-width="130">
        <ibps-radio
          v-model="selectPathNode"
          :options="outgoingNodes"
          value-key="nodeId"
          label-key="name"
          label="指定下个执行节点"
          :clearable="false"
        />
        <ibps-switch
          v-model="allowSelectUser"
          label="允许选择执行人"
        />

        <ibps-user-selector
          v-model="executors"
          label="指定执行人"
          type="user"
          store="array"
          :disabled="!allowSelectUser"
          :required="allowSelectUser"
          :rules="allowSelectUser?[{ required: true, message: '必填' }]:null"
          multiple
          clearable
        />

      </van-form>
      <ibps-toolbar
        v-if="$utils.isNotEmpty(toolbars)"
        :actions="toolbars"
      />
    </div>
  </van-popup>
</template>
<script>
import { startOutgoing } from '@/api/platform/bpmn/bpmInst'

import IbpsUserSelector from '@/business/platform/org/selector'
import IbpsToolbar from '@/components/ibps-toolbar'
export default {
  components: {
    IbpsUserSelector,
    IbpsToolbar
  },
  props: {
    visible: Boolean,
    title: String,
    defId: String,
    data: Object
  },
  data() {
    return {
      dialogVisible: this.visible,
      dialogLoading: true,

      selectPathNode: '', // 选择路径
      allowSelectUser: false, // 允许选择用户
      executors: [], // 选择执行人

      nodeSupportSelectPath: {}, // 节点支持选择路径
      outgoingNodes: [],
      outgoingNodesUsersMap: {},

      actions: []
    }
  },
  computed: {
    actionTitle() {
      if (this.title) {
        return this.title
      }
      return '启动'
    },
    toolbars() {
      return [{
        'name': this.actionTitle,
        'type': 'primary',
        'callback': this.handleSave
      }]
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = val
      },
      immediate: true
    }
  },
  methods: {
    getFormData() {
      this.dialogLoading = true
      this.selectPathNode = ''
      this.allowSelectUser = false
      this.executors = []

      startOutgoing({
        defId: this.defId,
        data: JSON.stringify(this.data)
      }).then(response => {
        const variables = response.variables
        this.outgoingNodes = variables.outgoingNodes
        this.outgoingNodesUsersMap = variables.outgoingNodesUsersMapObject
        // TODO:
        this.nodeSupportSelectPath = variables.nodeSupportSelectPath

        if (this.$utils.isEmpty(this.outgoingNodes)) {
          return
        }

        this.selectPathNode = this.outgoingNodes[0].nodeId
        this.executors = this.outgoingNodesUsersMap[this.selectPathNode] || []

        this.dialogLoading = false
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    closeDialog() {
      this.$emit('close', false)
      this.dialogLoading = true
    },
    handleSave() {
      const nodeUsers = []
      let destination = ''
      if (this.$utils.isEmpty(this.selectPathNode)) {
        this.$notify({
          message: '请选择一个路径',
          type: 'warning'
        })
        return
      }
      destination = this.selectPathNode
      if (this.allowSelectUser) {
        if (this.$utils.isEmpty(this.executors)) {
          this.$notify({
            message: '请选择执行人',
            type: 'warning'
          })
          return
        }

        const executors = []
        this.executors.forEach((d) => {
          executors.push({
            id: d.id,
            name: d.name,
            type: 'employee',
            groupType: ''
          })
        })

        nodeUsers.push({
          nodeId: destination,
          executors: executors
        })
      }

      this.$emit('action-event', {
        destination,
        nodeUsers: JSON.stringify(nodeUsers)
      })
    }

  }
}
</script>
