<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 :filter-config="{ operation: 'EQUAL' }" :span="6" el-type="input" 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.sysCode" 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>

    <detail-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="refresh" />
  </div>
</template>

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

export default {
  name: '',
  components: { DetailDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '单位名称', prop: 'companyName', minWidth: '150' },
        { label: '资源项名称', prop: 'name', minWidth: '150' },
        { label: '资源项编码', prop: 'code', minWidth: '150' },
        { label: '系统名称', prop: 'sysName', minWidth: '160', align: 'center' },
        { label: '系统编码', prop: 'sysCode', width: '150' },
        { label: '数据操作时间', prop: 'createTime', width: '150', align: 'center' },
        {
          dataType: 'option',
          label: '操作',
          width: '240px',
          fixed: 'right',
          operation: [
            {
              name: '查看数据',
              type: 'text',
              size: 'mini',
              // icon: 'el-icon-document',
              plain: true,
              clickFun: async (row) => {
                this.currentRow = row;
                this.dialogVisible = true;
                this.dialogTitle = `表数据详情: ${row.name}`;
              },
            },
          ],
        },
      ],
    };
    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
    };

    return {
      ...TABLE_CONFIG,
      ...DIALOG_CONFIG,
    };
  },
  computed: {
    dataMethod() {
      return API.getHistroyByTime;
    },
  },
  methods: {
    dataAdd() {
      this.dialogTitle = '新增贴源层数据';
      this.dialogVisible = true;
    },
    onAfterGetData() {
      console.log(this.total);
    },
    showDetail() {},
  },
};
</script>

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