<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, status) {
      if (id && actId) {
        let data = {
          id: id,
          actId: actId,
          fidStatus: status,
        };
        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>
