<template>
    <div v-loading="loading">
        <manager-ui
            ref="manager"
            :show-pagination="true"
            :show-download-btn="false"
            :query-model="queryParams"
            :query-items="queryItems"
            :static-data="statics"
            :table-data="tableData"
            :column-items="columnItems"
            :pagination="page"
            @search="search"
            @searchClick="
                page.current = 1;
                search();
            "
            @resetForm="resetForm"
            @create="createObject"
            @selection-change="(val) => (multipleSelection = val)"
        >
            <template #filterOperate="{ scope }">
                {{ scope.row.filterOperate | toCase(statics.filterOperateList, "dataId", "dataName") }}
            </template>

            <template slot="tableTools">
                <el-button
                    type="text"
                    icon="el-icon-delete-solid"
                    @click="confirmDel(multipleSelection.map(el => el.ruleId))"
                    >删除</el-button
                >
            </template>

            <template #operate="{ scope }">
                <el-context-menu
                    :menus="menus"
                    :scope="scope"
                    :default="defaultV"
                    @oper="clickRow"
                />
            </template>
        </manager-ui>
        <Dialog :visible.sync="dialogVisible" :dialogType="dialogType" :dialogRow="dialogRow" @listChange="search" />
    </div>
</template>
<script>
import { getList, listDel } from "./api";
import Dialog from './dialog.vue'

export default {
    components: {
        Dialog
    },
    data() {
        return {
            loading: false,
            tableData: [],
            multipleSelection: [],
            statics: {
                filterOperateList: [
                    { dataId: "0", dataName: "丢弃" },
                    { dataId: "1", dataName: "写文件" },
                ],
            },
            queryItems: [
                {
                    type: "input",
                    span: 12,
                    key: "ruleName",
                    label: "规则名称",
                },
                {
                    type: "select",
                    span: 12,
                    key: "filterOperate",
                    label: "过滤处理",
                    option: "filterOperateList",
                    optionLabel: "dataName",
                    optionValue: "dataId",
                },
            ],
            columnItems: [
                {
                    _key: "selection",
                    type: "selection",
                    width: "50",
                },
                {
                    _key: "ruleName",
                    prop: "ruleName",
                    label: "规则名称",
                },
                {
                    _key: "filterOperate",
                    prop: "filterOperate",
                    label: "过滤处理",
                    render: true,
                },
                {
                    _key: "operate",
                    prop: "operate",
                    label: "操作",
                    render: true,
                    width: 100,
                },
            ],
            defaultV: 3,
            menus: [
                {
                    text: "查看",
                    command: "detail",
                    icon: "el-icon-s-order",
                },
                {
                    text: "修改",
                    command: "modify",
                    icon: "el-icon-edit",
                    // ruleCode: "filterRules_update",
                },
                {
                    text: "删除",
                    command: "del",
                    icon: "el-icon-delete",
                    iconColor: "red",
                    // ruleCode: "filterRules_del",
                },
            ],
            queryParams: {
                ruleName: null,
                filterOperate: null,
                validTag: '1'
            },
            page: {
                current: 1,
                size: 10,
                total: 0,
            },
            dialogVisible: false,
            dialogType: '',
            dialogRow: {},
        };
    },
    created() {
        this.search();
    },
    methods: {
        resetForm() {
            this.page.current = 1;
            this.queryParams = this.$options.data.call(this).queryParams;
            this.search();
        },
        search() {
            this.loading = true;
            let params = { 
                eventfilterRuleQuery: this.queryParams,
                page: this.page
            }
            getList(params).then(
                (resp) => {
                    if (resp.data.returnCode == "0") {
                        this.tableData = resp.data.data.list;
                        const { current, size, total } = resp.data.data.page;
                        this.page.current = current;
                        this.page.size = size;
                        this.page.total = total;
                    }
                    this.loading = false;
                },
                (error) => {
                    this.$message.error(error.message);
                    this.loading = false;
                }
            );
        },
        createObject() {
            this.dialogType = "add";
            this.dialogVisible = true;
        },
        //删除前确认
        confirmDel(ruleId) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deletefilter(ruleId);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        deletefilter(ruleId) {
            let params = {
                ruleId
            }
            listDel(params).then(
                (resp) => {
                    if (resp.data.returnCode == "0") {
                        this.$message.success("删除成功!");
                        this.search();
                    }
                },
                (error) => {
                    this.$message.error(error.message);
                }
            );
        },
        clickRow(command, scope) {
            this.dialogType = command;
            if (command === 'del') {
                this.confirmDel([scope.row.ruleId]);
            } else if (command === 'detail' || command === 'modify') {
                // this.backFill(scope.row);
                this.dialogRow = scope.row
                this.dialogVisible = true
            }
        }
    },
};
</script>
