<template>
  <a-modal
    :title="modalTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >

    <a-table
      :columns="auditColumns"
      :dataSource="auditData"
      :pagination="false"
    >
    </a-table>

    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="handleCancel">返回</a-button>
    </template>
  </a-modal>
</template>

<script>
import { getAuditRecord } from '@/api/activiti/activiti'

export default {
  name: 'AuditRecord',
  data () {
    return {
      confirmLoading: false,
      modalTitle: '审核过程详情',
      visible: false,
      loading: false,
      // table
      auditColumns: [
        {
          title: '审批人',
          dataIndex: 'userName',
          key: 'userName',
          width: '20%'
        },
        {
          title: '审批时间',
          dataIndex: 'createTime',
          key: 'auditTime',
          width: '30%',
          scopedSlots: { customRender: 'keyword' }
        },
        {
          title: '审批结果',
          dataIndex: 'flag',
          key: 'flag',
          width: '30%',
          customRender: (text, row, index) => {
            return text ? '通过' : '不通过'
          }
        },
        {
          title: '审批意见',
          dataIndex: 'opinion',
          key: 'opinion'
        }
      ],
      processInstanceId: '',
      auditData: []
    }
  },
  methods: {
    base (processInstanceId) {
      this.processInstanceId = processInstanceId
      this.visible = true
      this.auditRecord()
    },
    auditRecord () {
      getAuditRecord({ processInstanceId: this.processInstanceId })
        .then((res) => {
          this.auditData = res.data
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
</style>
<style lang="less">
  .ant-modal2 {
    top: 10px !important;
  }
</style>
