<template>
  <el-dialog
    title="查看详情"
    :visible.sync="dialogVisible"
    width="500px"
    @closed="closed">
    <div>
      <el-table
        tooltip-effect="dark"
        :data="tableList"
        max-height="450px"
        class="el-table-list-mini-empty">
        <el-table-column prop="errorMsg" label="错误信息"></el-table-column>
      </el-table>
      <div class="clearfix">
        <dm-pagination
          small
          class="fr mb0"
          v-if="tableList.length"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listParams.currentPage"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="listParams.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"></dm-pagination>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closed">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import fetch from '@/api/common.js';
const { virtualErrorPage } = fetch;
import { page } from '@/mixins/table.js';
export default {
  name: 'StockUploadRecordDetail',
  mixins: [ page ],
  props: {
    id: {
      type: [ String, Number ],
      required: true,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: true,
      listParams: {
        id: '',
        key: '',
        currentPage: 1,
        pageSize: 20,
      },
      total: 0,
      tableList: [],
    };
  },
  methods: {
    closed() {
      this.$emit('update:dialogVisible', false);
      this.loading = false;
      this.tableList = [];
      this.listParams.currentPage = 1;
      this.listParams.pageSize = 20;
    },
    getTableList() {
      const params = {
        ...this.listParams,
        id: this.id,
        pageNum: this.listParams.currentPage,
      };
      this.loading = true;
      virtualErrorPage(params)
        .then((res) => {
          this.loading = false;
          const data = res.result;
          this.tableList = data.result || [];
          this.total = data.totalCount;
          // 删除至最后一页没数据的情况，页码-1
          if (
            this.tableList.length === 0 &&
            this.listParams.currentPage !== 1
          ) {
            this.listParams.currentPage -= 1;
            this.getTableList();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  watch: {
    dialogVisible(val) {
      if(val) {
        this.getTableList();
      }
    }
  }
};
</script>
