<template>
  <div class="check-items">
    <div class="badge" style="margin-bottom: 10px">
      <table style="width: 100%;">
        <tr>
          <td style="width: 70px;font-weight: bold;">{{data.title}}</td>
          <td>
            <span
              style="display: inline-block; border-top: 1px solid #eee; width: calc(100% - 22px);padding-left: 20px"
            ></span>
          </td>
        </tr>
      </table>
    </div>
    <el-row>
      <el-col :span="24">
        <el-table
          highlight-current-row
          :data="logArr"
          style="width: 100%"
          :header-cell-style="get_row_class"
        >
          <el-table-column :prop="v.prop" :width="v.width" :label="v.label" v-for="(v,i) in data.log_col" :key="i"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="size_change"
            @current-change="current_change"
            :current-page="page_index"
            :page-sizes="[10, 15, 20, 25, 30, 50, 100, 200, 300]"
            :page-size="page_size"
            :total="logArrLength"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ElRow from "element-ui-qz/packages/row";
import ElCol from "element-ui-qz/packages/col";
import ElPagination from "element-ui-qz/packages/pagination";
import ElTableColumn from "element-ui-qz/packages/table-column";
import ElTable from "element-ui-qz/packages/table";
export default {
  components: {
    ElCol,
    ElRow,
    ElPagination,
    ElTableColumn,
    ElTable
  },
  data() {
    return {
      page_index: 1,
      page_size: 10,
      logArrLength: 0,
      logArr: []
    };
  },
  props: {
    data: [Object]
  },
  methods: {
    getLogArr(){
        this.$http
        .get(this.data.url, {
          params:{
            pageIndex: this.page_index,
            pageSize: this.page_size,
            orderId: this.data.orderId,
            JID: this.data.JID
          }
        }).then(
          function(response) {
            if (!response.data.status) {
              this.$message.error(response.data.error);
              return;
            }
            this.logArr = response.data.list || [];
            this.logArrLength = response.data.allRow;
          },function(response) {});
    },
    get_row_class({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#f6f6f6";
      }
    },
    size_change(s) {
      this.page_index = 1;
      this.page_size = s;
      this.getLogArr();
    },
    current_change(p) {
      this.page_index = p;
      this.getLogArr();
    }
  }
};
</script>

