<template>
  <div>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="handleClose">
      <div class="el-label"><i class="el-icon-collection-tag"></i>基本信息</div>
      <div class="el-line"></div>
      <baseTable v-if="woNo" :itemId="itemId" :woNo="woNo" :taskName="taskName"/>
      <div class="el-line"></div>
      <div class="el-label"><i class="el-icon-collection-tag"></i>审批轨迹</div>
      <div class="el-line"></div>
      <el-table v-if="rovaList" class="com-table" ref="multipleTable" :data="rovaList" tooltip-effect="dark" size="small"
          border style="width: 100%">
          <el-table-column prop="procId" label="编号">
          </el-table-column>
          <el-table-column prop="taskName" label="环节">
          </el-table-column>
          <el-table-column prop="opName" label="处理人">
          </el-table-column>
          <el-table-column prop="opNo" label="处理人工号">
          </el-table-column>
          <el-table-column prop="createTime" label="处理时间">
          </el-table-column>
          <el-table-column prop="remark" label="审批意见">
          </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import baseTable from  "./base.vue"
export default {
  props: {
      woNo:   { required: false, type: String},
      itemId: { required: false, type: String},
      taskName: { required: false, type: String},
      dialogVisible: {required: true,type: Boolean, default() {return false;}},
  },
  components:{ baseTable },
  data(){
    return{
      rovaList:[]
    }
  },
  methods:{
    handleClose(){
       this.$emit("closeWin")
    },
    rovaData(){
      this.$http({
          url: '/bpm/api/taskInit',
          method: "post",
          headers: {
              "Content-Type": "application/json",
          },
          data: {
              taskId: this.taskId,
              woNo: this.woNo
          },
      }).then((res) => {
          this.rovaList = res.data.taskList;
      });
    }
  },
  mounted(){
    this.rovaData()
  }
}
</script>
<style lang="scss">
.tv-container{
  background-color: white;
  margin:15px 15px 15px 15px;
  padding:20px ;

}
.el-label{
  color: #606266;
  border-bottom:1px dotted #bfc1c5;
  padding-bottom:5px;
}
.el-line{
  margin: 0px 0px 20px 0px;
}
</style>
