<?php
/* @var $this \yii\web\View */

use yii\helpers\Url;

$this->title = '和隆官网';
?>
<?php $this->beginBlock('header_script'); ?>
<?php $this->endBlock(); ?>
<div class="content">
    <!-- banner -->
    <div class="index-banner">
    	<div class="index-open">
            <!--<a href="#">开立模拟账户</a>-->
            <!--<a href="http://crm.noride-fx.com">开立真实账户</a>-->
        </div>
        <div id="indexBanner" class="owl-carousel owl-theme">
            <div class="item">
                <img id="bannerSmall" src="<?= STATIC_URL ?>/static/fxm/images/banner99.jpg" alt="noride">
            </div>
            <!--<div class="item">
                <img id="bannerSmall" src="<?= STATIC_URL ?>/static/fxm/images/banner2.jpg" alt="noride">
            </div>-->
            <div class="item">
                <img id="bannerSmall" src="<?= STATIC_URL ?>/static/fxm/images/banner3.jpg" alt="noride">
            </div>
        </div>
        <div class="index-notice">
            <div class="container inner">
                <div class="tit" id="notice"></div>
<!--                <ul>
                    <li id="index-notice-1">1市场行情丰富 支持双向交易市场行情丰富 支持双向交易市场行情丰富 支持双向交易</li>
                    <li id="index-notice-2">2市场行情丰富 支持双向交易市场行情丰富 支持双向交易市场行情丰富 支持双向交易</li>
                    <li id="index-notice-3">3市场行情丰富 支持双向交易市场行情丰富 支持双向交易市场行情丰富 支持双向交易</li>
                </ul>
                <a href="##" class="more">More+</a>-->
            </div>

        </div>
    </div>

    <div class="index-data slide-left">
        <ul class="container clearfix">
            <li>
                <em>30</em>多种交易产品</li>
            <li>
                <em>0</em>点差起步</li>
            <li>
                <em>1:100</em>杠杆</li>
            <li>
                <em>$0</em>免费开户</li>
            <li>
                <em>24</em>小时客服</li>
        </ul>
    </div>

    <div class="container">
        <div class="index-product">
            <h2 class="index-tit">多样化交易产品</h2>
            <p class="index-tips">开设一个交易账户，轻松参与多个国际金融产品投资</p>
           	<div class="analysis-list-case clearfix">
	            <div class="list list-one clearfix">
	                <a href="<?= Url::to(['/product/oil']) ?>">
	                    <div class="img">
	                        <img src="<?= STATIC_URL ?>/static/fxm/images/index-1-3.jpg" width="283" height="130px" alt="原油">
	                        <p>原油</p>
	                    </div>
	                    <div class="txt">
	                        <p>对冲交易，减少交易风险</p>
	                        <p>交易成本低，约2块人民币/吨 </p>
	                        <p>只需一次止损，隔天仍然有效</p>
	                    </div>
	                </a>
	                <a href="<?= Url::to(['/product/mark']) ?>">
	                    <div class="img">
	                        <img src="<?= STATIC_URL ?>/static/fxm/images/index-1-4.jpg" width="283" height="130px" alt="指数">
	                        <p>指数</p>
	                    </div>
	                    <div class="txt">
	                        <p>门槛较低，报价透明</p>
	                        <p>包含三大美指、欧洲优选 </p>
	                        <p>提供低至2%的保证金水平</p>
	                    </div>
	                </a>
	            </div>
	            <!--<div class="index-analysis">
	                <div class="tit">
	                    <h3>
	                        <i class="icon iconfont icon-news"></i>汇评分析</h3>
	                    </h3>    
	                     <a class="more" href="<?= Url::to(['/article/list?id=2']) ?>">More&gt;&gt;</a>
	                </div>
	                <div class="list"></div>
	            </div>-->
	        </div>    
        </div>
    </div>
    <div class="index-why">
        <div class="container">
            <h2 class="index-tit">为什么选择和隆？</h2>
            <p class="index-tips">开设一个交易账户，轻松参与多个国际金融产品投资</p>
            <ul class="clearfix">
                <li>
                    <span class="img img1"></span>
                    <dl>
                        <dt>低门槛</dt>
                        <dd>投资低至100美元起 <br/>提供低门槛理财机会</dd>
                    </dl>
                </li>
                <li>
                    <span class="img img2"></span>
                    <dl>
                        <dt>高杠杆</dt>
                        <dd>1-100倍杠杠，小投入<br/>风险低，高收益</dd>
                    </dl>
                </li>
                <li>
                    <span class="img img3"></span>
                    <dl>
                        <dt>双向交易</dt>
                        <dd>不管货币价格上涨还是下跌<br/>选对方向，就可盈利</dd>
                    </dl>
                </li>

                <li>
                    <span class="img img4"></span>
                    <dl>
                        <dt>交易公平透明</dt>
                        <dd>通过银行、交易所入市交易<br/>向客户公开 真正可成交点差水平</dd>
                    </dl>
                </li>
                <li>
                    <span class="img img5"></span>
                    <dl>
                        <dt>投资便捷</dt>
                        <dd>微信+掌上移动APP在线交易<br/>网上开户10分钟完成</dd>
                    </dl>
                </li>
                <li>
                    <span class="img img6"></span>
                    <dl>
                        <dt>24小时交易</dt>
                        <dd>使用ECN国际对冲通道交易<br/>极速下单，毫秒交易</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="index-start">
        <div class="container">
            <h2 class="index-tit">开始与和隆交易</h2>
            <p class="index-tips">体验我们优越的交易条件</p>
            <ul class="list clearfix">
                <li class="item">
                    <i class="icon iconfont icon-cert"></i>
                    <p>我们已获得英国、澳洲、塞浦路斯全球
                        <br/>顶级监管机构授权</p>
                </li>
                <li class="item">
                    <i class="icon iconfont icon-lock"></i>
                    <p>我们尊重并保护您的隐私</p>
                </li>
                <li class="item">
                    <i class="icon iconfont icon-shield"></i>
                    <p>您的资金存放在信誉良好的银行以保障
                        <br/>安全</p>
                </li>
            </ul>
            <a class="btn-reg" href="http://crm.noride-fx.com/account/open">立即开户</a>
        </div>
    </div>

    <!-- 客服联系 -->
    <div class="index-service">
        <h2 class="index-tit">客服联系</h2>
        <p class="index-tips">请留下您的联系方式，稍后将有客服为您服务</p>
        <form id="contactForm" class="container clearfix">
            <div class="inpt-wrap">
                <input class="inpt" type="text" placeholder="姓名" name="username" autocomplete="off" maxlength="4">
            </div>
            <div class="inpt-wrap">
                <input class="inpt" type="text" placeholder="电话" name="phone" autocomplete="off" maxlength="11">
            </div>
            <div class="inpt-wrap">
                <input class="inpt" type="text" placeholder="电子邮箱" name="email" autocomplete="off">
            </div>
            <div class="inpt-wrap">
                <button class="submit" id="contactFormSubmit" type="button">报名</button>
            </div>
        </form>
    </div>
