<template>
    <manager-dialog
        :title="dialogTitle"
        :visible.sync="visible"
        :before-close="resetForm"
        :close-on-click-modal="false"
        :icon="dialogIcon"
    >
        <el-row>
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="110px"
                label-position="right"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="规则名称：" prop="ruleName">
                            <el-input v-model="form.ruleName" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="相关采集器：" prop="componentId">
                            <el-select v-model="form.componentId" :disabled="disabled">
                                <el-option
                                    v-for="item in statics.componentInfoType"
                                    :label="item.componentName"
                                    :key="item.componentId"
                                    :value="item.componentId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="过滤处理：" prop="filterOperate">
                            <el-select
                                v-model="form.filterOperate"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.filterOperateList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="事件名称：">
                            <el-select
                                v-model="addStaticForm.eventName"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.eventNameList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-input v-model="form.eventName" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发生设备地址：">
                            <el-select
                                v-model="addStaticForm.deviceIp"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.devideIpList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-input v-model="form.deviceIp" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发生设备类型：">
                            <el-select
                                v-model="addStaticForm.devideType"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.eventNameList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-select
                                v-model="form.devideType"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.scannerTypeList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="源地址：">
                            <el-select
                                v-model="addStaticForm.srcIp"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                            >
                                <el-option
                                    v-for="item in statics.devideIpList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-input v-model="form.srcIp" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="源端口：">
                            <el-select
                                v-model="addStaticForm.srcPort"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.portList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-input-number
                                v-model="form.srcPort"
                                :min="1"
                                style="width: 100%"
                                :disabled="disabled"
                            ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="目标地址：">
                            <el-select
                                v-model="addStaticForm.destIp"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.devideIpList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-input v-model="form.destIp" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="目标端口：">
                            <el-select
                                v-model="addStaticForm.destPort"
                                placeholder="请选择"
                                style="width: 100%"
                                :disabled="disabled"
                                clearable
                            >
                                <el-option
                                    v-for="item in statics.portList"
                                    :label="item.dataName"
                                    :key="item.dataId"
                                    :value="item.dataId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="5px">
                            <el-input-number
                                v-model="form.destPort"
                                :min="1"
                                style="width: 100%"
                                :disabled="disabled"
                            ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">关闭</el-button>
            <el-button
                v-if="dialogType != 'detail'"
                type="primary"
                :loading="btnLoading"
                @click="submit"
                >提交</el-button
            >
        </span>
    </manager-dialog>
</template>

<script>
import {
    componentInfoTypeQuery,
    assetTypeSubByAssetType,
    listAdd,
    listUpdate,
} from "./api";

