<template>
  <div class="system-config">
    <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="参数名称" prop="configKey"> </el-table-column>
      <el-table-column label="参数值" prop="configValue"> </el-table-column>
      <el-table-column label="描述" prop="configName"> </el-table-column>
      <el-table-column prop="enable" label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.enable | booleanEnableDisableFilter }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <div slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="toEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            :type="scope.row.enable ? 'danger' : 'primary'"
            plain
            @click="toEnable(scope.row)"
            >{{ scope.row.enable ? "禁用" : "启用" }}</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>

    <!-- ModifyConfigItem -->
    <modify-config-item
      ref="ModifyConfigItem"
      :instance="curRow"
      @modified="searchForm"
    ></modify-config-item>
  </div>
</template>

<script>
import { searchSystemConfig, enableSystemConfig } from "@/api/system";
import ModifyConfigItem from "./ModifyConfigItem.vue";

export default {
  name: "system-config",
  components: { ModifyConfigItem },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      curRow: {},
    };
  },
  mounted() {
    this.searchForm();
  },
  methods: {
    async searchForm() {
      const res = await searchSystemConfig({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchForm();
    },
    toAdd() {
      this.curRow = {};
      this.$refs.ModifyConfigItem.open();
    },
    toEdit(row) {
      this.curRow = row;
      this.$refs.ModifyConfigItem.open();
    },
    async toEnable(row) {
      const action = row.enable ? "禁用" : "启用";
      const result = await this.$confirm(
        `确定要${action}参数【${row.configKey}】吗?`,
        "操作提醒",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          iconClass: "el-icon-warning",
          customClass: "el-message-box__error",
        }
      ).catch(() => {});
      if (result !== "confirm") return;

      const enable = !row.enable;
      await enableSystemConfig({
        id: row.id,
        enable,
      });
      row.enable = enable;
      this.$message.success("操作成功！");
    },
  },
};
</script>
