<template>
  <div v-if="dialogVisible">
    <el-dialog
      title="打印记录"
      :visible.sync="dialogVisible"
      width="60%"
      append-to-body
    >
      <span>
        <ht-table
          ref="table"
          :data="data"
          :page-result="pageResult"
          :selectable="false"
          pagination-justify="end"
          @load="loadData"
        >
          <ht-table-column
            label="序号"
            align="center"
            type="index"
            width="80px"
          ></ht-table-column>
          <ht-table-column label="打印时间" prop="createTime"></ht-table-column>
          <ht-table-column
            label="模板名称"
            prop="templateName"
          ></ht-table-column>
          <ht-table-column label="打印节点" prop="nodeId">
            <template slot-scope="scope">
              <template v-for="node in processNodes">
                <span
                  v-if="scope.row.nodeId === node.nodeId"
                  :key="node.nodeId"
                >
                  {{ node.name }}
                </span>
              </template>
            </template>
          </ht-table-column>
          <ht-table-column
            label="打印用户"
            prop="printerName"
          ></ht-table-column>
        </ht-table>
      </span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getBpmPrintRecord } from '@/api/flow.js'
  import { mapState } from 'vuex'
  export default {
    name: 'PrintRecordDialog',
    props: {
      instId: {
        type: String,
        default: '',
      },
      nodeId: {
        type: String,
        default: '',
      },
      defId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        dialogVisible: false,
        data: [],
        pageResult: {
          page: 1,
          pageSize: 50,
          total: 0,
        },
        taskNodes: [],
      }
    },
    computed: {
      ...mapState('matter', ['processNodes']),
    },
    methods: {
      showDialog() {
        this.dialogVisible = true
      },
      loadData(param, cb) {
        param.querys = param.querys || []
        param.querys.push({
          property: 'PROC_INST_ID_',
          value: this.instId,
          operation: 'EQUAL',
          relation: 'AND',
        })
        if (this.nodeId) {
          param.querys.push({
            property: 'NODE_ID_',
            value: this.nodeId,
            operation: 'EQUAL',
            relation: 'AND',
          })
        }
        getBpmPrintRecord(param).then((resp) => {
          this.data = resp.rows
          const { page, pageSize, total } = resp
          let pageBean = { page, pageSize, total }
          this.$set(this, 'pageResult', pageBean)
          cb && cb()
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