export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        dialogType: {
            type: String,
            default: "",
        },
        dialogRow: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        visible(val) {
            if (!val || this.dialogType == "add") return;
            this.backFill(this.dialogRow)
        },
    },
    computed: {
        dialogTitle() {
            return this.dialogType == "add"
                ? "新增"
                : this.dialogType == "modify"
                ? "修改"
                : this.dialogType == "detail"
                ? "查看"
                : "";
        },
        dialogIcon() {
            return this.dialogType == "add"
                ? "el-icon-document-add"
                : this.dialogType == "modify"
                ? "el-icon-edit"
                : this.dialogType == "detail"
                ? "el-icon-s-order"
                : "";
        },
        disabled() {
            return this.dialogType == "detail";
        },
    },
    data() {
        return {
            btnLoading: false,
            form: {
                ruleName: '',
                eventName: '',
                filterOperate: '',
                deviceIp: '',
                devideType: '',
                srcIp: '',
                srcPort: '',
                destIp: '',
                destPort: '',
                componentId: '7E50610D691E8BC8057ADD259C6EC2E6',
            },
            addStaticForm: {
                eventName: '',
                deviceIp: '',
                devideType: '',
                srcIp: '',
                srcPort: '',
                destIp: '',
                destPort: '',
            },
            rules: {
                ruleName: [
                    {
                        required: true,
                        message: "请输入过滤规则名称",
                        trigger: "blur",
                    },
                ],
                componentId: [
                    {
                        required: true,
                        message: "请选择采集器",
                        trigger: "change",
                    },
                ],
                filterOperate: [
                    {
                        required: true,
                        message: "请选择处理方式",
                        trigger: "change",
                    },
                ],
            },
            statics: {
                componentInfoType: [],
                scannerTypeList: [],
                filterOperateList: [
                    { dataId: "0", dataName: "丢弃" },
                    { dataId: "1", dataName: "写文件" },
                ],
                eventNameList: [
                    { dataId: "1", dataName: "等于" },
                    { dataId: "2", dataName: "不等于" },
                    { dataId: "5", dataName: "包含" },
                    { dataId: "6", dataName: "不包含" },
                ],
                devideIpList: [
                    { dataId: "1", dataName: "等于" },
                    { dataId: "2", dataName: "不等于" },
                ],
                portList: [
                    { dataId: "1", dataName: "等于" },
                    { dataId: "2", dataName: "不等于" },
                    { dataId: "3", dataName: "大于" },
                    { dataId: "4", dataName: "小于" },
                ],
            },
        };
    },
    mounted() {
        this.getStaticData();
    },
    methods: {
        resetForm() {
            this.form = this.$options.data.call(this).form;
            this.addStaticForm = this.$options.data.call(this).addStaticForm;
            this.$refs.form.resetFields();
            this.$emit("update:visible", false);
        },
        getStaticData() {
            this.getComponentInfoType();
            this.getAssetTypeSubByAssetType();
        },
        getComponentInfoType() {
            let queryParams = {
                componentInfoQuery: {
                    componentName: "",
                    componentType: "collector",
                    componentIp: "",
                    osNames: "",
                },
                page: {
                    current: "1",
                    size: "100",
                },
            };
            componentInfoTypeQuery(queryParams).then((resp) => {
                if (resp.data.returnCode == "0") {
                    this.statics.componentInfoType = resp.data.data.list;
                }
            });
        },
        getAssetTypeSubByAssetType() {
            assetTypeSubByAssetType("0").then((resp) => {
                if (resp.data.returnCode == "0") {
                    this.statics.scannerTypeList = resp.data.data.list;
                }
            });
        },
        submit() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.validateCommit()) {
                        this.form.eventName =
                            this.addStaticForm.eventName + this.form.eventName;
                        this.form.deviceIp =
                            this.addStaticForm.deviceIp + this.form.deviceIp;
                        this.form.devideType =
                            this.addStaticForm.devideType +
                            this.form.devideType;
                        this.form.srcIp =
                            this.addStaticForm.srcIp + this.form.srcIp;
                        this.form.srcPort =
                            this.addStaticForm.srcPort + this.form.srcPort;
                        this.form.destIp =
                            this.addStaticForm.destIp + this.form.destIp;
                        this.form.destPort =
                            this.addStaticForm.destPort + this.form.destPort;
                        let form = {
                            eventfilterRule: JSON.parse(
                                JSON.stringify(this.form)
                            ),
                        };
                        this.btnLoading = true;
                        let interfaces =
                            this.dialogType == "add" ? listAdd : listUpdate;
                        interfaces(form).then(
                            (resp) => {
                                if (resp.data.returnCode == "0") {
                                    this.$message.success(
                                        `${this.dialogTitle}成功`
                                    );
                                    this.resetForm();
                                    this.$emit("listChange");
                                }
                                this.btnLoading = false;
                            },
                            (error) => {
                                this.btnLoading = false;
                                this.$message.error(error.message);
                            }
                        );
                    }
                }
            });
        },
        validateCommit() {
            var count = 7;
            var eventname_relation = this.addStaticForm.eventName;
            var eventname = this.form.eventName;
            if (eventname_relation != null && eventname_relation != "") {
                count = count - 1;
                if (eventname == null || eventname == "") {
                    this.$message.error("请填写过滤条件中的事件名称");
                    return false;
                }
            }
            if (eventname != null && eventname != "") {
                if (eventname_relation == null || eventname_relation == "") {
                    this.$message.error("请选择事件名称对应的过滤条件");
                    return false;
                }
            }
            var deviceip_relation = this.addStaticForm.deviceIp;
            var deviceip = this.form.deviceIp;
            if (deviceip_relation != null && deviceip_relation != "") {
                count = count - 1;
                if (deviceip == null || deviceip == "") {
                    this.$message.error("请填写过滤条件中的发生设备地址");
                    return false;
                } else {
                    if (!this.isIPAddress(deviceip)) {
                        this.$message.error("发生设备地址填写不正确");
                        return false;
                    }
                }
            }
            if (deviceip != null && deviceip != "") {
                if (deviceip_relation == null || deviceip_relation == "") {
                    this.$message.error("请选择发生设备地址对应的过滤条件");
                    return false;
                }
            }
            var devidetype_relation = this.addStaticForm.devideType;
            var devidetype = this.form.devideType;
            if (devidetype_relation != null && devidetype_relation != "") {
                count = count - 1;
                if (devidetype == null || devidetype == "") {
                    this.$message.error("请填写过滤条件中的设备类型");
                    return false;
                }
            }
            if (devidetype != null && devidetype != "") {
                if (devidetype_relation == null || devidetype_relation == "") {
                    this.$message.error("请选择设备类型对应的过滤条件");
                    return false;
                }
            }
            var srcip_relation = this.addStaticForm.srcIp;
            var srcip = this.form.srcIp;
            if (srcip_relation != null && srcip_relation != "") {
                count = count - 1;
                var srcip = this.form.srcIp;
                if (srcip == null || srcip == "") {
                    this.$message.error("请填写过滤条件中的源地址");
                    return false;
                } else {
                    if (!this.isIPAddress(srcip)) {
                        this.$message.error("源地址填写不正确");
                        return false;
                    }
                }
            }
            if (srcip != null && srcip != "") {
                if (srcip_relation == null || srcip_relation == "") {
                    this.$message.error("请选择源地址对应的过滤条件");
                    return false;
                }
            }
            var srcport_relation = this.addStaticForm.srcPort;
            var srcport = this.form.srcPort;
            if (srcport_relation != null && srcport_relation != "") {
                count = count - 1;
                if (srcport == null || srcport == "") {
                    this.$message.error("请填写过滤条件中的源端口");
                    return false;
                }
            }
            if (srcport != null && srcport != "" && srcport != 1) {
                if (srcport_relation == null || srcport_relation == "") {
                    this.$message.error("请选择源端口对应的过滤条件");
                    return false;
                }
            }
            var destip_relation = this.addStaticForm.destIp;
            var destip = this.form.destIp;
            if (destip_relation != null && destip_relation != "") {
                count = count - 1;
                if (destip == null || destip == "") {
                    this.$message.error("请填写过滤条件中的目的地址");
                    return false;
                } else {
                    if (!this.isIPAddress(destip)) {
                        this.$message.error("目的地址填写不正确");
                        return false;
                    }
                }
            }
            if (destip != null && destip != "") {
                if (destip_relation == null || destip_relation == "") {
                    this.$message.error("请选择目的地址对应的过滤条件");
                    return false;
                }
            }
            var destport_relation = this.addStaticForm.destPort;
            var destport = this.form.destPort;
            if (destport_relation != null && destport_relation != "") {
                count = count - 1;
                if (destport == null || destport == "") {
                    this.$message.error("请填写过滤条件中的目的端口");
                    return false;
                }
            }
            if (destport != null && destport != "") {
                if (
                    destport_relation == null ||
                    (destport_relation == "" && destport != 1)
                ) {
                    this.$message.error("请选择目的端口对应的过滤条件");
                    return false;
                }
            }
            if (count == 7) {
                this.$message.error("至少选择一个过滤条件");
                return false;
            }
            return true;
        },
        isIPAddress(obj) {
            let regIpv4 =
                /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
            let regIpv6 =
                /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))([%/]([1][0-1][0-9]|[1][2][0-8]|[1-9][0-9]|[0-9]))?\s*$/;
            if (!regIpv6.test(obj) && !regIpv4.test(obj)) {
                return false;
            } else {
                return true;
            }
        },

        //回填数据
        backFill(row) {
            var oRow = JSON.parse(JSON.stringify(row));
            this.form = oRow;
            var eventName = this.form.eventName;
            var deviceIp = this.form.deviceIp;
            var devideType = this.form.devideType;
            var srcIp = this.form.srcIp;
            var srcPort = this.form.srcPort;
            var destIp = this.form.destIp;
            var destPort = this.form.destPort;
            if (eventName != null && eventName.length > 1) {
                this.addStaticForm.eventName = eventName.substring(0, 1);
                this.form.eventName = eventName.substring(1, eventName.length);
            }
            if (deviceIp != null && deviceIp.length > 1) {
                this.addStaticForm.deviceIp = deviceIp.substring(0, 1);
                this.form.deviceIp = deviceIp.substring(1, deviceIp.length);
            }
            if (devideType != null && devideType.length > 1) {
                this.addStaticForm.devideType = devideType.substring(0, 1);
                this.form.devideType = devideType.substring(
                    1,
                    devideType.length
                );
            }
            if (srcIp != null && srcIp.length > 1) {
                this.addStaticForm.srcIp = srcIp.substring(0, 1);
                this.form.srcIp = srcIp.substring(1, srcIp.length);
            }
            if (srcPort != null && srcPort.length > 1) {
                this.addStaticForm.srcPort = srcPort.substring(0, 1);
                this.form.srcPort = srcPort.substring(1, srcPort.length);
            }
            if (destIp != null && destIp.length > 1) {
                this.addStaticForm.destIp = destIp.substring(0, 1);
                this.form.destIp = destIp.substring(1, destIp.length);
            }
            if (destPort != null && destPort.length > 1) {
                this.addStaticForm.destPort = destPort.substring(0, 1);
                this.form.destPort = destPort.substring(1, destPort.length);
            }
            if (this.form.devideType != null) {
                this.form.devideType = parseInt(this.form.devideType);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
    ::v-deep .el-divider {
        margin: 0 0 18px 0;
    }
</style>