<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="img/ic.png">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>车队信息</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
    <link href="dist/css/bootstrapValidator.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/cdn/font_evmq6xwfabutyb9.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/cdn/html5shiv-3.7.0.js"></script>
    <script src="js/cdn/respond-1.4.2.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
    <link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
    <link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <link rel="stylesheet" href="layer/theme/default/layer.css">
    <link rel="stylesheet" href="css/team-detail.css">
    <style>
        #example_paginate{
            float:right;
        }
        .handle-btn{
            cursor: pointer;
            margin: 0 2px;
        }
        #wrapper {
            padding-left:0px;
        }
        .navigation{
            border-bottom: 3px solid #edebeb;
        }

        .navigation a:hover{
            color: #0F6AFC;
            border-bottom: 2px solid #01AAED;
        }
        .this{
            color: #01aaed;
            font-weight:bold;
            border-bottom: 2px solid #01AAED;
        }
        #check>tbody>tr{
            line-height: 20px;
        }

        [v-cloak] {
            display: none;
        }

        /*.td_w2{*/
            /*width: 180px;*/
        /*}*/
        .td_w1{
            width: 100px;
        }

        .t2b {
            width: 15px;
            margin: 0 auto;
            line-height: 1.6rem;
            font-size: 1.4rem;
            word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/

            /*writing-mode: vertical-lr;!*从左向右 从右向左是 writing-mode: vertical-rl;*!*/
            /*writing-mode: tb-lr;!*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*!*/
        }
        .list-group-item-success{
        	color: #fff;
        	background:#1aa79d;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"style="height: 67px; background-image:url(img/top.jpg);">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        </div>
        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span id="userName"></span> <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row sss">
                <nav class="navbar navbar-default" role="navigation">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="ParticipatingTeams.html">参赛车队</a></li>
                        <li class="active"><a href="javascript:;"><span class="xuanzhong">车队详情</span></a></li>
                    </ul>
                </nav>
            </div>
            <div class="container-fluid">
                <div class="row team-info" v-cloak>
                    <div class="col-sm-3">
                        <strong>车队名称：</strong>
                        <span>{{teamsObj.teamName}}</span>
                    </div>
                    <div class="col-sm-3">
                        <strong>参赛车数：</strong>
                        <span>{{teamsObj.automobileQuantity}}</span>
                    </div>
                    <div class="col-sm-3">
                        <strong>参赛人数：</strong>
                        <span>{{teamsObj.matchesNumber}}</span>
                    </div>
                    <div class="col-sm-3">
                        <strong>是否参加离线测试：</strong>
                        <span v-if="teamsObj.offlineTest==='Y'">参加</span>
                        <span v-if="teamsObj.offlineTest==='N'">不参加</span>
                    </div>
                    <div class="col-sm-12 mtb">
                        <strong>车队组成单位：</strong>
                        <span>{{teamsObj.teamOrganization}}</span>
                    </div>
                </div>
                <div class="row" v-cloak>
                    <div class="col-sm-3">
                        <span></span>
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-success"><strong>负责人信息</strong></li>
                            <li class="list-group-item ">
                                <strong>姓名：</strong>
                                <span>{{teamsObj.teamLeader}}</span>
                            </li>
                            <li class="list-group-item ">
                                <strong>性别：</strong>
                                <span v-if="teamsObj.gender===0">男</span>
                                <span v-if="teamsObj.gender===1">女</span>
                            </li>
                            <li class="list-group-item ">
                                <strong>职务/职称：</strong>
                                <span>{{teamsObj.duty}}</span>
                            </li>
                            <li class="list-group-item ">
                                <strong>手机：</strong>
                                <span>{{teamsObj.teamPhone}}</span>
                            </li>
                            <li class="list-group-item ">
                                <strong>办公电话：</strong>
                                <span>{{teamsObj.officePhone}}</span>
                            </li>
                            <li class="list-group-item ">
                                <strong>电子邮件：</strong>
                                <span>{{teamsObj.email}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-9">
                        <div class="list-group">
                            <div class="list-group-item list-group-item-success"><strong>赛车参数信息</strong></div>
                            <div class="list-group-item">
                                <div class="w3">
                                    <strong>车长（毫米）：</strong><span>{{teamsObj.automobileLength}}</span>
                                </div>
                                <div class="w3">
                                    <strong>车宽（毫米）：</strong><span>{{teamsObj.automobileWidth}}</span>
                                </div>
                                <div class="w3">
                                    <strong>车高（毫米）：</strong><span>{{teamsObj.automobileHeight}}</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="w3">
                                    <strong>离去角（度）：</strong><span>{{teamsObj.departureAngle}}</span>
                                </div>
                                <div class="w3">
                                    <strong>接近角（度）：</strong><span>{{teamsObj.approachAngle}}</span>
                                </div>
                                <div class="w3">
                                    <strong>最小离地间隙（毫米）：</strong><span>{{teamsObj.minGroundClearance}}</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="w3">
                                    <strong>轮距（毫米）：</strong><span>{{teamsObj.wheelTrack}}</span>
                                </div>
                                <div class="w3">
                                    <strong>轴距（毫米）：</strong><span>{{teamsObj.wheelBase}}</span>
                                </div>
                                <div class="w3">
                                    <strong>最小转弯半径（毫米）：</strong><span>{{teamsObj.minTurningRadius}}</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="w3">
                                    <strong>自主行驶最高车速：</strong><span>{{teamsObj.maxSpeed}}</span>
                                </div>
                                <div class="w3">
                                    <strong>自主行驶最低车速：</strong><span>{{teamsObj.minSpeed}}</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="tp">
                                    <p><strong>正视图</strong></p>
                                    <img style="width: 200px;cursor: pointer;" :src="getImgPath(teamsObj.frontView)" alt="" v-show-img>
                                </div>
                                <div class="tp auto-dot">
                                    <p><strong>侧视图</strong></p>
                                    <img style="max-width: 200px;width: 80%;cursor: pointer;" :src="getImgPath(teamsObj.lateralView)" alt="" v-show-img>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!--layer-->
<script src="layer/layer.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- tab table-->
<script type="text/javascript" src="js/common.js" ></script>
<!-- Morris Charts JavaScript -->
<script type="text/javascript" src="js/vue/vue.js" ></script>
<script type="text/javascript" src="js/vue/vue-router.js" ></script>
<script src="js/vue/v-showImg.js"></script>
</body>
<script>
var userName = localStorage.getItem("userName");    $("#userName").text(userName);
    var vue = new Vue({
        el: '#wrapper',
        data:{
            teamId: '',
            teamsObj: {}
        },
        mounted:function(){
            this.teamId = getQueryString("teamId",window.location.href); //用户传ID
            this.init();
        },
        methods:{
            init: function () {
                var _self = this;
                $.ajax({
                    type: "get",
                    url:url+'/users/'+adminId+'/teams/'+teamId,
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function(request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function(data) {
                        if(data.code == 1){
                            var result = data.result;
                            _self.teamsObj = result;
                        }else{
                            toastr['error'](data.description);
                        }

                    }
                });
            },
            getImgPath: function (path) {
                if(!path) return;
                var str = url + "/showImg?imgPath=" + path;
                return str;
            }
        }
    });
</script>
</html>