<template>
  <div>
    <a-modal
      v-model="isShow"
      title="操作干预"
      :confirm-loading="confirmLoading"
      :width="800"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model :model="interForm" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
        <a-form-model-item label="当前处理环节">
          <a-select v-model="interForm.begin">
            <a-select-option :value="interForm.begin">
              {{ interForm.begin }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="调整后处理环节">
          <sd-select
            v-model="interForm.end"
            :options="selectData"
            @change="selectChanged"
          ></sd-select>
        </a-form-model-item>
        <a-form-model-item label="调整后操作">
          <sd-select
            v-model="interForm.action"
            :options="operationData"
            @change="selectChanged"
          ></sd-select>
        </a-form-model-item>
        <a-form-model-item label="调整后的处理人">
          <sd-user-picker v-model="interForm.departName" :single="false" :read-only="false" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import WorkbenchService from '@/workbench/workbench-service'
import { Message } from 'ant-design-vue'
import components from './_import-components/sd-flow-operation-import'

export default {
  name: 'SdFlowOperation',
  metaInfo: {
    title: 'SdFlowOperation',
  },
  components,
  props: {
    recode: {
      type: Object,
      default: function() {},
    },
    visibleInter: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      interForm: {
        layout: 'inline',
        begin: '', // 当前流程
        end: '', // 结束流程
        action: '', // 调整到的操作
        departName: [], // 流程处理人
        title: '',
      },
      confirmLoading: false,
      isShow: this.visibleInter,
      selectData: [],
      operationData: [],
      activeStepId: '', // 当前的步骤Id
      peopleFlag: true,
      instId: '',
      appCat: '',
      appId: '',
    }
  },
  created() {
    this.getInterRecode(this.recode)
  },
  methods: {
    getInterRecode(recode) {
      this.interForm.title = recode.title // 当前主题
      this.interForm.begin = recode.activeStepNames // 当前步骤名称
      this.instId = recode.instId
      if (recode.activeStepIds === '' || recode.activeStepIds === null) {
        this.activeStepId = 0
      } else {
        this.activeStepId = recode.activeStepIds
      }
      this.appCat = recode.appCat
      this.appId = recode.appId
      WorkbenchService.findStepsByFlowId(this.instId).then((data) => {
        this.selectData = data.datas.map((val) => {
          return {
            id: val.stepId,
            name: val.name,
            processId: val.processId,
          }
        })
      })
    },
    // 获取流程实例的当前活动环节信息
    selectChanged(item) {
      if (item[0].name === '结束') {
        this.peopleFlag = false
      } else {
        this.peopleFlag = true
      }
      const interParams = {
        processId: item[0].processId,
        stepId: item[0].id,
      }
      WorkbenchService.toActions(interParams).then((data) => {
        this.operationData = data.datas
      })
    },
    handleOk() {
      if (this.interForm.end === '') {
        Message.warn({ content: '请选择调整后流程' })
        return
      }
      if (this.interForm?.departName.length === 0 && this.peopleFlag) {
        Message.warn({ content: '请选择调整后处理人' })
      }
      const params = {
        actionId: this.interForm.action[0].id,
        activeStepId: this.activeStepId,
        operators: this.interForm.departName ? this.interForm.departName : [],
        flowCallbackBeanName: 'subflowDataBinderCallback',
        instId: this.instId,
        thirdBean: {
          title: this.interForm.title,
          businessTypeId: this.appId,
          businessTypeName: this.appCat,
        },
      }
      this.$emit('interHandleOk', params)
    },
    handleCancel() {
      this.$emit('interHandleCancle', '')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