</div>

<?php $this->beginBlock('footer_script'); ?>
<script>
    $(function () {
        // ajax加载公告
        $.get('/index/get-announcement-list', function (data) {
            var html = ''
            for (key in data) {
                var articleList = data[key].data
                var articleStr = '<ul>'
                for (var i = 0, len = articleList.length; i < len; i++) {
                    var article = articleList[i]
                    articleStr += '<li><a href="/article/detail?id=' + article.id + '">' + article.title + '</a></li>'
                }
                articleStr += '</ul>'
//              articleStr += '<a href="/about/public" class="more">More+</a>'
                html += articleStr
            }
            $('#notice').after(html);
            $('#notice1').after(html);
            setTimeout(function () {
                gundong();
            }, 100)
        }, 'json')
    })

    // 轮播
    $('.owl-carousel').owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        navigation: true,
        margin: 10,
        animateOut: 'fadeOut',
        autoplay: true,
        autoplayTimeout: 5000,
        autoplaySpeed: 1000,
        autoplayHoverPause: false
    });

    // 滚动公告
    var gundong = function () {
        var ul_Obj = $('.index-notice ul');
        var liHeight = ul_Obj.find("li").outerHeight();
        var len = ul_Obj.find("li").length;
        var ulHeight = len * liHeight;
        var dis = 0;
        var timer;
        ul_Obj.find('li:first').clone().appendTo(ul_Obj);
        var scrollNotice = function () {
            dis += liHeight;
            if (dis > ulHeight - liHeight) {
                // console.log(dis);
                ul_Obj.animate({
                    marginTop: -dis
                }, '1000', function () {
                    ul_Obj.css('marginTop', '0px');
                });
                dis = 0;
            } else {
                ul_Obj.animate({
                    marginTop: -dis
                }, '1000');
            }
        }
        timer = setInterval(scrollNotice, '3000');
    };

    // 页面滚动动画
    window.sr = ScrollReveal({
        duration: 1000
    });
    sr.reveal('.index-data li', {
        origin: 'bottom',
        distance: '20px',
    }, 50);
    sr.reveal('.index-product .list a', {
        origin: 'left',
        distance: '100px',
    }, 50);
    sr.reveal('.index-open a,.index-tit,.index-tips', {
        origin: 'bottom',
        distance: '20px',
    }, 50);
    sr.reveal('.index-open a,.index-tit,.index-tips', {
        origin: 'bottom',
        distance: '20px',
    }, 50);
    sr.reveal('.index-info-price', {
        origin: 'left',
        distance: '100px',
    }, 50);
    sr.reveal('.index-analysis', {
        origin: 'right',
        distance: '100px',
    }, 50);
    sr.reveal('.index-why li', {
        scale: 0.5,
    }, 0);
    sr.reveal('.index-start li,.btn-reg', 200);
    sr.reveal('.index-service .inpt-wrap', {
        origin: 'bottom',
        distance: '20px',
    }, 50);

    // 客服联系
    $("#contactForm").validate({
        errorElement: 'i',
        rules: {
            username: 'required',
            phone: {
                required: true,
                isPhone: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            username: '请输入您的姓名',
            phone: {
                required: "请输入手机号码"
            },
            email: {
                required: "请输入邮箱",
                email: "邮箱格式不正确"
            }
        }
    });
    $('#contactFormSubmit').click(function () {
        var name_02_ = 'username',
            phone_02_ = 'phone',
            email_02_ = "email";

        var form = $("#contactForm");
        var name_02 = form.find("input[name =" + name_02_ + "]");
        var phone_02 = form.find("input[name =" + phone_02_ + "]");
        var email_02 = form.find("input[name =" + email_02_ + "]");
        if (form.valid()) {
            var posturl = "/api/save-register";//提交表单的网址
            var postparam = {
                "name": name_02.val(),
                "mobile": phone_02.val(),
                "email": email_02.val()
            };
            $.ajax({
                type: "POST",
                data: postparam,
                url: posturl,
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data) {
                        //清空表单
                        if (name_02.val() != undefined) {
                            name_02.val("");
                        }

                        if (phone_02.val() != undefined) {
                            phone_02.val("");
                        }

                        if (email_02.val() != undefined) {
                            email_02.val("");
                        }

                        layer.msg(
                            '恭喜您！您的申请已成功提交' + "<br>" + '请保持电话畅通，稍后我们会有客服为您提供服务。',
                            {time: 4000},
                            function () {
                                window.location.href = "" + window.location.pathname + "";
                            }
                        );
                    } else {
                    }
                }
            });
        }
    });
