<template>
  <Card>
    <p style="margin-left: 30px;font-size: 13px;font-weight: bold">
      <Icon type="md-bookmark" size="15"/>
      申请信息
    </p>
    <div class="table-c">
      <table width="1050" border="0" cellspacing="0" cellpadding="0" style="margin-left: 40px">
        <tr>
          <!--<td style="width: 210px;background-color: #f8f8f9">所属区域</td>
          <td style="width: 310px;text-align: left">{{processInstance.areaName}}</td>-->
          <td style="width: 210px;background-color: #f8f8f9">业务标题</td>
          <td style="width: 310px;text-align: left">{{processInstance.busName}}</td>
          <td style="background-color: #f8f8f9">申请时间</td>
          <td style="text-align: left">{{processInstance.startTime}}</td>
        </tr>
        <tr>
          <td style="background-color: #f8f8f9">申请人</td>
          <td style="text-align: left">{{processInstance.userName}}</td>
          <td style="background-color: #f8f8f9">目标单位</td>
          <td style="text-align: left">{{processInstance.targetCompanyName}}</td>
        </tr>
        <!--<tr>
        </tr>-->
        <tr>
          <td style="background-color: #f8f8f9">申请说明</td>
          <td style="text-align: left">{{processInstance.applyReason}}</td>
          <td style="background-color: #f8f8f9">当前状态</td>
          <td style="text-align: left">{{processInstance.nowStep?processInstance.nowStep:bean.name}}</td>
        </tr>
      </table>
    </div>
    <p style="margin-left: 30px;font-size: 13px;font-weight: bold;margin-top: 20px">
      <Icon type="md-bookmark" size="15"/>
      {{processInstance.busName}}
    </p>
    <div style="margin-top: 10px;margin-left: 40px">
      <div style="text-align: right;margin-bottom: 10px">
        <commonComponent :value="modalParams1" @reload-data="reloadData"></commonComponent>
      </div>

    </div>
    <div style="text-align: center;margin-top: 20px;">
      <Button v-if="type == 'approval'" @click="approval($event)" type="primary">审批</Button>
      <Button  @click="cancel" style="margin-left: 10px;">关闭</Button>
    </div>
    <workflowApproval ref="workflowApproval" :show.sync="showModal" :taskId="this.taskId"
                      @cancel="cancel" @reload-data="reloadData" @on-success="returnCallBack" ></workflowApproval>
  </Card>
</template>

<script>
  import workflowApproval from './workflow-approval.vue'
  import commonComponent from './common-component.vue'

  export default {
    name: 'workflowDetails',
    components: {
      workflowApproval,
      commonComponent,
    },
    props: {
      show: Boolean,
      bean: {//任务的本地对象
        type: Object,
        default: function () {
          return {}
        }
      },
      taskId: String,
      /*processInstanceId: String,*/
      type: String,
    },
    data () {
      return {
        showModal: false,
        task: {},
        processInstance: {},
        modalParams1: {},
        //flag: '',
        //modalTitle: '',
        //disabled: false,
      }
    }, methods: {
      cancel () {
        this.showModal = false
        this.$emit('cancel')
      },
      reloadData () {
        //this.$emit('update:show', false)
        this.$emit('reload-data')
      },
      approval (e) {
        e.stopPropagation()
        this.showModal = true
      },
      returnCallBack (data) {
        this.$emit('on-success', data)
      }
    },
    watch: {
      bean: {
        immediate: true,
        handler: function () {
          if ((!this.bean) || this.bean.size===0){
            this.bean = {processVariables: {}}
            return
          }
          if (this.bean.entity_type === 'task'){
            this.processInstance = this.bean.processVariables
          }else {
            this.processInstance = this.bean
          }
          let doOrView
          if (this.type === 'approval' || this.type === 'apply'){
            doOrView = 'do'
          }else if (this.type === 'view') {
            doOrView = 'view'
          }
          this.modalParams1 = {busId: this.processInstance.busId, busData: this.processInstance.busData,
            busUrl: this.processInstance.busUrl, busUrlType: this.processInstance.busUrlType,
            taskId: this.taskId, /*processInstanceId: this.processInstanceId,*/ type: doOrView};
        }
      }
    },
    mounted () {
    }

  }
</script>

<style scoped>
  .table-c table {
    border-right: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
    text-align: center;
    margin-top: 10px;
  }

  .table-c table td {
    border-left: 1px solid #e8eaec;
    border-top: 1px solid #e8eaec
  }

  .table-c table tr {
    height: 30px
  }
</style>
