<template>
  <el-dialog
    title="查看审批流"
    :close-on-click-modal="false"
    :before-close="closeDialog"
    :visible.sync="visible"
    :modal="false"
    width="75%"
  >
    <el-table :data="auditList" tooltip-effect="dark" stripe style="width: 100%; margin-bottom: 20px">
      <el-table-column
        prop="levelId"
        width="80"
        label="序号"
        type="index"
      >
      </el-table-column>
      <el-table-column
        prop="nickName"
        header-align="center"
        align="center"
        width="130"
        label="节点人"
      >
      </el-table-column>
      <el-table-column
        prop="auditStatus"
        header-align="center"
        width="130"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus === 'O'">提交</span>
          <span v-if="scope.row.auditStatus === 'S'">待审</span>
          <span v-if="scope.row.auditStatus === 'N'">等待</span>
          <span v-if="scope.row.auditStatus === 'B'">审核退回</span>
          <span v-if="scope.row.auditStatus === 'A'">审核通过</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditMsg"
        header-align="center"
        align="center"
        label="意见"
      >
      </el-table-column>
      <el-table-column
        prop="auditItem"
        header-align="center"
        width="250"
        align="center"
        label="审核时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.auditItem !== undefined">{{ scope.row.auditItem.slice(0,10)}}</span>
          <span v-else>{{scope.row.auditItem}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="auditOpTime"
        header-align="center"
        width="250"
        align="center"
        label="提交时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.auditOpTime !== undefined">{{ scope.row.auditOpTime.slice(0,10)}}</span>
          <span v-else>{{scope.row.auditOpTime}}</span>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeDia">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listCharge } from '@/api/system/viewApproval'

export default {
  data() {
    return {
      visible: false,
      auditList:[]
    }
  },
  methods: {
    init(id,actId) {
      if (id && actId){
        let data = {
          id:id,
          actId:actId
        }
        this.optionsUsers = []
        this.visible = true
        this.addCharge(data)
      }else {
        if(!id){
          this.$message.error('主表ID为空');
        }else {
          this.$message.error('活动ID为空');
        }
      }
    },
    addCharge(data) {
      listCharge(data).then(data => {
        console.log(data)
        this.auditList = data.data
      })
    },
    // 表单提交
    dataFormSubmit() {

    },
    closeDialog(done) {
      this.visible = false
      this.$emit('refreshDataList')
      Object.assign(this.$data, this.$options.data.call(this))
    },
    closeDia() {
      this.visible = false
      this.$emit('refreshDataList')
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
