<template>
    <div v-loading="loading">
        <manager-ui
            ref="manager"
            :label-width="110"
            :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 #uniteOperate="{ scope }">
                {{ scope.row.uniteOperate | toCase(statics.uniteOperateList, "dataId", "dataName" ) }}
            </template>
            <template #eventLevel="{ scope }">
                {{ scope.row.eventLevel | toCase(statics.eventLevelList, "dataId", "dataName" ) }}
            </template>
            <template #eventSet="{ scope }">
                {{ scope.row.eventSet | toCase(statics.eventSetList, "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>
    </div>
</template>
<script>
import { getList, listDel } from "./api";

export default {
    data() {
        return {
            loading: false,
            tableData: [],
            multipleSelection: [],
            statics: {
                uniteOperateList: [
                    { dataId: "0", dataName: "丢弃" },
                    { dataId: "1", dataName: "写文件" },
                ],
                eventLevelList: [
                    { dataId: "1", dataName: "轻微" },
                    { dataId: "2", dataName: "低级" },
                    { dataId: "3", dataName: "中级" },
                    { dataId: "4", dataName: "高级" },
                    { dataId: "5", dataName: "严重" },
                ],
                eventSetList: [
                    { dataId: "0", dataName: "第一条" },
                    { dataId: "1", dataName: "最后一条" },
                ]
            },
            queryItems: [
                {
                    type: "input",
                    span: 12,
                    key: "ruleName",
                    label: "规则名称",
                },
                {
                    type: "input",
                    span: 12,
                    key: "uniteTime",
                    label: "归并时间(秒)",
                },
                {
                    type: "select",
                    span: 12,
                    key: "uniteOperate",
                    label: "归并处理",
                    option: "uniteOperateList",
                    optionLabel: "dataName",
                    optionValue: "dataId",
                },
                {
                    type: "input",
                    span: 12,
                    key: "eventName",
                    label: "归并后事件名称",
                },
                {
                    type: "select",
                    span: 12,
                    key: "eventLevel",
                    label: "归并后事件等级",
                    option: "eventLevelList",
                    optionLabel: "dataName",
                    optionValue: "dataId",
                },
                {
                    type: "select",
                    span: 12,
                    key: "eventSet",
                    label: "归并后事件设置",
                    option: "eventSetList",
                    optionLabel: "dataName",
                    optionValue: "dataId",
                },
            ],
            columnItems: [
                {
                    _key: "selection",
                    type: "selection",
                    width: "50",
                },
                {
                    _key: "ruleName",
                    prop: "ruleName",
                    label: "规则名称",
                },
                {
                    _key: "uniteTime",
                    prop: "uniteTime",
                    label: "归并时间(秒)",
                },
                {
                    _key: "uniteOperate",
                    prop: "uniteOperate",
                    label: "归并处理",
                    render: true,
                },
                {
                    _key: "eventName",
                    prop: "eventName",
                    label: "归并后事件名称",
                },
                {
                    _key: "eventLevel",
                    prop: "eventLevel",
                    label: "归并后事件等级",
                    render: true,
                },
                {
                    _key: "eventSet",
                    prop: "eventSet",
                    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",
                },
                {
                    text: "删除",
                    command: "del",
                    icon: "el-icon-delete",
                    iconColor: "red",
                },
            ],
            queryParams: {
                ruleName: null,
                uniteTime: null,
                uniteOperate: null,
                eventName: null,
                eventLevel: null,
                eventSet: null,
                validTag: '1'
            },
            page: {
                current: 1,
                size: 10,
                total: 0,
            },
            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 = {
                eventuniteRuleQuery: 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.$router.push({ name: 'mergeRulesAdd', params: { type: 'add' }})
        },
        //删除前确认
        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.$router.push({ name: 'mergeRulesAdd', params: { type: command, row: encodeURIComponent(JSON.stringify(scope.row)) }})
            }
        }
    },
};
</script>
