<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="menuLeft">
        <el-button type="primary" size="small" @click="createFn"
          >创建规则
        </el-button>
      </template>
      <!-- 操作栏 -->
      <template slot="menu" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          icon="el-icon-reading"
          @click="detailFn(scope.row)"
          >查看
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-document"
          @click="updateFn(scope.row)"
          >更新
        </el-button>
      </template>
    </avue-crud>

    <createDialog ref="createDialogRef" @success="refreshChange" />
  </basic-container>
</template>

<script>
import { fetchList } from "@/api/riskEventWarningSettings.js";
import { tableOption } from "@/const/crud/riskEventWarningSettings.js";
import createDialog from "./components/createDialog.vue";

export default {
  components: { createDialog },
  data() {
    return {
      tableLoading: false,
      tableOption: tableOption,
      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 fetchList(obj);
      if (res.data.code === 0) {
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
      }
      this.tableLoading = false;
    },
    createFn() {
      this.$refs.createDialogRef.add();
    },
    detailFn(row) {
      this.$refs.createDialogRef.detail(row);
    },
    updateFn(row) {
      this.$refs.createDialogRef.update(row);
    },
    refreshChange() {
      this.getList(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    }
  }
};
</script>

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