<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/cctv.css}">
    <link rel="stylesheet" th:href="@{/css/video-7.10.2.css}">
    <script th:src="@{/js/videojs/video-7.10.2.js}"></script>
</head>
<body id="body">
<th:block th:include="/include/admin-header.html"></th:block>
<div class="cctvWrap">
    <div class="container">
        <h2 class="admin-header">CCTV 관리</h2>
        <div th:class="tab">
            <div class="cctv active" onclick="tabActive('smart', 'cctv')">교통 CCTV</div>
            <div class="smart" onclick="tabActive('cctv', 'smart')">스마트교차로 CCTV</div>
        </div>
        <div class="admin-content">
            <div class="left">
                <div class="title">교통 CCTV 목록</div>
                <div class="list"></div>
            </div>
            <div class="right">
                <div class="title">영상화면은 30초 동안 재생됩니다. <label class="toggle-button"><input id="switch" role="switch" type="checkbox"></label></div>
                <div class="content">
                    <video id="video" class="video-js vjs-big-play-centered vjs-control-bar" playsinline style="width: 100%; height: 100%"></video>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>

<script th:inline="javascript">
    const cctv = [[${cctv}]];
    const intersection = [[${intersection}]];
    let cctvStr = "";
    let intersectionStr = "";
    const strMap = new Map();
    const detailMap = new Map();
    const cctvMap = new Map();
    const ixrMap  = new Map();

    const $list  = $('.admin-content .left .list');
    const $title = $('.admin-content .left .title');
    const $switch = $('#switch');

    $switch.on('click', function (event) {
        event.preventDefault();
        if ($('ul.active')[0] === null) return;
        let message = "홈페이지 CCTV 영상을 활성화 하시겠습니까?";
        if (!$(this).is(':checked')) {
            message = "홈페이지 CCTV 영상을 비활성화 하시겠습니까?";
        }
        let useYn =  $(this).is(':checked') ? 1 : 0;
        if (confirm(message)) {
            getDataAsync("/api/traffic/hmpg-stts-update", "POST", {useYn : useYn, }, null, (jsonData)=>{
                if (jsonData) {
                    alert(jsonData.message);
                    if (jsonData.success === 'S') {
                        $(this).prop('checked', $(this).is(':checked'));
                    }
                }
            }, false);
        }
        // if ()
    })

    let video  =  videojs("video", {
        sources: [],
        controls : true,
        responsive: false,
        autoplay: true,
        muted: true,
        preload: "metadata",
    });

    let timer = null;


    function playVideo(playUrl) {
         video = videojs("video", {
            sources: [{
                src: playUrl,
                type: "application/x-mpegURL",
                crossorigin: "anonymous",
            },],
            controls : true,
            responsive: false,
            autoplay: true,
            muted: true,
            preload: "metadata",
        })
        timer = setTimeout(()=>{
            video.pause();
        }, 30 * 1000);
    }

    function closeVideo() {
        if (video) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            video.pause();
            video.dispose();
            $('.right .content').html('<video id="video" class="video-js vjs-big-play-centered" style="width: 100%; height: 100%;"></video>');
        }
    }

    if (intersection && intersection.length > 0) {
        intersection.sort(function(a, b){
            return a.ixr_nm > b.ixr_nm ? 1 : a.ixr_nm < b.ixr_nm ? -1 : 0;
        });

        intersection.forEach((obj)=>{
            intersectionStr += `<ul id="${obj.ixr_id}" onclick="ixrClick('${obj.ixr_id}')">
                                    <div>${obj.ixr_nm}</div>
                                    <ul class="cmra-list">`
            ixrMap.set(obj.ixr_id, obj);
            obj.detail.forEach((camera)=>{
                intersectionStr += `<li id="${camera.cmra_id}" onclick="detailClick('${camera.cmra_id}')">${camera.drct_lctn}</li>`;
                detailMap.set(camera.cmra_id, camera);
            })
            intersectionStr += `</ul></ul>`;


        });
        strMap.set('smart', intersectionStr);

    }

    if (cctv && cctv.length > 0) {
        cctv.forEach((obj)=>{
            cctvStr +=`<ul id="${obj.cctv_mngm_nmbr}" onclick="cctvClick('${obj.cctv_mngm_nmbr}')"><div>${obj.istl_lctn_nm}</div></ul>`;
            cctvMap.set(obj.cctv_mngm_nmbr, obj);
        });
        $list.html(cctvStr);
        strMap.set('cctv', cctvStr);
    }

    function tabActive(hide, show) {
        const $show = $('.' + show);
        $('.' + hide).removeClass('active');
        $show.addClass("active");

        $list.html(strMap.get(show));
        $title.text($show.text() + ' 목록');
    }
    function cctvClick(cctvNo) {
        const obj = cctvMap.get(Number(cctvNo));
        selectToggle(cctvNo)
        if (obj) {
            const useYn = (obj.hmpg_dspl_en === 1);
            $switch.prop("checked", useYn);
            closeVideo();
            playVideo(obj.strm_http_addr);
        }
    }

    function ixrClick(ixrNo) {
        selectToggle(ixrNo)
    }

    function detailClick(cmraId) {
        const obj = detailMap.get(cmraId);
        $('.cmra-list > li.active').removeClass('active');
        $('#' + cmraId).addClass('active');
        if (obj) {
            const useYn = (obj.cmra_use_yn === 1);
            $switch.prop("checked", useYn);
            closeVideo();
            playVideo(obj.hmpg_cmra_url);
            //playVideo(obj.http_cmra_url); //로컬 주소
        }
    }

    function selectToggle(id) {
        $('ul.active').removeClass("active");
        $('ul#'+id).addClass('active');
    }
</script>