<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘车</title>
    <meta name="keywords" content="">
    <meta name="description" content=""/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app" v-cloak>
    <!--<div class="bg" :class="{'bgHide':show}"></div>-->
    <div class="top flexSB" :class="{'topA':show}">
        <div class="topItem flexFS" :class="{'topItemA':tabNum==index}" v-for="(item,index) in topList" :key="index" @click="tabs(index)">
            <div class="topItemImg flex"><img :src="item.img" alt=""></div>
            <div class="topItemName flex">{{item.name}}</div>
        </div>
    </div>
    <div class="bottom " :class="{'bottomA':show}">
        <div style="width:100%;" @touchstart="showDetail2" @touchmove="showDetail1" @touchend='showDetail'>
            <div class="bottomTitle flex">
                <div class="img1"></div>
                <div class="img2" v-show="!show"></div>
            </div>
            <div class="calendar flexSB" v-if="calendar!=''">
                <div class="month weight flexAC">{{year}}</div>
                <div class="dateList flexFE">
                    <div class="dateItem flexFJ" v-for="(item,index) in calendar" :key="index" @touchend.stop="dateTab(index)">
                        <div class="dateItemNum flex " :class="{'dateItemNumA':num==index}">{{item.num}}</div>
                        <div class="dateItemName flex">{{item.week}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="car!=''" style="width:100%;padding:20px 25px 25px 25px;height:calc(100% - 90px);overflow-y: auto;">
            <div class="ridingItem" v-for="(item,index) in car" :key="index">
                <div class="ridingItemTitle flexFB">
                    <img src="images/19.png" alt="">
                    <div>{{item.takeCarTime+item.title}}</div>
                </div>
                <div class="ridingItemCells">
                    <div class="ridingItemCell">
                        <div class="ridingItemLabel flexAC">车型：</div>
                        <div class="ridingItemHd flexAC">{{item.params.car.model}}</div>
                    </div>
                    <div class="ridingItemCell">
                        <div class="ridingItemLabel flexAC">车牌号码：</div>
                        <div class="ridingItemHd flexAC">{{item.params.car.licensePlateNumber}}</div>
                    </div>
                    <div class="ridingItemCell">
                        <div class="ridingItemLabel flexAC">司机信息：</div>
                        <div class="ridingItemHd flexAC">{{item.params.car.driverName+item.params.car.driverTel}}</div>
                    </div>
                </div>
            </div>
            <div class="divider flex">
                <img src="images/23.png" alt="">
                <div class="flex weight">嘉宾</div>
                <img src="images/24.png" alt="">
            </div>
            <div class="tabContent" style="height:auto;">
                <div class="personnelLst" >
                    <div class="personnelItem" >
                        <div class="personnelItemName weight">{{name}}</div>
                        <div class="personnelItemTitle">{{job}}</div>
                        <div class="personnelItemTitle">{{tel}}</div>
                    </div>
                    <div class="personnelItem" v-for="(item,index) in personnelLst" :key="index">
                        <div class="personnelItemName weight">{{item.name}}</div>
                        <div class="personnelItemTitle">{{item.job}}</div>
                        <div class="personnelItemTitle" style="height:16px;">{{item.tel}}</div>
                    </div>
                </div>
            </div>
        </div>
        <van-empty v-show="car==''" description="暂无数据" ></van-empty>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script src="js/base.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                baseurl:baseurl,
                topList:[{img:'images/1.png',name:'日程',url:'index.html'},{img:'images/2.png',name:'人员',url:'personnel.html'},
                    {img:'images/3.png',name:'乘车',url:'riding.html'},{img:'images/4.png',name:'住宿',url:'stay.html'},{
                        img:'images/5.png',name:'活动介绍',url:'exhibitionActivities.html'},
                    {img:'images/6.png',name:'历届回顾',url:'historicalReview.html'},{img:'images/7.png',name:'关注更多',url:'followMore.html'},],
                show:true,
                num:0,
                year:'',
                tabNum:2,
                num1:0,
                num2:0,
                num3:0,
                calendar:[],
                personnelLst:[],
                id:'',
                takeCarDate:'',
                car:[],
                avatar:'',
                name:'',
                job:'',
                tel:'',
            }
        },
        mounted() {
//            this.topNoPullDown()
            //日期查询
            axios.post('system/takeCar/yearMonthList',Qs.stringify({'params[personnelId]':GetRequest()['id']})).then(res => {
                if(res.data.code==0){
                    this.calendar=[]
                    if(res.data.data!=''){
                        if(localStorage.getItem('ccNum')) {
                            this.num = localStorage.getItem('ccNum')
                        }else{
                            let date = cover(new Date()).slice(0,10)
                            res.data.data.map((item,index)=>{
                                if(date==item){
                                    this.num=index
                                }
                            })
                        }
                        res.data.data.map(item=>{
                            this.calendar.push({num:item.slice(8, 10),week:getWeekDate(item),date:item})
                        })
                        this.year = this.calendar[this.num].date.slice(0, 7)
                        this.takeCar()
                    }else{
                        localStorage.removeItem('ccNum')
                    }
                }else{
                    localStorage.removeItem('ccNum')
                    this.$toast(res.data.msg)
                }
            })


        },
        methods: {
            tabs(index){
//                this.tabNum = index
                if(index==0){
                    window.location.href=this.topList[index].url+'?id='+GetRequest()['id']+'&&show=0'
                }else{
                    window.location.href=this.topList[index].url+'?id='+GetRequest()['id']
                }
            },
            showDetail2(event){
                const touch = event.touches[0]
                this.ys = touch.clientY
            },
            showDetail1(event) {
                const touch = event.touches[0]
                this.ym = touch.clientY
            },
            showDetail() {
                if(this.ys-this.ym>30){
                    this.show=true
                }else if(this.ym-this.ys>30){
                    this.show=false
                }

            },
            takeCar(){
                axios.post('system/takeCar/list',Qs.stringify({
                    takeCarDate: this.calendar[this.num].date,
                    personnelId:GetRequest()['id']
                })).then(res => {
                    if(res.data.code==0){
                        this.car = res.data.data
                        if(res.data.data!=''&&res.data.data!=null){
                            //嘉宾
                            axios.get('system/personnel/get?personnelId=' + GetRequest()['id'] ).then(res => {
                                if (res.data.code == 0) {
                                    this.name = res.data.data.name
                                    this.job = res.data.data.job
                                    this.tel = res.data.data.tel
                                    this.avatar = this.baseurl + res.data.data.avatar
                                    this.personnelLst = res.data.data.params.relevantLeadersList
                                } else {
                                    this.$toast(res.data.msg)
                                }
                            })
                        }else{
                            this.name = ''
                            this.job = ''
                            this.tel = ''
                            this.avatar = ''
                        }

                    }else{
                        this.$toast(res.data.msg)
                    }
                })
            },
            dateTab(index){
                this.num = index
                this.year = this.calendar[index].date.replace(/\//g, '-').slice(0, 7)
                localStorage.setItem('ccNum',this.num)
                this.takeCar()
            },
            tabs1(index){
                this.num3 = index
            },
            tabs2(index){
                this.num1 = index
            },
            tabs3(index){
                this.num2 = index
            },
            topNoPullDown () {
                const overscroll = function (el) {
                    el.addEventListener('touchstart', function () {
                        const top = el.scrollTop
                        const totalScroll = el.scrollHeight
                        const currentScroll = top + el.offsetHeight
                        if (top === 0) {
                            el.scrollTop = 1
                        } else if (currentScroll === totalScroll) {
                            el.scrollTop = top - 1
                        }
                    })
                    el.addEventListener('touchmove', function (evt) {
                        if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
                    })
                }
                overscroll(document.querySelector('#app'))
                document.body.addEventListener(
                    'touchmove',
                    function (evt) {
                        if (!evt._isScroller) {
                            evt.preventDefault()
                        }
                    },
                    { passive: false }
                )
            }
        },
    })
</script>
</html>