<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" type="text/css" href="assets/css/jquery.eeyellow.Timeline.css" />
    <style>
        .anchorBL{display:none} /** 去除百度地图Logo */
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="VivaTimeline">

                <dl id="textScriptDiv"></dl>
                <script id="textScript" type="text/html">
                    <dt>文字素材</dt>
                    {{#    for(var i = 0, item = d[i]; item = d[i++];) { }}
                        <dd class="pos-right clearfix">
                            {{# if(item.materialStatus == 1) { }}
                                <div class="circ closeData" data-path="text" data-dataid="{{item.materialTextId}}"></div>
                                <div class="time closeData" data-path="text" data-dataid="{{item.materialTextId}}">封禁素材</div>
                            {{# }else { }}
                                <div class="circ" style="background-color: red;"></div>
                                <div class="time" style="color: red;" >已封禁</div>
                            {{#    } }}
                            <div class="events">
                                <div class="events-header">{{item.materialTextTitle}}</div>
                                <div class="events-body">
                                    <div class="row">
                                        <div class="col-md-12 pull-center"  >
                                            {{item.materialTextContent}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dd>
                    {{#    } }}
                </script>

                <dl id="photoScriptDiv"></dl>
                <script id="photoScript" type="text/html">
                    <dt>图片素材</dt>
                    {{#    for(var i = 0, item = d[i]; item = d[i++];) { }}
                    <dd class="pos-left clearfix">
                        {{# if(item.materialStatus == 1) { }}
                        <div class="circ closeData" data-path="photo" data-dataid="{{item.materialPhotoId}}"></div>
                        <div class="time closeData" data-path="photo" data-dataid="{{item.materialPhotoId}}">封禁素材</div>
                        {{# }else { }}
                        <div class="circ" style="background-color: red;"></div>
                        <div class="time" style="color: red;" >已封禁</div>
                        {{#    } }}
                        <div class="events">
                            <div class="events-header">{{item.gmtCreate}}</div>
                            <div class="events-body">
                                <div class="row">
                                    <div class="col-md-12 pull-center"  >
                                        <img class="events-object img-responsive img-rounded"  style="max-height:250px;" src="route/file/download/false/{{item.materialPhotoFileId}}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    {{#    } }}
                </script>

                <dl id="audioScriptDiv"></dl>
                <script id="audioScript" type="text/html">
                    <dt>音频素材</dt>
                    {{#    for(var i = 0, item = d[i]; item = d[i++];) { }}
                    <dd class="pos-right clearfix">
                        {{# if(item.materialStatus == 1) { }}
                        <div class="circ closeData" data-path="audio" data-dataid="{{item.materialAudioId}}" ></div>
                        <div class="time closeData" data-path="audio" data-dataid="{{item.materialAudioId}}" >封禁素材</div>
                        {{# }else { }}
                        <div class="circ" style="background-color: red;"></div>
                        <div class="time" style="color: red;" >已封禁</div>
                        {{#    } }}
                        <div class="events">
                            <div class="events-header">{{item.gmtCreate}}</div>
                            <div class="events-body">
                                <div class="row">
                                    <div class="col-md-12 pull-center"  >
                                        <audio class="events-object img-responsive img-rounded"  controls="controls" src="route/file/download/false/{{item.materialAudioFileId}}"  ></audio>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    {{#    } }}
                </script>

                <dl id="videoScriptDiv"></dl>
                <script id="videoScript" type="text/html">
                    <dt>视频素材</dt>
                    {{#    for(var i = 0, item = d[i]; item = d[i++];) { }}
                    <dd class="pos-left clearfix">
                        {{# if(item.materialStatus == 1) { }}
                        <div class="circ closeData" data-path="video" data-dataid="{{item.materialVideoId}}" ></div>
                        <div class="time closeData" data-path="video" data-dataid="{{item.materialVideoId}}" >封禁素材</div>
                        {{# }else { }}
                        <div class="circ" style="background-color: red;"></div>
                        <div class="time" style="color: red;" >已封禁</div>
                        {{#    } }}
                        <div class="events">
                            <div class="events-header">{{item.gmtCreate}}</div>
                            <div class="events-body">
                                <div class="row">
                                    <div class="col-md-12 pull-center"  >
                                        <video class="events-object img-responsive img-rounded"  style="max-height:250px;" controls="controls" src="route/file/download/false/{{item.materialVideoFileId}}" ></video>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    {{#    } }}
                </script>

                <dl id="mapScriptDiv"></dl>
                <script id="mapScript" type="text/html">
                    <dt>位置素材</dt>
                    {{#    for(var i = 0, item = d[i]; item = d[i++];) { }}
                    <dd class="pos-right clearfix">
                        {{# if(item.materialStatus == 1) { }}
                        <div class="circ closeData" data-path="map" data-dataid="{{item.materialMapId}}" ></div>
                        <div class="time closeData" data-path="map" data-dataid="{{item.materialMapId}}" >封禁素材</div>
                        {{# }else { }}
                        <div class="circ" style="background-color: red;"></div>
                        <div class="time" style="color: red;" >已封禁</div>
                        {{#    } }}
                        <div class="events">
                            <div class="events-header">{{item.materialMapAddress}}</div>
                            <div class="events-body">
                                <div class="row">
                                    <div style="height:250px;" class="col-md-12 pull-center" id="{{item.materialMapId}}" >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    {{#    } }}
                </script>

                <dl id="linkScriptDiv"></dl>
                <script id="linkScript" type="text/html">
                    <dt>链接素材</dt>
                    {{#    for(var i = 0, item = d[i]; item = d[i++];) { }}
                    <dd class="pos-left clearfix">
                        {{# if(item.materialStatus == 1) { }}
                        <div class="circ closeData" data-path="link" data-dataid="{{item.materialLinkId}}"></div>
                        <div class="time closeData" data-path="link" data-dataid="{{item.materialLinkId}}">封禁素材</div>
                        {{# }else { }}
                        <div class="circ" style="background-color: red;"></div>
                        <div class="time" style="color: red;" >已封禁</div>
                        {{#    } }}
                        <div class="events">
                            <div class="events-header">{{item.materialLinkPath}}</div>
                            <div class="events-body">
                                <div class="row">
                                    <div class="col-md-12 pull-center"  >
                                        <a href="http://www.baidu.com" target="_blank" style="margin-left:40%;cursor: pointer;">点击跳转此链接</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    {{#    } }}
                </script>
                <dl>
                </dl>

                <dl>
                </dl>

                <dl>
                </dl>

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=oWU9RD4ihDHAafexgI6XOrTK8lDatRju"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="assets/js/jquery.eeyellow.Timeline.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'laydate', 'common', 'laytpl'], function() {
        var $ = layui.$;
        var $win = $(window);
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var common = layui.common;
        var resizeTimeout = null;
        var laytpl = layui.laytpl;
        var materialId = top.restAjax.params(window.location.href).materialId;

        $(document).on("click",'.closeData', function (data) {
            checkData($(this).data("path"), $(this).data("dataid"));
        })

        function checkData(name, id) {
            top.dialog.msg("确认封禁该素材?", {
                time: 0,
                btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
                shade: 0.3,
                yes: function (index) {
                    top.dialog.close(index);
                    var layIndex;
                    top.restAjax.put(top.restAjax.path('api/material' + name + '/check/{id}', [id]), {}, null, function (code, data) {
                        initTable();
                    }, function (code, data) {
                        top.dialog.msg(data.msg);
                    }, function () {
                        layIndex = top.dialog.msg("操作中...", {icon: 16, time: 0, shade: 0.3});
                    }, function () {
                        top.dialog.close(layIndex);
                    });
                }
            });
        }

        //初始化百度地图
        function initMap(id, longitude, latitude) {
            var map = new BMap.Map(id, {enableMapClick: false,});
            var point = new BMap.Point(longitude, latitude);
            map.centerAndZoom(point, 13);
            map.disableDoubleClickZoom();
            // map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.addControl(new BMap.MapTypeControl());
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableContinuousZoom();//开启缩放平滑
            // 点击获取地址
            var geocoder= new BMap.Geocoder();
            mapMarkPoint(map, point);
        }

        //地图标点
        function mapMarkPoint(map, point) {
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
        }

        // 初始化表格
        function initTable() {
            top.restAjax.get(top.restAjax.path('api/materialdata/list/{id}', [materialId]), {}, null, function(code, data) {

                if(data.text.length > 0) {
                    laytpl(document.getElementById('textScript').innerHTML).render(data.text, function(html) {
                        document.getElementById('textScriptDiv').innerHTML = html;
                    });
                }

                if(data.photo.length > 0) {
                    laytpl(document.getElementById('photoScript').innerHTML).render(data.photo, function(html) {
                        document.getElementById('photoScriptDiv').innerHTML = html;
                    });
                }

                if(data.audio.length > 0) {
                    laytpl(document.getElementById('audioScript').innerHTML).render(data.audio, function(html) {
                        document.getElementById('audioScriptDiv').innerHTML = html;
                    });
                }

                if(data.video.length > 0) {
                    laytpl(document.getElementById('videoScript').innerHTML).render(data.video, function(html) {
                        document.getElementById('videoScriptDiv').innerHTML = html;
                    });
                }

                if(data.map.length > 0) {
                    laytpl(document.getElementById('mapScript').innerHTML).render(data.map, function(html) {
                        document.getElementById('mapScriptDiv').innerHTML = html;
                    });
                    for(var i = 0; i < data.map.length; i++) {
                        var tempMap = data.map[i];
                        initMap(tempMap.materialMapId, tempMap.materialMapLong,  tempMap.materialMapLat);
                    }
                }

                if(data.link.length > 0) {
                    laytpl(document.getElementById('linkScript').innerHTML).render(data.link, function(html) {
                        document.getElementById('linkScriptDiv').innerHTML = html;
                    });
                }

                setTimeout(function() {
                    $('.VivaTimeline').vivaTimeline({
                        carousel: true,
                        carouselTime: 3000
                    });
                }, 100);
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        initTable();


    });
</script>
</body>
</html>