<template>
  <div>
    <Modal
      v-drag
      v-model="showModal"
      :title="modalTitle"
      width="500px"
    >
      <div style="max-height:350px;overflow:auto">
        <el-radio-group v-model="selectData" style="display: inline">
          <el-radio
            :label="item.flowId"
            v-for="item in flowList"
            :key="item.flowName"
            border
            style="width:47%;margin-left: 0;margin-right: 10px"
          >{{item.flowName}}
          </el-radio>
        </el-radio-group>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult"/>
      </div>
    </Modal>
    <!--点击确定后，发起流程-->
    <RenderedStartForm ref="startForm" @on-result-change="_close"/>
  </div>
</template>

<script>
import ModalFooter from '../../../components/base/modalFooter'
import { processInstance, buttonFlow } from '../../../api'
import RenderedStartForm from './RenderedStartForm'

/**
 * 根据按钮code选择流程
 */
export default {
  name: 'SelectFlowByBtn',
  components: { ModalFooter, RenderedStartForm },
  data() {
    return {
      showModal: false,
      modalTitle: '请选择流程',
      getPage: {},
      // 选中的数据
      selectData: '',
      flowList: [],
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '确定', type: 'primary' }
      ],
      // 按钮的code
      btnCode: ''
    }
  },
  methods: {
    _open(btnCode) {
      this.$nextTick(() => {
        this.btnCode = btnCode
        this.selectData = ''
        this._hideLoading()
        this._getFlowByBtn()
      })
    },
    // 根据按钮code查询流程列表
    _getFlowByBtn: async function() {
      const result = await buttonFlow.list({ buttonCode: this.btnCode })
      this.flowList = result
      if (result && result.length > 1) {
        // 超过一个需要进行选择
        this.showModal = true
      } else if (result && result.length === 1) {
        // 一个则直接调用接口
        this.selectData = result[0].flowId
        this._startForm()
      } else {
        this.$message.warning('按钮暂无绑定流程，无法发起流程！')
      }
    },
    /** *modal-footer */
    _footerResult(name) {
      switch (name) {
        case '取消':
          this.showModal = false
          break
        case '确定':
          if (this.selectData !== '') {
            this._startForm()
          } else {
            this.$message.warning('请选择一个流程！')
            this._hideLoading()
          }
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    // 发起流程 ----->1.有表单需要填写表单数据局；2.无表单直接发起
    // 启动流程表单
    _startForm: async function() {
      const result = await processInstance.renderedStartForm(this.selectData)
      if (result && result.renderedStartForm !== '') {
        // 表单信息不为空，才弹出表单界面
        this.$refs.startForm._open(result, this.selectData)
      } else {
        this._startOk()
      }
    },
    _startOk: async function() {
      const obj = {
        processDefinitionId: this.selectData
      }
      const result = await processInstance.start(obj)
      if (result) {
        this.$message.success('发起成功,请到系统管理进行审批')
      }
      this._hideLoading()
    },
    _close() {
      this.showModal = false
    }
  }
}
</script>
