<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>{{.archive.Title}} - 视频 - {{.global.site_name}}</title>
    <script type="text/javascript">
        const DISVDHOVER = true;
    </script>
    {{ template "_common.htm" .}}
    <link rel="stylesheet" href="{{.global.host_img}}/assets/css/blueimp-gallery.min.css">
    <script src="{{.global.host_img}}/assets/js/blueimp-gallery.min.js"></script>
    <script src="{{.global.host_img}}/assets/js/jsrender.min.js"></script>
    <script type="text/javascript">
        var archiveMoney = {{.archive.Money }};
        var archiveUnqID = '{{.archive.UnqID}}';
    </script>
</head>

<body>
    {{ template "_header.htm" .}}
    <main role="main">
        <div class="album py-3 bg-light">
            <div class="container">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/list/videos-2">视频</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{.archive.Title}} <a
                                href="javascript:window.history.back();"><i class="fa fa-arrow-circle-o-left"></i></a>
                        </li>
                    </ol>
                </nav>
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        <div class="mb-4">
                            <div class="icon-play"><i class="fa fa-4x fa-play-circle-o "></i></div>
                            <img src="{{uploads_url .archive.Litpic}}" width="100%"
                                video="{{uploads_url .archive.Litvideo}}" class="litvd">
                            <div class="py-2">
                                {{if eq .archive.Money 0}}
                                <button class="btn btn-lg btn-danger btn-block" type="button" disabled>免费</button>
                                {{else}}
                                <button id="btnBuy" class="btn btn-lg btn-danger btn-block"
                                    type="button">{{.archive.Money}}金币
                                    购买全套</button>
                                <button style="display: none" id="btnOk"
                                    class="btn btn-lg btn-danger btn-block disabled" type="button">{{.archive.Money}}金币
                                    已购买</button>
                                {{end}}
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6 col-lg-8">
                        <div class="row">
                            <div class="col-md-12" id="videoUrls">
                                {{range .videoUrls}}
                                <figure class="col-md-4 imgViewItem">
                                    <a title="{{$.archive.Title}}" data-poster="{{uploads_url .Litpic}}"
                                        type="video/mp4" href="{{uploads_url .Video}}">
                                        <img alt="picture" video="{{uploads_url .LitVideo}}"
                                            src="{{uploads_url .Litpic}}" class="img-fluid litvd">
                                    </a>
                                </figure>
                                {{end}}
                            </div>
                        </div>
                    </div>


                </div><!-- end row-->

                <div class="row">
                    <div class="col-md-12">
                        <div class="alert border-bottom">猜你喜欢</div>

                    </div>

                    {{range .likeVideos}}
                    <div class="col-md-3">
                        <div class="card mb-4 shadow-sm">
                            <div class="icon-play"><i class="fa fa-4x fa-play-circle-o "></i></div>
                            <a href="/view/{{.UnqID}}" title="{{.Title}}"><img class="litvd"
                                    video="{{uploads_url .Litvideo}}" src="{{uploads_url .Litpic}}" width="100%"
                                    height="100%"></a>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        {{if eq .Money 0}}
                                        <a href="/view/{{.UnqID}}" class="btn btn-sm btn-outline-secondary">观看</a>
                                        {{else}}
                                        <a href="/view/{{.UnqID}}" class="btn btn-sm btn-warning">付费</a>
                                        {{end}}
                                    </div>
                                    <small class="text-muted">{{date .Senddate "Y-m-d"}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{end}}
                </div>
            </div>
        </div>

    </main>

    <!-- gallery -->
    <div id="blueimp-gallery" class="blueimp-gallery">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>

    <script id="tplVideoItem" type="text/x-jsrender">
      <figure class="col-md-4">
        <a href="{%:~uploads_url(Video)%}" title="{{$.archive.Title}}" data-poster="{%:~uploads_url(Litpic)%}" type="video/mp4">
          <img video="{%:~uploads_url(LitVideo)%}" alt="picture" src="{%:~uploads_url(Litpic)%}"
            class="img-fluid litvd">
        </a>
      </figure>
  </script>

    {{ template "_footer.htm" }}

    <script type="text/javascript">
        $.views.settings.delimiters("{%", "%}"); // 设置js render标签

        $.views.helpers({
            uploads_url: function (val) {
                return val.replace("public/", "{{.global.host_img}}/");
            }
        })

        var gokeep_token = GetCookie(TokenName());

        // 购买当前内容
        function BuyThis(modalID) {
            CloseModal("GKModal" + modalID);
            $.ajax({
                type: "POST",
                dataType: 'json',
                contentType: "application/json;",
                data: JSON.stringify({
                    unqid: archiveUnqID,
                }),
                url: "/api/v1/auth/archive/buy",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + gokeep_token);
                }
            }).done(function (data) {
                if (data.code == 0) {
                    if (data.result == "ok") {
                        // 成功购买则刷新
                        location.reload();
                    }
                }
            });
        }

        $("#btnBuy").click(function (event) {
            // 点击购买
            $.ajax({
                type: "GET",
                dataType: 'json',
                contentType: "application/json;",
                url: "/api/v1/auth/member/info",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + gokeep_token);
                }
            }).done(function (data) {
                if (data.code == 0) {
                    // 先判断余额是否足够，如果不够提示充值
                    if (data.result.money < archiveMoney) {
                        var footer = "<p><a href='?' class='btn btn-outline-primary' data-dismiss='modal' aria-label='Close'>继续看看</a> <a href='/member/pay' target='_blank' class='btn btn-primary'>前去充值</a></p>";
                        ShowMsg("您的余额不足，无法完成购买，请充值，当前金币余额：<font color='red'>" + data.result.money + "</font>", {
                            footer: footer,
                            noClose: false,
                        });
                        return;
                    }
                    // 提示是否进行购买操作
                    var footer = "<p><a href='javascript:BuyThis(\"~modalID~\");' class='btn btn-primary'>确认购买</a></p>";
                    ShowMsg("本次购买将消耗您：<font color='red'>" + archiveMoney + "</font>个金币，目前您的余额为：<font color='red'>" + data.result.money + '</font>', {
                        footer: footer,
                        noClose: false,
                    });
                }
            }).fail(function () {
                var footer = "<p><a href='?' class='btn btn-outline-primary' data-dismiss='modal' aria-label='Close'>我知道了</a> <a href='/login' target='_blank' class='btn btn-primary'>前去登录</a></p>";
                ShowMsg("尚未登录，请登录后再进行购买", {
                    footer: footer,
                    noClose: false,
                });
                return;
            });
        });

        var md = new MobileDetect(window.navigator.userAgent);

        // 对一个区域的图片绑定预览事件
        function BindPreview(ele) {
            ele.mouseover(function () {
                if (md.phone() != null || md.tablet() != null) {
                    return
                }
                var id = guid();
                var uuid = $(this).attr("uuid");
                if (typeof uuid == "undefined") {
                    uuid = id
                    $(this).attr("uuid", uuid);
                }
                var video = $(this).attr("video");
                if ($("video[uuid='" + uuid + "']").length == 0) {
                    $(this).wrap("<div/>")
                    $(this).after('<video preload autoplay loop src="' + video + '" uuid="' + uuid + '" width="100%" style="display:none"></video>');
                    $("video[uuid='" + uuid + "']").mouseout(function () {
                        $(this).hide();
                        $("img[uuid='" + uuid + "']").show();
                        $("video[uuid='" + uuid + "']").parent().parent().parent().find(".icon-play").show();
                    });
                    $("video[uuid='" + uuid + "']").show();
                    $("video[uuid='" + uuid + "']").parent().parent().parent().find(".icon-play").hide();
                } else {
                    $("video[uuid='" + uuid + "']").show();
                    $("video[uuid='" + uuid + "']").parent().parent().parent().find(".icon-play").hide();
                }
                $(this).hide();
            })
        }

        $(document).ready(function () {

            // 如果是收费内容，并且用户已经登录，判断是否已经购买
            // 如果已经购买，则直接调用内容显示出来
            var check_me = localStorage.getItem('check_me') == "true" ? true : false;;
            if ((archiveMoney > 0) && (check_me == true)) {
                // TODO:直接调用查看内容
                $.ajax({
                    type: "GET",
                    dataType: 'json',
                    contentType: "application/json;",
                    url: "/api/v1/auth/archive/view?unqid=" + archiveUnqID,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer ' + gokeep_token);
                    }
                }).done(function (data) {
                    if (data.code == 0) {
                        Log(data);
                        if (data.result.addrow == null) return;
                        if (typeof data.result.addrow.videosrc != "undefined" && data.result.addrow.videosrc.length > 0) {
                            var content = $("#tplVideoItem").render(data.result.addrow.videosrc);
                            $("#videoUrls").html(content);
                            $("#btnBuy").hide();
                            $("#btnOk").show();
                            BindPreview($("#videoUrls").find(".litvd"));
                        }
                    }
                });
            }

            document.getElementById('videoUrls').onclick = function (event) {
                event = event || window.event;
                var target = event.target || event.srcElement,
                    link = target.src ? target.parentNode : target,
                    options = { index: link, event: event },
                    links = this.getElementsByTagName('a');
                if (link.tagName.toLowerCase() == "div") {
                    link = link.parentNode
                }
                if (link.getAttribute("href") != "") {
                    blueimp.Gallery(links, options);
                } else {
                    var footer = "<p><a href='?' class='btn btn-outline-primary' data-dismiss='modal' aria-label='Close'>我知道了</a> <a href='/login' target='_blank' class='btn btn-primary'>注册登录并充值</a></p>";
                    ShowMsg("当前为收费内容，需要您点击购买后才能查看", {
                        footer: footer,
                        noClose: false,
                    });
                    return false;
                }
            };
            BindPreview($(".litvd"));
        });
    </script>
    {{ template "_analytics.htm" }}
</body>

</html>