<!--
<log-table :activeTab="activeTab"></log-table>

import logTable from '@/components/dataLog/log-table.vue'
components: {
  logTable
}
-->
<template>
  <div class="log-content border-box">
    <div class="table-condition">
      <el-date-picker class="m-l-10" v-model="dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      <el-input placeholder="请输入商户名称" v-model="searchInput" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
    </div>
    <el-table v-loading="queueLoading" :data="queueTableData" class="table-no-line-wrap">
      <el-table-column prop="categoryName" label="序号">
        <template slot-scope="scoped">
          {{ scoped.row.version }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="商户名称">
        <template slot-scope="scoped">
          {{ scoped.row.forcedUpdating == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="parentCode" label="操作更新时间" show-overflow-tooltip>
        <template slot-scope="scoped">{{ scoped.row.operatorName | formatTimeStamp }}</template>
      </el-table-column>
    </el-table>
    <div class="pagination block text-right" v-if="queueTableData.length != 0">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
export default {
  name: 'tableList',
  props: {
    activeTab: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      requestProject: 'data-monitor',
      queueLoading: false,
      dateRange: [],
      searchInput: '',
      tableData: [
        /*  {
          id: '1',
          brandName: 'GXG',
          updateTime: '2019-04-04 13:45',
        } */
      ],
      currentPage: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      let that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    /**
     * 日期
     */
    changeDate(e) {
      let that = this;
      if (!e) {
        that.dateRange = [];
      }
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      // let fullPath = that.$route.fullPath;
      that.getTableList();
    },
    /**
     * 获取列表数据
     *
     */
    getTableList() {
      let that = this;
      that.queueLoading = true;
      let para = {
        search: that.searchInput,
        isFinished: that.activeTab == 'first' ? false : true, // true：重跑完成，false或null或不传值：重跑中
        startTime: that.dateRange[0],
        endTime: that.dateRange[1],
        currentPage: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getRequest(`/dataMonitoring/runningLog`, para)
        .then(res => {
          let data = res.data;
          that.queueLoading = false;
          if (data.errorCode == 0) {
            that.tableData = !!data.result ? data.result : [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.queueLoading = false;
          that.$message.error(error);
        });
    }
  },
  watch: {
    activeTab(newDate) {
      let that = this;
      if (!newDate) {
        return false;
      }
      that.getTableList();
    }
  },
  mounted() {
    let that = this;
    if (that.activeTab != '') {
      that.getTableList();
    }
  }
};
</script>
<style lang="less" scoped>
.log-content {
  padding: 24px;
}
</style>
