<template>
    <el-dialog :visible.sync="visible" title="添加白名单" width="500px" class="addWhiteList" :before-close="() => $emit('update:visible', false)">
        <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
            <el-form-item label="逻辑探针组" prop="logicProbeGroup">
                <el-select style="width: 100%" v-model="ruleForm.logicProbeGroup">
                    <el-option label="全部" value="0"></el-option>
                    <el-option v-for="item in probelist" :key="item.dataId" :label="item.componentIp" :value="item.componentId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="源IP" prop="srcIp">
                <el-input v-model="ruleForm.srcIp" placeholder="例：10.0.0.0"></el-input>
            </el-form-item>
            <el-form-item label="目标IP" prop="dstIp">
                <el-input v-model="ruleForm.dstIp" placeholder="例：10.0.0.0"></el-input>
            </el-form-item>
            <el-form-item label="域名/URL" prop="domainUrl">
                <el-input type="textarea" :rows="4" v-model="ruleForm.domainUrl" placeholder="请输入域名/URL，一行一个，单个长度不得超过65535个字节"></el-input>
            </el-form-item>
            <span>匹配规则：</span>
            <el-form-item label="威胁类别" prop="threatType">
                <treeselect
                    :options="categoryInitDatas"
                    v-model="ruleForm.threatType"
                    :normalizer="normalizer"
                    :multiple="true"
                    placeholder="请选择"
                />
            </el-form-item>
            <el-form-item label="规则ID" prop="ruleId">
                <el-input v-model="ruleForm.ruleId" placeholder="请输入规则ID"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="4" v-model="ruleForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" style="z-index: 1002">
            <el-button size="mini" plain @click="$emit('update:visible', false)">取消</el-button>
            <el-button type="primary" size="mini" :loading="confirmLoading" @click="confirm">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { parseTime } from '../utils'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getProbeList, addWhiteList } from '../api/fence'
export default {
    props: {
        visible: {
            type: Boolean,
            require: true
        },
        row: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        visible(val) {
            if (!val) return
            this.getProbelist()
            this.ruleForm.srcIp = this.row.src_ip
            this.ruleForm.dstIp = this.row.dst_ip
            this.ruleForm.threatType = [this.row.classtype]
            this.ruleForm.ruleId = this.row.rid
        }
    },
    components: {
        Treeselect
    },
    computed: {
        categoryInitDatas() {
            return this.$store.state.threat.threatTree
        },
    },
    data() {
        let validThreatType = (rule, value, callback) => {
            if (value.length == 0) {
                callback(new Error('请选择威胁类别'))
            } else {
                callback()
            }
        }
        return {
            probelist: [],
            ruleForm: {
                logicProbeGroup: '0',
                srcIp: '',
                dstIp: '',
                domainUrl: '',
                threatType: [],
                ruleId: '',
                remark: ''
            },
            rules: {
                threatType: [
                    { validator: validThreatType, trigger: 'blur' }
                ]
            },
            confirmLoading: false
        }
    },
    methods: {
        getProbelist() {
            getProbeList().then(res => {
                    if (res.data.returnCode == 0) {
                        let { data } = res.data
                        this.probelist = data
                    }
                }).catch(() => {})
        },
        normalizer(node) {
            if(node.children == null || node.children=='null'){
                delete node.children;
            }
            if (node.children) {
                node.children.forEach(el => {
                    if (el.threatKey == node.threatKey) el.threatKey = el.threatKey + '-child'
                })
            }
            return {
                id: node.threatKey,
                label: node.threatValue,
                children: node.children,
            }
        },
        confirm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = {
                        logicProbeGroup: +this.ruleForm.logicProbeGroup,
                        srcIp: this.ruleForm.srcIp,
                        dstIp: this.ruleForm.dstIp,
                        domainUrl: this.ruleForm.domainUrl,
                        threatType: this.ruleForm.threatType.join(','),
                        addTime: parseTime(Date.now()),
                        remark:  this.ruleForm.remark,
                        rule_id: this.ruleForm.ruleId
                    }
                    this.confirmLoading = true
                    addWhiteList(params).then(res => {
                        if (res.data.returnCode == 0) {
                            this.$message.success('加入白名单成功')
                        }
                        this.$emit('update:visible', false)
                        this.confirmLoading = false
                    }).catch(() => {
                        this.confirmLoading = false
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
// .selectVisitTree >>> .dropdownCls {
//     min-width: 338px;
// }
</style>