<template>
  <div :class="$style.content">
    <a-modal
      v-model="showInterveneStep"
      :destroy-on-close="true"
      title="特送"
      :body-style="{ overflow: 'auto' }"
      :confirm-loading="confirmLoading"
      @ok="handleOkInterveneStep"
      @cancel="handleCancelInterveneStep"
    >
      <a-form-model :model="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
        <a-form-model-item label="当前处理环节">
          <a-select v-model="form.begin">
            <a-select-option :value="form.begin">
              {{ form.begin }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="调整后处理环节">
          <sd-select v-model="form.end" :options="selectData" @change="selectChanged"></sd-select>
        </a-form-model-item>
        <a-form-model-item label="调整后的处理人">
          <sd-user-picker v-model="form.departName" :single="false" :read-only="false" />
        </a-form-model-item>
        <a-form-model-item label="特送原因">
          <a-input v-model="form.opinion" type="textarea"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- <a-divider orientation="left" :class="$style.divider">
      选择环节
    </a-divider>
    <a-radio-group v-model="stepId" @change="onChange">
      <a-radio v-for="(item, index) in stepArr" :key="index" :value="item.stepId">
        {{ item.name }}
      </a-radio>
    </a-radio-group> -->
    <!-- <a-divider orientation="left" :class="$style.divider">
      特送原因
    </a-divider>
    <a-textarea placeholder="" :rows="4" /> -->
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import FlowService from '@/webflow/flow-service'
import components from './_import-components/sd-webflow-delivery-import'
export default {
  name: 'SdWebflowDelivery',

  components,
  props: {
    flowdata: {
      type: Object,
      default: (_) => {},
    },
    showInterveneStep: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      stepArr: [],
      stepId: '',
      confirmLoading: false,
      form: {
        layout: 'inline',
        begin: '', // 当前流程
        end: '', // 结束流程
        departName: [], // 流程处理人
        title: '',
        opinion: '',
      },
      selectData: [],
      peopleFlag: true,
    }
  },
  created() {},
  mounted() {
    this.getInterveneData()
    FlowService.getInterveneSteps(this.flowdata)
      .then((res) => {
        this.stepArr = res.datas
      })
      .catch((e) => {
        // eslint-disable-next-line no-console
        console.error('获取流程详情信息失败,请排查详情接口')
      })
  },
  methods: {
    onChange(e) {
      this.$emit('input', e.target.value)
    },
    selectChanged(value) {
      this.form.departName = value[0].operators
      if (value[0].name === '结束') {
        this.peopleFlag = false
      } else {
        this.peopleFlag = true
      }
    },
    getInterveneData() {
      this.form.begin =
        this.flowdata.processActiveLogInfo.length > 0
          ? this.flowdata.processActiveLogInfo[0].stepName
          : '已办结' // 当前流程步骤名
      this.form.departName = []
      FlowService.deliverySteps(this.flowdata).then((res) => {
        this.selectData = res.datas.map((val) => {
          return {
            id: val.stepId,
            name: val.name,
            processId: val.processId,
            operators: val.operators, // 默认的特送审批人
          }
        })
      })
    },
    handleOkInterveneStep() {
      if (this.form.end === '') {
        Message.warn({ content: '请选择调整后流程' })
        return
      }
      if (this.form?.departName?.length === 0 && this.peopleFlag) {
        Message.warn({ content: '请选择调整后处理人' })
        return
      }
      const handleParams = {
        activeStepId: this.flowdata.activeStepId === null ? 0 : this.flowdata.activeStepId, // 当前的步骤Id 如果无值则为0
        instId: this.flowdata.instId, // 当前流程Id
        stepId: this.form.end[0].id, // 目前流程id
        operators: this.form.departName ? this.form.departName : [],
        flowCallbackBeanName: 'subflowDataBinderCallback',
        beanId: this.flowdata.processFormData.beanId,
        formId: this.flowdata.processFormData.formId,
        opinion: this.form.opinion,
        thirdBean: {
          title: '',
          businessTypeId: '',
          businessTypeName: '',
        },
      }
      this.flowdata.processFormData.processFormPropertyValues.forEach((item) => {
        if (item.name === 'title') {
          handleParams.thirdBean.title = item.value
        }
        if (item.name === 'businessTypeId') {
          handleParams.thirdBean.businessTypeId = item.value
        }
        if (item.name === 'businessTypeName') {
          handleParams.thirdBean.businessTypeName = item.value
        }
      })
      this.confirmLoading = true
      this.$emit('deliveryHandleOk', handleParams)
    },
    handleCancelInterveneStep() {
      this.$emit('deliveryHandleCancle', '')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.content {
  margin-top: -20px;
}
.step {
  display: block;
  line-height: $input-height-base;
}
.divider {
  margin-bottom: 5px;
  line-height: $dropdown-line-height;
}
</style>
