<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <section class="content">
                    <div class="row">
                        <form class="form-horizontal col-sm-6" id="infoForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">当前监控规则:</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" id="roomRule"></label>
                                <div class="col-sm-10 hidden" id="erbanNoDiv">
                                    <textarea class="form-control erbanNos" name="erbanNos" style="height:150px;"
                                        readonly></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-10">
                                    <button type="button" class="btn btn-primary" id="btn">修改</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <div class="modal fade" id="ruleModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">修改监控规则</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addForm">
                        <input type="hidden" name="recordId" id="recordId" />

                        <div class="form-group">
                            <div class="col-sm-9">
                                <label class="radio-inline"><input type="radio" name="labelType" id="allRoom"
                                        value="0">所有房间</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9">
                                <label class="radio-inline"><input type="radio" name="labelType" id="givenRoom"
                                        value="1">指定房间</label>
                            </div>
                            <div class="col-sm-10">
                                <textarea class="form-control erbanNos" name="erbanNos" id="erbanNos" style="height:150px;"
                                    placeholder="请输入房间号，多个房间用,隔开"></textarea>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-prim ary" id="add">确定</button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { showLoading, hideLoading } from '@/utils/maintainer';

export default {
    name: "MonitorRuleView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                getRuleDetail();
                function getRuleDetail() {
                    $.ajax({
                        type: "get",
                        url: "/admin/audit/audio/get/rule",
                        dataType: "json",
                        success: function (json) {
                            if (json.code == 200) {
                                if (json.data) {
                                    if (json.data.roomMonitorType == 0) {
                                        $("#allRoom").prop("checked", true);
                                        $('#erbanNoDiv').addClass("hidden");
                                        $("#roomRule").text(">所有房间");
                                    } else if (json.data.roomMonitorType == 1) {
                                        $("#givenRoom").prop("checked", true);
                                        $(".erbanNos").val(json.data.erbanNos);
                                        $("#roomRule").text(">指定房间");
                                        $('#erbanNoDiv').removeClass("hidden");
                                    }

                                }

                            }
                        }
                    });
                }
                $("#btn").click(function () {
                    $("#ruleModal").modal('show');
                });

                $("#add").click(function () {
                    var type = $('input[name="labelType"]:checked').val();
                    if (!type) {
                        $("#tipMsg").text("请选择监控规则");
                        $("#tipModal").modal('show');
                        return;
                    }
                    showLoading();
                    $.ajax({
                        type: "post",
                        url: "/admin/audit/audio/rule/save",
                        data: {
                            type: type,
                            erbanNos: $("#erbanNos").val()
                        },
                        dataType: "json",
                        success: function (json) {
                            if (json.code == 200) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                $("#ruleModal").modal('hide');
                                getRuleDetail();
                                hideLoading();
                            } else {
                                $("#tipMsg").text("保存失败，错误信息：" + json.msg);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });
            });
        }
    },

};
</script>

<style scoped></style>