<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <!-- 操作栏 -->
      <template slot="menu" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          icon="el-icon-reading"
          @click="detailFn(scope.row)"
          >{{ scope.row.read ? "已读" : "查阅" }}
        </el-button>
      </template>
    </avue-crud>
    <detail ref="detailDialogRef" @success="refreshChange" />
  </basic-container>
</template>

<script>
import { fetchWarnList } from "@/api/riskEventWarningSettings.js";
import { infoTableOption } from "@/const/crud/riskEventWarningSettings.js";
import detail from "./components/detail.vue";

export default {
  components: { detail },
  data() {
    return {
      tableLoading: false,
      tableOption: infoTableOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableData: []
    };
  },
  methods: {
    async getList(page, params) {
      this.tableLoading = true;
      const obj = Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize
        },
        params
      );
      const res = await fetchWarnList(obj);
      if (res.data.code === 0) {
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
        console.log("tableData", this.tableData);
      }
      this.tableLoading = false;
    },

    detailFn(row) {
      this.$refs.detailDialogRef.detail(row);
    },

    refreshChange() {
      this.getList(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    }
  }
};
</script>

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