<!--
<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">
      <span v-if="activeTab == 'second'" class="font-14">重跑完成日期</span><el-date-picker v-if="activeTab == 'second'" class="m-l-10 m-r-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)" clearable @clear="clearSearch"> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input>
    </div>
    <el-table v-loading="queueLoading" :data="tableData" class="table-no-line-wrap">
      <el-table-column prop="categoryName" label="序号">
        <template slot-scope="scoped">
          {{ scoped.row.sort }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="商户名称">
        <template slot-scope="scoped">
          {{ scoped.row.enterpriseName }}
        </template>
      </el-table-column>
      <el-table-column prop="parentCode" :label="activeTab == 'first' ? '操作更新时间' : '重跑完成日期'" show-overflow-tooltip>
        <template slot-scope="scoped">{{ scoped.row.updateTime | formatTimeStamp }}</template>
      </el-table-column>
      <template slot="empty">
        <div class="no-data-wrap">
          <div class="no-data-icon">
            <img src="../../../static/img/no-data_icon.png" alt="" />
          </div>
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <div class="pagination block text-right" v-if="tableData.length != 0 && activeTab == 'second'">
      <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: [
        /* {
          sort: '1',
          enterpriseName: 'GXG',
          updateTime: 1554356700000
        } */
      ],
      tableDataCopy: [],
      currentPage: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      let that = this;
      if (that.activeTab == 'second') {
        that.currentPage = 1;
        that.getTableList();
      } else {
        let CopyData = JSON.parse(JSON.stringify(that.tableDataCopy));
        let filterData = CopyData.filter(ele => {
          if (!!ele.enterpriseName && ele.enterpriseName.includes(value)) {
            return ele;
          }
        });
        that.tableData = filterData;
      }
    }, 500),
    /**
     * 清空
     *
     */
    clearSearch() {
      let that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 日期
     */
    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 ? that.dateRange[0] : '',
        endTime: that.dateRange ? that.dateRange[1] : '',
        currentPage: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getRequest(`/gic-platform-operation/dataMonitoring/runningLog`, para)
        .then(res => {
          let data = res.data;
          that.queueLoading = false;
          if (data.errorCode == 0) {
            that.total = data.totalCount;
            that.tableData = !!data.result ? data.result : [];
            that.tableDataCopy = JSON.parse(JSON.stringify(that.tableData)) || [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.queueLoading = false;
          that.$message.error(error);
        });
    }
  },
  watch: {
    activeTab(newDate) {
      let that = this;
      that.searchInput = '';
      if (!newDate) {
        return false;
      }
      that.getTableList();
    }
  },
  mounted() {
    let that = this;
    if (that.activeTab != '') {
      that.getTableList();
    }
  }
};
</script>
<style lang="less" scoped>
.log-content {
  padding: 20px;
  .table-condition {
    margin-bottom: 20px;
  }
}
</style>
