<template>
    <add-page-layout>
        <div slot="Header-Content">
            <span>事件分类规则</span>
            <i class="el-icon-close close" @click="$router.go(-1)"></i>
        </div>
        <div slot="Form-Content">
            <div class="classifyRulesList" style="margin: 15px">
                <manager-ui
                    :show-pagination="true"
                    :show-download-btn="false"
                    :query-model="queryParams.eventclassRuleInfoQuery"
                    :query-items="queryItems"
                    :static-data="statics"
                    :table-data="tableData"
                    :column-items="columnItems"
                    :pagination="page"
                    @search="search"
                    @searchClick="page.current=1; search()"
                    @resetForm="page.current=1; search()"
                    @create="createObject"
                    @selection-change="handleSelectionChange"
                >
                    <template slot="tableTools">
                        <el-button type="text" icon="el-icon-delete-solid" @click="choice">确认选择</el-button>
                        <el-button type="text" icon="el-icon-delete-solid" @click="batchdel">删除</el-button>
                    </template>

                    <template #readOnlyTag="{scope}">
                        {{ scope.row.readOnlyTag | toCase(statics.flagList, 'value', 'label') }}
                    </template>
                    
                    <template #ruleLevel="{scope}">
                        {{ scope.row.ruleLevel | toCase(statics.ruleLevelList, 'value', 'label') }}
                    </template>

                    <template #operate="{scope}">
                        <el-context-menu :menus="menus" :scope="scope" :default="defaultV" @oper="clickRow" />
                    </template>
                </manager-ui>
            </div>
        </div>
    </add-page-layout>
</template>
<script>

import { 
    getEventclassRuleInfo,
    delEventclassRuleInfo,
    choiceEventclassRuleInfo
} from './api/eventStrategy'
export default {
  components: {

  },
  data() {
    return {
        tableData: [],
        multipleSelection: [],
        statics: {
            ruleLevelList: [
                {
                    value: '1',
                    label: '轻微'
                }, 
                {
                    value: '2',
                    label: '低级'
                }, 
                {
                    value: '3',
                    label: '中级'
                }, 
                {
                    value: '4',
                    label: '高级'
                }, 
                {
                    value: '5',
                    label: '严重'
                }
            ],
            flagList: [
                {
                    value: '1',
                    label: '是'
                },
                {
                    value: '0',
                    label: '否'
                }
            ]
        },
        queryItems: [
            {
                type: 'input',
                span: 12,
                key: 'ruleName',
                label: '规则名称'
            },
            {
                type: 'select',
                span: 12,
                key: 'ruleLevel',
                label: '分类等级',
                option: 'ruleLevelList',
                optionLabel: 'label',
                optionValue: 'value'
            },
            {
                type: 'input',
                span: 12,
                key: 'cveName',
                label: 'CVE编号'
            },
            {
                type: 'select',
                span: 12,
                key: 'readOnlyTag',
                label: '是否只读',
                option: 'flagList',
                optionLabel: 'label',
                optionValue: 'value'
            }
        ],
        columnItems: [
            {
                _key: 'selection',
                type: 'selection',
                width: '50'
            },
            {
                _key: 'ruleName',
                prop: 'ruleName',
                label: '规则名称'
            },
            {
                _key: 'ruleLevel',
                prop: 'ruleLevel',
                label: '分类等级',
                render: true
            },
            {
                _key: 'cveName',
                prop: 'cveName',
                label: 'CVE编号'
            },
            {
                _key: 'readOnlyTag',
                prop: 'readOnlyTag',
                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: {
            eventclassRuleInfoQuery: {
                ruleName: "",
                ruleLevel: "",
                cveName: "",
                readOnlyTag: null,
                validTag: "1",
                selected: "1"
            },
            page:{
                current: 1,
                size: 10
            }
        },
        page: {
            current: 1,
            size: 10,
            total: 0
        },
        choiceNum: {
          groupId: null,
          ruleId: []
        },
        //删除数据
        deleteNum: {
            ruleId: []
        },
    }
  },
  created() {
    this.choiceNum.groupId = this.$route.params.id
    this.search()
  },
  methods: {
    resetForm() {
        console.log(this.$refs.form)
        this.$refs.form.resetFields()
        this.search()
    },
    handleSelectionChange(val) {
        this.multipleSelection = val
    },
    search() { // 获取查询数据
        let { current, size } = JSON.parse(JSON.stringify(this.page))
        this.queryParams.page = { current, size }
        getEventclassRuleInfo(this.queryParams).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
            }
        }, (error) => {
           this.$message.error(error.message);
        })
    },
    createObject() {
        this.$router.push({ path: `/asp/classifyRulesListAdd/add/${null}` })
    },
    clickRow: function(command, scope, index, rows) {
      index = scope.row.ruleId
      if (command === 'del') {
        const list = []
        list.push(index)
        this.deleteNum.ruleId = list;
        this.confirmDel()
      } else if (command === 'modify' || command === 'detail') {
        this.$router.push({ path: `/asp/classifyRulesListAdd/${command}/${index}` })
      }
    },
    // 拼装批量选择数据
    choice() {
        let list = [];
        for (let temp in this.multipleSelection) {
            list.push(this.multipleSelection[temp].ruleId);
        }
        this.choiceNum.ruleId = list;
        this.confirmChoice()
    },
    // 选择前确认
    confirmChoice() {
        this.$confirm('此操作将选择规则到分组中, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.choiceDate();
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消选择'
            })
        })
    },
    choiceDate() {
        choiceEventclassRuleInfo(this.choiceNum).then((resp) => {
            if (resp.data.returnCode == "0") {
                this.search();
                this.$message.success('选择成功!')
            }
        }, (error) => {
            this.$message.error(error.message)
        })
    },
    //拼装批量删除数据
    batchdel() {
        let list = []
        for (let temp in this.multipleSelection) {
            list.push(this.multipleSelection[temp].ruleId)
        }
        this.deleteNum.ruleId = list
        this.confirmDel()
    },
    //删除前确认
    confirmDel() {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.deletefilter();
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            })
        })
    },
    deletefilter: function () {
        delEventclassRuleInfo(this.deleteNum).then((resp) => {
            if (resp.data.returnCode == "0") {
                this.search();
                this.$message.success('删除成功!')
            }
        }, (error) => {
            this.$message.error(error.message)
        })
    },
  }
}
</script>
