<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=0.3,user-scalable=yes">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/common.css">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/style.css">
    <title>电站详情</title>
</head>
<body>
<!-- head -->
<div class="detail-box">
    <%--<div class="detail-title pos-r">
        <p class="fs-16">电站详情</p>
        <span class="pos-a"><em class="close"></em></span>
    </div>--%>
    <!-- body -->
    <div class="pg">
        <div class="information">
            <h1>基本信息</h1>
        </div>
        <div class="mt-20">
            <table class="dztable1">
                <tbody>
                <tr>
                    <td style="width: 100px">电站设备</td>
                    <td  style="width: 250px">${ps.columns.ps_name}</td>
                    <td style="width: 100px">地址</td>
                    <td  style="width: 250px">${ps.columns.province}${ps.columns.city}${ps.columns.area}${ps.columns.location}</td>
                </tr>
                <tr>
                    <td style="width: 100px">电站时区</td>
                    <td  style="width: 250px">${ps.columns.timezone}</td>
                    <td style="width: 100px">经度/纬度</td>
                    <td  style="width: 250px"><c:if test="${not empty ps.columns.longitude && not empty ps.columns.latitude}">经度${ps.columns.longitude}纬度${ps.columns.latitude}</c:if></td>
                </tr>
                <tr>
                    <td style="width: 100px">电站类型</td>
                    <td  style="width: 250px">${ps.columns.ps_type_name}</td>
                    <td style="width: 100px">装机功率</td>
                    <td  style="width: 250px"><c:if test="${not empty ps.columns.design_capacity}">${ps.columns.design_capacity}KW</c:if></td>
                </tr>
                <tr>
                    <td style="width: 100px">并网日期</td>
                    <td  style="width: 250px">${ps.columns.expect_install_date}</td>
                    <td style="width: 100px">并网类型</td>
                    <td  style="width: 250px">${ps.columns.connect_type}</td>
                </tr>
                <tr>
                    <td style="width: 100px">安装面积</td>
                    <td  style="width: 250px">${ps.columns.installed_area}</td>
                    <td style="width: 100px">组件面积</td>
                    <td  style="width: 250px">${ps.columns.component_area}</td>
                </tr>
                <tr>
                    <td style="width: 100px">业主</td>
                    <td  style="width: 250px">${ps.columns.ps_holder}</td>
                    <td style="width: 100px">联系方式</td>
                    <td  style="width: 250px">${ps.columns.user_moble_tel}</td>
                </tr>
                <tr>
                    <td style="width: 100px">经销/安装商</td>
                    <td  style="width: 250px">${ps.columns.installer_contact}</td>
                    <td style="width: 100px"></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="information mt-20">
            <h1>电站设备</h1>
        </div>
            <c:forEach items="${list}" var="dev">
        <div class="mt-20">
        <table class="dztable1">
                <tbody>
                <tr>
                    <td style="width: 100px">设备名称</td>
                    <td style="width: 250px">${dev.columns.device_name}</td>
                    <td style="width: 100px">设备类型</td>
                    <td style="width: 250px">${dev.columns.type_name}</td>
                </tr>
                <tr>
                    <td style="width: 100px">设备型号</td>
                    <td style="width: 250px">${dev.columns.device_model}</td>
                    <td style="width: 100px">设备编码</td>
                    <td style="width: 250px">${dev.columns.device_code}</td>
                </tr>
                <tr>
                    <td style="width: 100px">生产厂家</td>
                    <td style="width: 250px">${dev.columns.factory_name}</td>
                    <td style="width: 100px">通讯设备</td>
                    <td style="width: 250px">${dev.columns.sn}</td>
                </tr>
                </tbody>
            </table>
        </div>
            </c:forEach>

        <div class="mt-30">
            <div class="f-l" style="margin-top: -25px">
                <div class="ygdy">
                    <h1 style="font-size: 14px">电站介绍</h1>
                </div>
                <div class="yg-sub">
                    &emsp;&emsp;<c:if test="${empty ps.columns.description}">暂无</c:if>${ps.columns.description}
                </div>
            </div>
            <div class="swiper-box f-l ml-10" style="margin-left: 35px">
                <div class="slider" id="slider">
                    <div class="slider-inner">
                        <c:forEach items="${imgs}" var="img">
                            <c:if test="${empty img.columns.picture_url}">
                            </c:if>
                            <c:if test="${! empty img.columns.picture_url}">
                                <div class="item">
                                    <img class="img" src="${commonStaticImgPath}${img.columns.picture_url}">
                                </div>
                            </c:if>

                        </c:forEach>
                        <%--<div class="item">
                            <img class="img" src="./img/dzback.png">
                        </div>
                        <div class="item">
                            <img class="img" src="./img/dzback.png">
                        </div>
                        <div class="item">
                            <img class="img" src="./img/dzback.png">
                        </div>
                        <div class="item">
                            <img class="img" src="./img/dzback.png">
                        </div>--%>
                    </div>
                </div>
            </div>

            <div class="clear"></div>
        </div>
    </div>
