<template>
  <a-card>
    <div class="cust-list-cart" ref="code">
      <a-form layout="horizontal" class="ant-advanced-search-form">
        <div>
          <a-row>
            <a-col :span="6">
              <a-form-item
                label="项目名称"
                :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 16 }"
              >
                <a-input
                  @pressEnter="search"
                  style="width: 100%"
                  v-model="query.projectName"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                label="错误码"
                :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 16 }"
              >
                <a-input
                  @pressEnter="search"
                  style="width: 100%"
                  v-model="query.errorCode"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="创建时间"
                :labelCol="{ span: 4 }"
                :wrapperCol="{ span: 20 }"
              >
                <a-range-picker
                  style="width: 100%"
                  :value="ctDatePicker"
                  @change="onCtDateChange"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>

      <a-table
        size="middle"
        @change="sortChange"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :rowKey="rowKey"
        bordered
      >
        <div slot="title" slot-scope="data">
          <span class="cust-title">
            <a-icon type="hdd" />异常日志列表{{ data.none }}
          </span>
          <div class="cust-table-operator">
            <a-button-group>
              <a-button type="primary" @click="search">查询</a-button>
              <a-button  key="dddsa" type="primary" @click="exportExcel">xxsad</a-button>
              <a-button @click="reset">重置</a-button>
            </a-button-group>
          </div>
        </div>
<!--         <div slot="footer" slot-scope="data">
          {{ data.none }}
          <a-pagination
            @change="pageChange"
            :defaultPageSize="defaultPageSize"
            :pageSizeOptions="$pageSizeOptions"
            @showSizeChange="sizeChange"
            class="cust-pagination"
            size="small"
            :total="total"
            showSizeChanger
            showQuickJumper
            :showTotal="$showTotal"
          />
        </div> -->
      </a-table>
    </div>
  </a-card>
</template>

<script>
import { getPage, exportExxx } from '@/api/base/baseErrorLog'
import { formatDate, humpToLine, setOrder } from '@/util/util'
import fileDownload from 'js-file-download';

const dataSource = []

const columns = [
  { title: '操作人员', width: 120, dataIndex: 'userName' },
  { title: '项目名称', width: 130, dataIndex: 'projectName' },
  { title: '错误码', width: 100, dataIndex: 'errorCode' },
  { title: '平台类型', width: 100, dataIndex: 'platform' },
  { title: '日志异常信息', dataIndex: 'content', width: 300, ellipsis: true },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 120,
    sorter: true,
    customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
  }
]

export default {
  name: 'ErrorLogList',
  data() {
    return {
      query: {
        page: 1,
        size: 10,
        projectName: '',
        errorCode: '',
        ctDateBegin: '',
        ctDateEnd: '',
        sort: ''
      },
      ctDatePicker: [],
      rowKey: 'id',
      total: 0,
      columns: columns,
      dataSource: dataSource,
      isFirstLoad: true
    }
  },
  methods: {
    reset() {
      this.query.page = 1
      this.query.projectName = ''
      this.query.errorCode = ''
      this.query.ctDateBegin = ''
      this.query.ctDateEnd = ''
      this.ctDatePicker = []
      this.loadData()
    },

    exportExcel() {
      exportExxx().then((response) => {
        if (response && response.data) {
          fileDownload(response.data, '退票统计.xlsx')
        }
      })
    },

    loadData(size) {
      if (size && !isNaN(size)) {
        this.query.size = size
      }
      getPage(this.query).then((response) => {
        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
          let respData = response.data
          this.dataSource = respData.list
          this.total = respData.total
        }
      })
    },
    search() {
      this.query.page = 1
      this.loadData()
    },
    onCtDateChange(date, dateString) {
      this.ctDatePicker = date
      this.query.ctDateBegin = dateString[0]
      this.query.ctDateEnd = dateString[1]
      this.loadData()
    },
    pageChange(page) {
      this.query.page = page
      this.loadData()
    },
    sizeChange(current, size) {
      this.query.size = size
      this.loadData()
    },
    sortChange(pagination, filters, sorter) {
      this.query.sort = humpToLine(sorter.field)
      this.query.order = setOrder(sorter.order)
      this.loadData()
    }
  },
  computed: {
    defaultPageSize: function () {
      return this.$defaultPageSize()
    }
  },
  mounted() {},
  activated() {
    if (this.isFirstLoad == true) {
      this.loadData(this.defaultPageSize)
      this.isFirstLoad = false
    } else {
      let isModify = this.$route.query.isModify
      if (isModify == true) {
        this.loadData()
      } else if (isModify != undefined) {
        this.loadData()
      }
    }
  }
}
</script>

<style scoped>
</style>