<style lang="scss">
   @import url("@/asset/css/flex.css");
.backBox{
    width: 45rpx;
    height:45rpx;
    background: rgba(23,23,23,.5);
    border-radius: 50%;
    margin-top: 22rpx;
}
.backIcon{
    display: inline-block;
    margin-top: 6rpx;
}
.backBox img{
    width: 19rpx;
    height: 24rpx;
    display: inline-block;
    margin-top: 10rpx;
}
.itiner-title {
    line-height: 45px !important;
    font-size: 16px;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    color: #111;
    box-sizing: content-box;
    z-index: 5;
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
    padding-left: 6rpx;
}
.bjLine{
    background: #F5F5F5;
    height: 30rpx;
}
.itiner-c-title{
    font-weight: bold;
}
.itiner-xincheng img{
    width: 31rpx;
    height: 33rpx;
}
.itiner-xincheng-left{
    color: #838383;
}
.itiner-xincheng-right view{
    border: 1rpx solid #3581DA;
    color: #3581DA;
    border-radius: 8rpx;
    padding: 0 8rpx;
}
.itiner-left-line{
    width: 9rpx;
    height: 25rpx;
    border-radius: 100rpx;
    background: #000;
}
.itiner-titleBox{
    border-bottom: 1px solid #eee;
}
.itiner-title-c{
    padding: 25rpx 20rpx;
}
.itiner-title-c.active{
    position: relative;
    color: #327FDE;
}
.itiner-title-c.active::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5rpx;
    background: #3581DA;
}
.itiner-feiyong{
    background: #FF9702;
    color: #fff;
    border-radius: 10rpx;
    padding: 0rpx 20rpx;
}
</style>
<template>
    <scroll-view ref="scrollView" scroll-y="true" 
    style="width: 100%; height: 100vh;" 
        @scroll="scroll"
        :scroll-top="scrollTop">
        <view class="media" :style="{ opacity: 100 - boxOption + '%' }" 
        @click="openPicture">
            <u-swiper 
                :list="imgsList" 
                :effect3d="false" 
                :height="545" 
                :interval="5000" 
                :border-radius="0"
                name="url"
                mode="number"
                indicatorPos="bottomRight">
            </u-swiper>
            <view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]"
                style="position: fixed; top: 0; left: 0; padding-left: 6rpx">
                <view class="backBox text-center">
                    <u-icon class="backIcon" name="arrow-left" size="32" color="#FFF"></u-icon>
                </view>
            </view>
            <view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]"
                style="position: fixed; top: 0; right: 200rpx; padding-right: 6rpx">
                <view class="backBox text-center">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762515984923148.png" />
                </view>
            </view>
        </view>
        <view class="itiner-title" :style="[titleStyle]">
            <view @click="goback">
                <u-icon name="arrow-left" size="38"></u-icon>
            </view>
            <view style="flex: 1; margin-left: 30rpx; text-align: left" class="name-ali">
                名称
            </view>
        </view>
        <view class="itiner-content">
            <view class="PX30 PB20">
                <view class="PT25 PB30 fz32 itiner-c-title">
                    名称
                </view>
                <view class="row justify-between items-center">
                    <view class="row items-center">
                        <view class="row items-center"><view class="fz28 color9C9C9C">同业价：</view> <text class="fontBold fz38 colorF99710">0 </text><text class="fz24 ML10"> / 人</text></view>
                        <view class="row  items-center ML30"><view class="fz28 color9C9C9C">统一售价：</view> <text class="fontBold fz38 colorF99710">0 </text><text class="fz24 ML10"> / 人</text></view>
                    </view>
                    <view>
                        <u-icon class="backIcon" name="arrow-down" size="32" color="#9D9D9D"></u-icon>
                        <u-icon class="backIcon" name="arrow-up" size="32" color="#9D9D9D"></u-icon>
                    </view>
                </view>
                <view class="colorE1432E fz28 PT10">
                    op备注: 
                </view>
            </view>
            <view class="bjLine"></view>
            <view class="PX30 PB20">
                <view class="MT15 itiner-xincheng row items-center">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875112655075900.png"/>
                    <view class="itiner-xincheng-left ML30 MR30 fz26">行程天数</view>
                    <view class="itiner-xincheng-right fz28 row items-center"> 7<text class="ML10 MR10">天</text> 6 <tetx class="ML10 MR10">晚</tetx> 跟团游 <view class="ML30 MR10">行程下载</view></view>
                </view>
                <view class="MT10 itiner-xincheng row items-center">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875112698474332.png"/>
                    <view class="itiner-xincheng-left ML30 MR30 fz26">出发城市</view>
                    <view class="itiner-xincheng-right fz28 row items-center">上海</view>
                </view>
            </view>
            <view class="bjLine"></view>
            <view class="PX30">
                <view class="PY20 row justify-between items-center">
                    <view class="row items-center">
                        <view class="itiner-left-line">&nbsp;</view>
                        <text class="fz32 fontBold ML20">报名清单</text>
                    </view>
                    <view>
                        <u-icon class="backIcon" name="arrow-down" size="32" color="#9D9D9D"></u-icon>
                        <u-icon class="backIcon" name="arrow-up" size="32" color="#9D9D9D"></u-icon>
                    </view>
                </view>
                <view class="">
                    <view class="fz28">本团机位</view>
                    <view class="fz28 PT15 PB20">报名人数</view>
                </view>
            </view>
            <view class="bjLine"></view>
            <view class="PX30">
                <view class="PY20 row justify-between items-center">
                    <view class="row items-center">
                        <view class="itiner-left-line">&nbsp;</view>
                        <text class="fz32 fontBold ML20">本团卖店</text>
                    </view>
                    <view>
                        <u-icon class="backIcon" name="arrow-down" size="32" color="#9D9D9D"></u-icon>
                        <u-icon class="backIcon" name="arrow-up" size="32" color="#9D9D9D"></u-icon>
                    </view>
                </view>
                <view class="">
                    <view class="fz28"></view>
                    <view class="fz28 PB20" style="color: #7B7B7B;">暂未填写</view>
                </view>
            </view>
            <view class="bjLine"></view>
            <view class="PX30">
                <view class="PY20 row justify-between items-center">
                    <view class="row items-center">
                        <view class="itiner-left-line">&nbsp;</view>
                        <text class="fz32 fontBold ML20">航班信息</text>
                    </view>
                    <view>
                        <u-icon class="backIcon" name="arrow-down" size="32" color="#9D9D9D"></u-icon>
                        <u-icon class="backIcon" name="arrow-up" size="32" color="#9D9D9D"></u-icon>
                    </view>
                </view>
                <view class="">
                    <view class="fz28"></view>
                    <view class="fz28 PB20" style="color: #7B7B7B;">暂未航班信息</view>
                </view>
            </view>
            <view class="bjLine"></view>
            <view class="PX30 itiner-titleBox row items-center justify-between">
                <view class="itiner-title-c fz30"
                :class="[current==item.ID?'active':'']"
                v-for="(item,index) in titlesList"
                :key="index">
                    {{ item.Name }}
                </view>
            </view>
            <view class="PX30" id="title1">
                <view class="PY20 row items-center">
                    <view class="itiner-left-line">&nbsp;</view>
                    <text class="fz32 fontBold ML20">行程特色</text>
                </view>
                <view>
                    <img src="" />
                </view>
            </view>
            <view class="PX30" id="title2">
                <view class="PY20 row items-center">
                    <view class="itiner-left-line">&nbsp;</view>
                    <text class="fz32 fontBold ML20">行程介绍</text>
                </view>
                <view>
                    <img src="" />
                </view>
            </view>
            <view class="PX30" id="title3">
                <view class="PY20 row items-center">
                    <view class="itiner-left-line">&nbsp;</view>
                    <text class="fz32 fontBold ML20">费用说明</text>
                </view>
                <view class="PB20">
                    <text class="itiner-feiyong">费用包含</text>
                </view>
                <view  class="PB20">
                    <view class="fz26"></view>
                </view>
                <view class="PB20">
                    <text class="itiner-feiyong">费用不包含</text>
                </view>
                <view  class="PB20">
                    <view class="fz26"></view>
                </view>
            </view>
            <view class="PX30" id="title4">
                <view class="PY20 row items-center">
                    <view class="itiner-left-line">&nbsp;</view>
                    <text class="fz32 fontBold ML20">预定须知</text>
                </view>
                <view class="PB20">
                    <text class="itiner-win">重要提示</text>
                </view>
                <view  class="PB20">
                    <view class="fz26"></view>
                </view>
                <view class="PB20">
                    <text class="itiner-tisp">温馨提示</text>
                </view>
                <view  class="PB20">
                    <view class="fz26"></view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script>
