<template>
    <main class="auth-earlywarning-plan-edit">
        <el-form ref="ruleForm" :model="form" label-width="140px" label-suffix="：">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="方案名称">
                        {{ form.name }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="方案状态">
                        <dg-select
                            v-model="form.state"
                            placeholder="请选择方案状态"
                            code="DM_ACTIVE_STATUS"
                            style="width: 100%"
                            clearable
                        >
                        </dg-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="预警规则">
                        <!--TODO 内嵌form  -->
                        <!-- <el-input type="textarea" :rows="2" placeholder="请输入预警规则" v-model="form.textarea"></el-input> -->
                        <template v-if="form.type == 'YHYCIPJQYJ'">
                            <div style="display: flex">
                                超出正常访问IP网段：<el-input
                                    v-model="form.ruleContent.limitIp"
                                    placeholder="10.11.*.*"
                                    style="width:400px"
                                ></el-input
                                >为异常ip
                            </div>
                        </template>
                        <template v-else>
                            <el-form-item v-for="(domain, index) in form.ruleContent" :key="index">
                                <div class="time-picker-layer">
                                    用户在
                                    <dg-time-picker
                                        v-model="domain.time"
                                        type="timerange2"
                                        :picker-options="pickerOptions"
                                        begin-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                    >
                                    </dg-time-picker>
                                    进行鉴权
                                    <div class="time-picker-layer_button">
                                        <dg-button circle @click.prevent="addDomain" size="mini">
                                            <i class="el-icon-plus"></i>
                                        </dg-button>
                                        <dg-button circle @click.prevent="removeDomain(domain)" size="mini">
                                            <i class="el-icon-minus"></i>
                                        </dg-button>
                                    </div>
                                </div>
                            </el-form-item>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="规则说明">
                        {{ form.ruleExplain }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="预警信息格式">
                        {{ form.contentFormat }}
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="item.span" v-for="(item, index) in earlyWarningPlanTableInfo" :key="index"> -->
                <!-- <el-form-item :label="item.label">{{ detailInfo[item.value] }} </el-form-item> -->
                <!-- </el-col> -->
            </el-row>
            <div v-footer>
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </el-form>
    </main>
</template>

<script>
import { earlyWarningPlanTableInfo } from "../DataConfig"
import { riskProgramme, warningProgrammeInfo } from "@/api/log-manage"

export default {
    name: "auth-earlywarning-plan-edit", // 组件名称
    props: {
        // 接收父组件的数据
        info: Object
    },
    data() {
        // 组件内部参数
        return {
            earlyWarningPlanTableInfo,
            pickerOptions: {
                start: "00:00",
                step: "01:00",
                end: "23:00"
            },
            form: {
                ruleContent: [
                    {
                        time: ""
                    }
                ]
            }
        }
    },
    components: {}, // 注册局部组件
    computed: {},
    methods: {
        /**
         * @description: 关闭
         */
        close() {
            this.$emit("close")
        },
        /**
         * @description: 提交
         */
        onSubmit() {
            let obj = JSON.parse(JSON.stringify(this.form))
            if (this.form.type !== "YHYCIPJQYJ") {
                obj.ruleContent.forEach(item => {
                    item.start = parseInt(item.time[0])
                    item.end = parseInt(item.time[1])
                    delete item.time
                })
                obj.ruleContent = JSON.stringify(obj.ruleContent)
            }
            if (this.form.type === "YHYCIPJQYJ") {
                obj.ruleContent = JSON.stringify(obj.ruleContent)
            }
            riskProgramme(obj).then(res => {
                this.$message.success("操作成功")
                this.$emit("success")
            })
        },
        /**
         * @description:添加规则
         * @param {*}
         * @return {*}
         */
        addDomain() {
            this.form.ruleContent.push({
                time: ""
            })
        },
        /**
         * @description:移除规则
         * @param {*} item
         * @return {*}
         */
        removeDomain(item) {
            if (this.form.ruleContent.length <= 1) return
            var index = this.form.ruleContent.indexOf(item)
            if (index !== -1) {
                this.form.ruleContent.splice(index, 1)
            }
        },
        countTime(val) {
            return val >= 10 ? val + ":00" : "0" + val + ":00"
        },
        /**
         * @description: 获取详情
         */
        getDetail() {
            return new Promise(resolve => {
                warningProgrammeInfo(this.info.id).then(res => {
                    if (res.type === "YHYCIPJQYJ") {
                        res.ruleContent = res.ruleContent ? JSON.parse(res.ruleContent) || {} : {}
                    }
                    if (res.type !== "YHYCIPJQYJ") {
                        res.ruleContent = res.ruleContent ? JSON.parse(res.ruleContent) : []
                        res.ruleContent.forEach(item => {
                            item.time = [this.countTime(item.start), this.countTime(item.end)]
                            delete item.start
                            delete item.end
                        })
                    }

                    this.form = res
                    console.log(this.form)
                    resolve(res)
                })
            })
        }
    }, // 内部方法
    async created() {
        await this.getDetail()
    }
}
</script>
<style lang="scss">
.auth-earlywarning-plan-edit-layer {
    .time-picker-layer {
        display: flex;
        // align-items: center;
        margin-bottom: 0.75rem;
        &_button {
            margin-left: 0.9375rem;
        }
    }
    .dg-range-editor {
        margin: 0 0.9375rem;
        display: flex;
        // align-items: center;
    }
}
</style>