</div>
    <script src="${ctxPlugin}/static/js/jquery-3.3.1.min.js"></script>
    <script>
        ;(function($) {
            $.fn.Slider = function(options) {
                "use strict";

                var settings = $.extend({
                    isAuto: true,
                    transTime: 4000,
                    animateSpeed: 1000,
                    sliderMode: 'slide', //'slide | fade',
                    pointerControl: true,
                    pointerEvent: 'click',//'hover' | 'click',
                    arrowControl: true,
                }, options);
                var interval;
                var isAnimating     = false;
                var $slider         = $(this);
                var $sliderWrap     = $slider.find('.slider-inner');
                var sliderCount     = $sliderWrap.find('> .item').length;
                var sliderWidth     = $slider.width();
                var currentIndex    = 0;

                var sliderFun = {
                    controlInit: function() {
                        // pointerControl
                        if (settings.pointerControl) {

                            var html = '';
                            html += '<ol class="slider-pointer">';
                            for (var i = 0; i < sliderCount; i++) {
                                if (i == 0) {
                                    html += '<li class="active"></li>'
                                }else{
                                    html += '<li></li>'
                                }
                            }
                            html += '</ol>'
                            $slider.append(html);
                            // ָʾ������
                            var $pointer = $slider.find('.slider-pointer');
                            $pointer.css({
                                left: '50%',
                                marginLeft: - $pointer.width()/2
                            });
                        }
                        // pointerControl
                        if (settings.arrowControl) {
                            var html = "";
                            html += '<span class="slider-control prev">&lt;</span>';
                            html += '<span class="slider-control next">&gt;</span>'
                            $slider.append(html);
                        }
                        $slider.on('click', '.slider-control.prev', function(event) {
                            sliderFun.toggleSlide('prev');
                        });
                        $slider.on('click', '.slider-control.next', function(event) {
                            sliderFun.toggleSlide('next');
                        });
                    },
                    // slider
                    sliderInit: function() {
                        sliderFun.controlInit();
                        // ģʽѡ��
                        if (settings.sliderMode == 'slide') {
                            // slide ģʽ
                            $sliderWrap.width(sliderWidth * sliderCount);
                            $sliderWrap.children().width(sliderWidth);
                        }else{
                            // mode ģʽ
                            $sliderWrap.children().css({
                                'position': 'absolute',
                                'left': 0,
                                'top': 0
                            });
                            $sliderWrap.children().first().siblings().hide();
                        }
                        // �����¼�
                        if (settings.pointerEvent == 'hover') {
                            $slider.find('.slider-pointer > li').mouseenter(function(event) {
                                sliderFun.sliderPlay($(this).index());
                            });
                        }else{
                            $slider.find('.slider-pointer > li').click(function(event) {
                                if (currentIndex != $(this).index()) {
                                    sliderFun.sliderPlay($(this).index())
                                }
                            });
                        }
                        // �Զ�����
                        sliderFun.autoPlay();
                    },
                    // slidePlay
                    sliderPlay: function(index) {
                        sliderFun.stop();
                        isAnimating = true;
                        $sliderWrap.children().first().stop(true, true);
                        $sliderWrap.children().stop(true, true);
                        $slider.find('.slider-pointer').children()
                            .eq(index).addClass('active')
                            .siblings().removeClass('active');
                        if (settings.sliderMode == "slide") {
                            // slide
                            if (index > currentIndex) {
                                $sliderWrap.animate({
                                    left: '-=' + Math.abs(index - currentIndex) * sliderWidth + 'px'
                                }, settings.animateSpeed, function() {
                                    sliderFun.stop();
                                    isAnimating = false;
                                    sliderFun.autoPlay()
                                });
                            } else if (index < currentIndex) {
                                $sliderWrap.animate({
                                    left: '+=' + Math.abs(index - currentIndex) * sliderWidth + 'px'
                                }, settings.animateSpeed, function() {
                                    isAnimating = false;
                                    sliderFun.autoPlay();
                                });
                            } else {
                                return;
                            }
                        }else{
                            // fade
                            if ($sliderWrap.children(':visible').index() == index) return;
                            $sliderWrap.children().fadeOut(settings.animateSpeed)
                                .eq(index).fadeIn(settings.animateSpeed, function() {
                                isAnimating = false;
                                // sliderFun.autoPlay();
                            });
                        }
                        currentIndex = index;
                    },
                    // toggleSlide
                    toggleSlide: function(arrow) {
                        if (isAnimating) {
                            return;
                        }
                        var index;
                        if (arrow == 'prev') {
                            index = (currentIndex == 0) ? sliderCount - 1 : currentIndex - 1;
                            sliderFun.sliderPlay(index);
                        }else if(arrow =='next'){
                            index = (currentIndex == sliderCount - 1) ? 0 : currentIndex + 1;
                            sliderFun.sliderPlay(index);
                        }
                    },
                    // autoPlay
                    autoPlay: function() {
                        if (settings.isAuto) {
                            interval = setInterval(function () {
                                var index = currentIndex;
                                (currentIndex == sliderCount - 1) ? index = 0: index = currentIndex + 1;
                                sliderFun.sliderPlay(index);
                            }, settings.transTime);
                        }else{
                            return;
                        }
                    },
                    //stop
                    stop: function() {
                        clearInterval(interval);
                    },
                };
                sliderFun.sliderInit();
            }
        })(jQuery);
        jQuery(document).ready(function($) {
            $('#slider').Slider();
        });
    </script>
</body>
</html>