<template>
  <a-card :bordered="false" style="text-align: center">

    <a-tabs>
      <a-tab-pane tab="流程正文" key="1" forceRender>
        <process-permission-authorization-form :isNew="isNew" :processData="processData" :disabled="disabled"
                                               @afterSubmit="afterSub" @close="close" :task="task" @passTask="passTask"
                                               @backTask="backTask" @loadData="loadData"/>
      </a-tab-pane>

      <a-tab-pane tab="流程节点图" key="2" forceRender>
        <historic-pictrue :pictureId="pictureId" :procInstId="procInstId"/>
      </a-tab-pane>
      <a-tab-pane tab="审批历史" key="3" forceRender>
        <historic-detail :pictureId="pictureId" :procInstId="procInstId"/>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import ProcessPermissionAuthorizationForm from './ProcessPermissionAuthorizationForm'
  import historicPictrue from '../historicPictrue'
  import historicDetail from '../historicDetail'

  export default {
    name: 'ProcessPermissionAuthorization',
    components: { ProcessPermissionAuthorizationForm, historicPictrue, historicDetail },
    data() {
      return {
      }
    },
    props: {
      /*流程数据*/
      isNew: { type: Boolean, default: false, required: false },
      task: { type: Boolean, default: false, required: false },
      processData: {
        type: Object,
        default: () => {
          return {}
        },
        required: false
      },
      pictureId: {
        type: String,
        default: '',
        required: true
      },
      procInstId: {
        type: String,
        default: '',
        required: true
      },
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    methods: {
      afterSub(formData) {
        this.$emit('afterSubmit', formData)
      },
      close() {
        //todo 关闭后的回调
        this.$emit('close')
      },
      /*通过审批*/
      passTask() {
        this.$emit('passTask')
      },
      /*驳回审批*/
      backTask() {
        this.$emit('backTask')
      },
      loadData() {
        this.$emit('loadData')
      }
    }
  }
</script>

<style scoped>

</style>