<template>
  <div class="black-notice">
    <div class="part-box-head">
      <div class="part-box-head-left"><h1>黑名单设置</h1></div>
    </div>
    <div class="part-filter">
      <div class="part-filter-form">
        <div></div>
        <div class="part-filter-form-action">
          <el-button type="primary" icon="icon icon-add" @click="toAdd"
            >新增</el-button
          >
        </div>
      </div>
    </div>

    <el-table :data="tableData">
      <el-table-column label="软件名称">
        <span slot-scope="scope">{{ scope.row.softName }}</span>
      </el-table-column>
      <el-table-column label="进程名称">
        <span slot-scope="scope">{{ scope.row.processName }}</span>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <div slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            plain
            @click="toDelete(scope.row)"
          >
            删除
          </el-button>
        </div>
      </el-table-column>
    </el-table>
    <div class="part-page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 300]"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>

    <ModifyBlackItem
      ref="ModifyBlackItem"
      :instance="curRow"
      @modified="searchForm"
    />
  </div>
</template>

<script>
import { searchBlackList, deleteBlackItem } from "@/api/system";
import ModifyBlackItem from "./ModifyBlackItem.vue";

export default {
  name: "BlackList",
  components: {
    ModifyBlackItem,
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      curRow: {},
    };
  },
  async created() {
    this.searchForm();
  },
  methods: {
    async searchForm() {
      const res = await searchBlackList({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    toAdd() {
      this.curRow = {};
      this.$refs.ModifyBlackItem.open();
    },
    async toDelete(row) {
      const result = await this.$confirm(
        `确定要删除黑名单【${row.softName}】吗?`,
        "操作提醒",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          iconClass: "el-icon-warning",
          customClass: "el-message-box__error",
        }
      ).catch(() => {});

      if (result !== "confirm") return;

      await deleteBlackItem(row.id);
      this.tableData = this.tableData.filter((item) => item.id !== row.id);
    },
  },
};
</script>
