<template>
  <div class="page-view">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
      <app-filter-item :span="6" label="单位名称">
        <el-input v-model="filters.companyName" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
      <app-filter-item :span="6" label="资源项名称">
        <el-input v-model="filters.name" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
      <app-filter-item :span="6" label="资源项编码">
        <el-input v-model="filters.code" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
    </app-filter>

    <div class="pa-11 bg-white h-100 flex-col mt-11 border-radius-5">
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
      />
    </div>
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
import API from '@/api/business/tyDataManageQuery';

export default {
  name: '',
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '单位名称', prop: 'companyName', width: '150' },
        { label: '资源项名称', prop: 'name', width: '150' },
        { label: '资源项编码', prop: 'code', width: '150' },
        { label: '系统名称', prop: 'sysName', width: '200' },
        { label: '系统编码', prop: 'sysCode', width: '130' },

        { label: '数据表名', prop: 'tableName', width: '150' },
        { label: '数据总量', prop: 'totalNum', width: '100', align: 'center' },

        { label: '当天新增量', prop: 'addNum', width: '100', align: 'center' },
        { label: '当天修改量', prop: 'updateNum', width: '100', align: 'center' },
        { label: '当天删除量', prop: 'delNum', width: '100', align: 'center' },
        { label: '当天变化量', prop: 'changeNum', width: '100', align: 'center' },

        { label: '数据变化时间', prop: 'countDate', width: '120', align: 'center' },
      ],
    };

    return {
      ...TABLE_CONFIG,
    };
  },
  computed: {
    dataMethod() {
      return API.getHistroyByDay;
    },
  },
};
</script>

<style lang="scss" scoped></style>