export default {
    data() {
        return {
            scrollTop: 100,
            old: {
                scrollTop: 0
            },
            boxOption: 0,
			titleStyle: {
				opacity: 0,
			},
            imgsList: [
                {
                    url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829612454395.png',
                    Path: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829612454395.png',
                },
                {
                    url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829612454395.png',
                    Path: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829612454395.png',
                },
            ],
            titlesList:[{
                    Name: '行程特色',
                    ID: 1,
                    val: 'title1',
                    top: 0,
                },
                {
                    Name: '7日行程',
                    ID: 2,
                    val: 'title1',
                    top: 0,
                },
                {
                    Name: '费用说明',
                    ID: 3,
                    val: 'title3',
                    top: 0,
                },
                {
                    Name: '预定须知',
                    ID: 4,
                    val: 'title4',
                    top: 0,
                },
            ],
            current: 1,
        }
    },
    computed: {

    },
    created() {

    },
    onLoad(options) {

    },
    onShow() {
        let that = this;
        uni.getSystemInfo({
            success(res) {
                that.titleStyle = {
                    height: "45px",
                    paddingTop: `${res.statusBarHeight}px`,
                    opacity: "0",
                };
            },
        });
    },
    mounted() {

    },
    methods: {
        goback() {
            uni.navigateBack({
                delta: 1,
            });
        },
        openPicture() {
				let imgObj = JSON.stringify(this.imgsList);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj,
				});
			},
        scroll(e) {
            this.old.scrollTop = e.detail.scrollTop
            this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
            this.titleStyle.opacity =
                e.detail.scrollTop - 100 < 0 ?
                0 :
                Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
                1 :
                Math.floor(e.detail.scrollTop - 100) / 100;
            this.$forceUpdate();
        },
    },
}
</script>