</script>
<script>
    // 汇评分析
    $.get('/index/review-analysis', function (data) {
        var $analysisList = $('.index-analysis .list');
        var htmlStr = '';
        var listData = data.articleList.data;
        for (key in listData) {
            var item = listData[key];
            if (item.image_path.length == 0) {
                item.image_path = '../images/index-analysis.jpg';
            }
            var str = '<a class="list-item" href="/article/detail?id=' + item.id + '">' +
                '<img src="' + item.image_path + '" width = "156" height = "100">' +
                '<div class="desc">' +
                '<h4>' + item.title + '</h4>' +
                '<div class="date" >' + item.create_date + '</div>' +
                '<p>' + item.min_content + '</p>' +
                '</div></a>';
            htmlStr += str;
        }
        $analysisList.html(htmlStr);
    }, 'json');

    // 市场行情

//  priceTable();

    function priceTable() {
        $.get('<?= Url::to(['/index/get-market-list']) ?>', function (data) {
            var $analysisList = $('.index-info-price tbody');
            var htmlStr = '';
            var listData = data;
            // 本地存储:上一次的数据和本次的数据比较
            var first = localStorage.getItem('preResult');
            if (first === null) {
                localStorage.setItem('preResult', JSON.stringify(data));
            }
            var preResult = JSON.parse(localStorage.getItem('preResult'));

            for (key in listData) {
                var item = listData[key];
                var preItem = preResult[key];
                for (i in item) {
                    // 涨绿，跌红
                    var str = '<tr><td>' + i + '</td>';
                    if (preItem[i][0] > item[i][0]) {
                        localStorage.setItem('color_' + i + '_buy', 'bg-red');
                        str += '<td><span class="bg-red">' + item[i][0] + '</span></td>';
                    } else if (preItem[i][0] == item[i][0]) {
                        var buy_color = localStorage.getItem('color_' + i + '_buy');
                        if (buy_color == null) {
                            localStorage.setItem('color_' + i + '_buy', 'bg-green');
                        }
                        var color1 = localStorage.getItem('color_' + i + '_buy');
                        str += '<td><span class="'+ color1 +'">' + item[i][0] + '</span></td>';
                    } else {
                        localStorage.setItem('color_' + i + '_buy', 'bg-green');
                        str += '<td><span class="bg-green">' + item[i][0] + '</span></td>';
                    }

                    if (preItem[i][1] > item[i][1]) {
                        localStorage.setItem('color_' + i + '_sell', 'bg-red');
                        str += '<td><span class="bg-red">' + item[i][1] + '</span></td></tr >';
                    } else if(preItem[i][1] == item[i][1]) {
                        var sell_color = localStorage.getItem('color_' + i + '_sell');
                        if (sell_color == null) {
                            localStorage.setItem('color_' + i + '_sell', 'bg-green');
                        }
                        var color2 = localStorage.getItem('color_' + i + '_sell');
                        str += '<td><span class="'+ color2 +'">' + item[i][1] + '</span></td></tr >';
                    } else {
                        localStorage.setItem('color_' + i + '_sell', 'bg-green');
                        str += '<td><span class="bg-green">' + item[i][1] + '</span></td></tr >';
                    }
                }
                htmlStr += str;
            }
            $analysisList.html(htmlStr);
            localStorage.setItem('preResult', JSON.stringify(data));
            setTimeout(function () {
                priceTable()
            }, 1000)
        }, 'json')
    }
</script>
<?php $this->endBlock(); ?>