<template>
  <Modal v-model="showModalWorkflowDoSomething" :mask-closable="false" :closable="true" :styles="{modalTop: this.modalTop}"
         :width="this.type === 'apply'?460:1200"
         v-draggable="options" @on-cancel="cancel">
    <Card v-if="this.type === 'apply' && showModalWorkflowDoSomething" :bordered="false">
      <workflowApply :busCode="busCode" :busData="this.busData" :callBackUrl="callBackUrl"
                     @cancel="cancel" @reload-data="reloadData" @on-success="returnCallBack"
                     style="width: 100%;height: 340px;"></workflowApply>
    </Card>
    <Tabs ref="tabs_workflow" v-if="this.type !== 'apply' && showModalWorkflowDoSomething" :value="tabName"
          @on-click="changeTab" type="card">
      <TabPane label="详情信息" name="0">
        <workflowDetails v-if="tabName == '0'" :ref="'workflowDetails'+this.$options.name"
                         @cancel="cancel" @reload-data="reloadData" @on-success="returnCallBack"
                         :bean="bean" :taskId="this.taskId" :processInstanceId="processInstanceId" :type="this.type"></workflowDetails>
        <!--<workflowApproval v-if="tabName == '1' " :taskId="this.taskId" @cancel="cancel" @reload-data="reloadData" @on-success="returnCallBack"
                          style="width: 100%;height: 600px;"></workflowApproval>-->
      </TabPane>
      <TabPane label="审批轨迹" name="1">
        <workflowTrackList v-if="tabName == '1'" :taskId="this.taskId" :processInstanceId="processInstanceId"
                           @cancel="cancel" style="width: 100%;height: 820px;"></workflowTrackList>
      </TabPane>
    </Tabs>
    <div slot="footer">
      <!--<Button v-if="this.type !== 'apply'" size="large" @click="cancel">关闭</Button>-->
    </div>
  </Modal>
</template>

<script>
  import workflowDetails from './workflow-details.vue'
  import workflowApply from './workflow-apply.vue'
  import workflowTrackList from './workflow-track-list.vue'

  let $this
  export default {
    name: 'workflowDoSomething',
    components: {
      workflowDetails,
      workflowApply,
      workflowTrackList,
    },
    props: {
      show: Boolean,
      busCode: String,
      callBackUrl: String,
      taskId: String,
      //processInstanceId: String,
      busData: Object,
      type: {//类型 申请或者审批
        type: String,
        default:'apply',
      },
      bean: {//任务或流程的本地对象
        type: Object,
        default: function () {
          return {}
        }
      },
      firstShowHistory:{//是否先展示审批历史tabs
        type: Boolean,
        default:false,
      },
    },
    data () {
      return {
        tabName: '0',
        modalTop: '0px',
        showModalWorkflowDoSomething: false,
        modalTitle: '申请',
        //bean: {},
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        }
      }
    },
    methods: {
      changeTab (name) {
        this.tabName = name
      },
      cancel () {
        this.showModalWorkflowDoSomething = false
        this.$emit('update:show', false)
      },
      reloadData () {
        this.$emit('reload-data')
      },
      returnCallBack (data) {
        this.$emit('on-success', data)
      }
    },
    mounted () {
      $this = this
      this.tabName = this.$route.params.name ? this.$route.params.name : '0'
    },
    watch: {
      show: {
        immediate: true,
        handler: function () {
          this.showModalWorkflowDoSomething = this.show
        }
      },
      type: {
        immediate: true,
        handler: function () {
          if (this.type === 'approval') {
            this.modalTitle = '审批'
            this.modalTop = '0px'
          }else if (this.type === 'view'){
            this.modalTitle = '查看'
          }else if (this.type === 'apply'){
            this.modalTop = '80px'
          }
        }
      },
      firstShowHistory: {
        immediate: true,
        handler: function () {
          if (this.firstShowHistory) {
            this.tabName = '1'
          }else {
            this.tabName = '0'
          }
        }
      },
      /*busCode: {
        immediate: true,
        handler: function () {
          if (this.busCode && this.busCode.length > 0) {
            this.type = 'apply'
            this.modalTitle = '申请'
          }
        }
      },*/
      /*taskId: {
        immediate: true,
        handler: function () {
          if (this.taskId && this.taskId.length > 0) {
            this.type = 'approval'
            this.modalTitle = '审批'
          }
        }
      },*/
      bean: {
        immediate: true,
        handler: function () {
          if (this.bean.entity_type === 'task'){
            this.processInstanceId = this.bean.processInstanceId
          }else {
            this.processInstanceId = this.bean.id
          }
        }
      },
    }
  }
</script>

<style>

</style>
