<template>
	<view class="content">
		<view class="gxjtop">
			<image :src="getUrl(datastypeimg)" class="gxjtopimg" mode="widthFix"></image>
		</view>
		<view class="gxjcenter">
			<!-- <image :src="getImg('ra-xcx-xc-title-deco.png')" class="xctitleimg" mode=""></image> -->
			<view class="xctop">
				<view class="xctitle">{{defaultValue}}</view>
				<view class="xcdzckAll">
					<!-- <view class="xcdzcklist">
						<image :src="getImg('ra-xcx-xc-title-dianzan.png')" class="xcdzcklistimg" mode=""></image>
						<view class="xcdzcklistname">{{giveLike}}人赞</view>
					</view> -->
					<view class="xcdzcklist">
						<image :src="getImg('ra-xcx-xc-title-liulan.png')" class="xcdzcklistimg" mode=""></image>
						<view class="xcdzcklistname">{{browse}}人已浏览</view>
					</view>
				</view>
			</view>
			<view class="xcdzms" v-if="feature == ''||feature == null||feature == undefined">
				登高、漫步、骑行，这个秋日假期给疲惫的身心来一次洗礼，感受山水带来的那份怡然自得吧！
			</view>
			<view class="xcdzms" v-if="feature != ''&&feature != null&&feature != undefined">
				{{feature}}
			</view>
			<view class="xllistAll">
				<view class="xllist" v-for="(el,ind) in datas" :key="ind">
					<view class="xllistts">
						<view class="xllisttsleft">D{{el.days}}</view>
						<view class="xllisttsright">出发啦~</view>
					</view>
					
					<view  v-for="(el1,ind1) in el.data.scenic" :key="ind1" v-if="el.data.scenic.length > 0">
						<view class="xllistbt">
							<view class="xllistbtleft"><view class="xllistbtleft1"></view></view>
							<view class="xllistbtright" v-if="ind1==0">虞山<text class="xllistbtrighttext">></text>{{el1.name}}</view>
							<view class="xllistbtright" v-if="ind1!=0 && ind1<el.data.scenic.length">{{el.data.scenic[ind1 - 1].name}}<text class="xllistbtrighttext">距离</text>{{el.data.scenic[ind1].name}}<text class="jlstyle">{{el.data.scenic[ind1].distanceToPreviousScenic}}</text></view>
						</view>
						
						<view class="xllistdw"  @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
							<image :src="getImg('ra-xcx-xc-list-icon-jingdian.png')" class="xllistdwleft" mode=""></image>
							<view class="xllistdwright">
								<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
								<view class="xllistsjall">
									<view class="xllistsjname">{{el1.name}}</view>
									<view class="xllistsjjy" v-if="el1.consume">人均预算{{el1.consume}}元</view>
									<view class="xllistsjjy" v-if="el1.address">地址:{{el1.address}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="xllistdw" v-if="el.data.food.length > 0">
						<image :src="getImg('ra-xcx-xc-list-icon-canyin.png')" class="xllistdwleft" mode=""></image>
						<view class="xllistoverflow canyinlist">
							<view class="xllistdwright active" v-for="(el1,ind1) in el.data.food" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
								<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
								<view class="xllistsjall active">
									<view class="xllistsjname">{{el1.name}}</view>
									<view class="xllistsjjy">地址:{{el1.address}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="xllistdw" v-if="el.data.stay.length > 0">
						<image :src="getImg('ra-xcx-xc-list-icon-zhusu.png')" class="xllistdwleft" mode=""></image>
						<view class="xllistoverflow">
							<view class="xllistdwright active" v-for="(el1,ind1) in el.data.stay" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
								<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
								<view class="xllistsjall active">
									<view class="xllistsjname">{{el1.name}}</view>
									<view class="xllistsjjy">地址:{{el1.address}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="xllistdw" v-if="el.data.cate.length > 0">
						<image :src="getImg('ra-xcx-xc-list-icon-meishi.png')" class="xllistdwleft" mode=""></image>
						<view class="xllistoverflow canyinlist">
							<view class="xllistdwright active" v-for="(el1,ind1) in el.data.cate" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
								<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
								<view class="xllistsjall active">
									<view class="xllistsjname">{{el1.name}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="xllistdw" v-if="el.data.swim.length > 0">
						<image :src="getImg('ra-xcx-xc-list-icon-youli.png')" class="xllistdwleft" mode=""></image>
						<view class="xllistoverflow">
							<view class="xllistdwright active" v-for="(el1,ind1) in el.data.swim" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
								<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
								<view class="xllistsjall active">
									<view class="xllistsjname">{{el1.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="xllistline"></view>
			</view>
			<prompt :visible.sync="promptVisible" :defaultValue="defaultValue" @confirm="clickPromptConfirm" mainColor="#0078D7">
			  <!-- 这里放入slot内容-->
			</prompt>
		</view>
		<view class="fixedstyle" v-if="isShow">
			<view class="sousuo">
				<image :src="getImg('ra-xczs-icon-sousuo.png')" class="sousuoimg" mode=""></image>
				<input type="text" value="" placeholder="输入关键词搜索景点" class="sousuoinput" />
			</view>
			<view class="wodeAll">
				<view class="wodelist" v-for="(el,ind) in jqdatas" :key="ind">
					<image :src="getUrl(el.img)" class="wodelistimg" mode=""></image>
					<view class="wodeleft">
						<view class="wodelistname">{{el.scenicName}}</view>
						<view class="wodelistnr">位于虞山市飞云江北岸的红…</view>
						<view class="wodelisttitle">建议游玩1.5小时</view>
					</view>
					<image :src="getImg('ra-xczs-icon-zengjia.png')" v-if="ind != jqdatasIndex" class="wodelisttj" @click="addjdddclick(ind)" mode=""></image>
					<image :src="getImg('ra-xczs-icon-xuanze.png')" v-if="ind == jqdatasIndex" class="wodelisttj" mode=""></image>
				</view>
			</view>
			<view class="fotter">
				<view class="fotterleft">已选择{{jdnum}}个景点</view>
				<view class="fotterright" @click="qdclick">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	var web = require('@/components/utils/request.js');
	import Prompt from '@/components/prompt/index.vue'
	export default{
		components: {
		    Prompt
		},
		data(){
			return{
				id: 0,
				playDays: 2,//游玩天数
				playAdults: 1,//游玩成人数
				playChildren: 1,//游玩儿童数
				stayType: '酒店',//（单选框）住宿需求（酒店，民宿）
				stayDemand: '舒适',//（单选框）住宿条件（高档，舒适，经济）
				foodDemand: '餐饮',//（单选框）餐饮需求（餐饮，农家乐）
				journeyType: '适中',//（单选框）行程类型：  宽松、适中、紧凑
				landscapeDemand: '名城古镇',//(复选框)景观需求 名城古镇、山峰峡谷、历史遗迹、地质奇观、瀑布、森林、梯田、田园村寨、博物馆、商业街、夜游、运动
				scenicSpotDemand: '不限',//	(单选框)景点需求：不限、必去、非必去
				fitTraffic: '自驾游',//(复选框)适合的交通方式：自驾游、高铁游、公交游、骑行游
				scenicConsume: '500',//	游玩总天数景区人均总预算
				stayConsume: '500',//游玩总天数住宿人均总预算
				foodConsume: '500',//	游玩总天数餐饮人均总预算
				promptVisible: false,// 控制弹框输入框显示
				defaultValue: '',
				datas: [],
				datasIndex: 0,
				jqdatasIndex: -1,
				jdnum: 0,
				jqdatas: [],
				isShow: false,
				browse: 0,//浏览数
				giveLike: 0,//点赞数
				feature: '',//描述
                datastypeimg:''
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'menu') {// 来自页面内分享按钮
		      console.log(res)
		    }
		    return {
				title: '分享行程',
				path: '/pagesys/xczs/edit?id=' + this.id
		    }
		},
		onLoad(option) {
			// uni.showToast({title:"线路生成中",icon:"none"});
			this.id = option.id;
			this.getData();
			this.getData1();
			this.dzllclick(1);
			uni.showShareMenu();
		},
		methods:{
			getUrl(url) {
				return 'https://cs.tour-ma.com/' + url;
			},
			getImg(url) {
				return 'https://cs.tour-ma.com/r/cms/www/m/yushan/' + url;
			},
			nato(url){
				uni.navigateTo({
					url:url
				})
			},
			getData: function() {
				var url = '/journey/check.jspx';
				var para = {id: this.id};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if(res.data.status == 200) {
						// uni.showToast({title:res.data.message,icon:"none"});
						for(var i = 0;i<res.data.data.length;i++) {
                            that.datastypeimg= res.data.data[i].typeImg;
							that.defaultValue = res.data.data[i].journeyName;
							that.datas = res.data.data[i].userJourney;
							that.browse = res.data.data[i].browse;
							that.giveLike = res.data.data[i].giveLike;
							that.feature = res.data.data[i].feature;
						}
						console.log(that.datas);
					}else{
						uni.showToast({title:res.data.message,icon:"none"});
						uni.navigateTo({
							url:'/pagesys/xczs/biaoqian?playDays='+that.playDays+'&playAdults='+that.playAdults+'&playChildren='+that.playChildren
						})
					}
				});
			},
			getData1: function() {
				var url = '/journey/v_scenicData.jspx';
				var para = {};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if(res.data.status == 200) {
						// uni.showToast({title:res.data.message,icon:"none"});
						that.jqdatas = res.data.data;
						console.log(that.jqdatas);
					}else{
						uni.showToast({title:res.data.message,icon:"none"});
					}
				});
			},
			clickPromptConfirm(val) {
				this.defaultValue = val;
				this.promptVisible = false;
				var url = '/journey/v_update.jspx';
				var para = {
					id:this.id,journeyName: this.defaultValue,userJourney: this.datas,isOfficial: 0
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if(res.data.status == 200) {
						uni.showToast({title:'修改行程成功！',icon:"none"});
						uni.navigateTo({
							url:'/pagesys/xczs/wode'
						})
					}else{
						uni.showToast({title:res.data.message,icon:"none"});	
					}
				});
			},
			saveData: function() {
				this.promptVisible = true;
			},
			addjdclick: function(ind) {
				this.datasIndex = ind;
				this.isShow = true;
			},
			addjdddclick: function(ind) {
				this.jqdatasIndex = ind;
				this.jdnum = 1;
			},
			qdclick: function() {
				this.isShow = false;
				if(this.jqdatasIndex != -1) {
					this.datas[this.datasIndex].data.scenic.push(this.jqdatas[this.jqdatasIndex]);
				}
				this.jqdatasIndex = -1;
				this.jdnum = 0;
				console.log(this.datas);
			},
			
			delclick: function(ind,ind1) {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除此景点吗？',
				    success: function (res) {
				        if (res.confirm) {
				            that.datas[ind].data.scenic.splice(ind1,1);
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			dzllclick: function(type) {
				var url = '/journey/v_giveLike.jspx';
				var para = {
					id:this.id,type: type
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if(res.data.status == 200) {
						// uni.showToast({title:'成功！',icon:"none"});
						that.getData();
					}else{
						uni.showToast({title:res.data.message,icon:"none"});	
					}
				});
			}
		}
	}
</script>

<style>
	@font-face {
	    font-family: Medium;
	    src: url('https://ys.tour-ma.com/r/cms/www/m/yushan/SOURCEHANSANSCN-MEDIUM_1.OTF');
	}
	@font-face {
	    font-family: Regular;
	    src: url('https://ys.tour-ma.com/r/cms/www/m/yushan/SOURCEHANSANSCN-REGULAR_1.OTF');
	}
	.content{width: 750upx;height: 100vh;position: relative;}
	.gxjtop {width: 750upx;height: 488upx;position: relative;}
	.gxjtopimg {width: 750upx;height: 488upx;}
	.gxjcenter {width: 690upx;background: linear-gradient(0deg, #FFFFFF 0%, #F5F6F7 100%);border-radius: 44rpx 44rpx 0px 0px;padding: 0upx 30upx 70upx 30upx;position: relative;top: -120upx;}
	.xctop {height: auto;position: relative;}
	.xctitleimg {width: 750upx;height: 198upx;position: absolute;top: 0upx;left: 0upx;}
	.xctitle {font-size: 40upx;font-family: Medium;font-weight: 500;color: #272829;position: relative;padding: 40upx 0upx 0upx 0upx;}
	.xcdzckAll {overflow: hidden;position: relative;margin: 20upx 0upx 0upx 0upx;}
	.xcdzcklist {float: left;border-right: 1upx solid #BBBBBB;padding: 0upx 21upx 0upx 0upx;}
	.xcdzcklistimg {width: 34upx;height: 34upx;float: left;margin: 3upx 0upx 0upx 0upx;}
	.xcdzcklistname {font-size: 28upx;font-family: Regular;font-weight: 400;color: #666666;opacity: 0.92;float: left;margin: 0upx 0upx 0upx 15upx;}
	.xcdzcklist:last-child {border: none;/* padding: 0upx 0upx 0upx 31upx; */}
	.xcdzms {font-size: 26upx;font-family: Regular;font-weight: 400;color: #666666;line-height: 44upx;margin: 0upx 0upx 51upx 0upx;}
	.xllistAll {position: relative;}
	.xllistline {width: 2upx;height: 100%;position: absolute;top: 0upx;background: #DDDDDD;left: 33upx;}
	.xllist {}
	.xllistts {overflow: hidden;position: relative;}
	.xllisttsleft {width: 68upx;height: 68upx;background: #0078D7;border-radius: 50%;float: left;font-size: 32upx;font-family: Medium;font-weight: 500;color: #FFFFFF;text-align: center;line-height: 68upx;position: relative;z-index: 1;}
	.xllisttsright {font-size: 36upx;font-family: Medium;font-weight: 500;color: #272829;float:left;margin: 0upx 0upx 0upx 23upx;line-height: 68upx;}
	.xllistbt {overflow: hidden;}
	.xllistbtleft {width: 20upx;height: 20upx;background: #FFFFFF;position: relative;border-radius: 50%;float: left;margin: 40upx 0upx 0upx 24upx;position: relative;z-index: 1;}
	.xllistbtleft1 {width: 14upx;height: 14upx;background: #B6B6B6;border-radius: 50%;position: absolute;top: 3upx;left: 3upx;}
	.xllistbtright {float: left;font-size: 24upx;font-family: Regular;font-weight: 400;color: #999999;margin: 30upx 0upx 0upx 49upx;}
	.xllistbtrighttext {margin: 0upx 10upx;}
	.xllistdw {overflow: hidden;padding: 0upx 0upx 18upx 0upx;}
	.xllistdwleft {width: 68upx;height: 68upx;float: left;margin: 96upx 0upx 0upx 0upx;position: relative;z-index: 1;}
	.xllistdwright {width: 568upx;height: 146upx;background: #FFFFFF;box-shadow: 0px 0px 18upx 0px rgba(0, 0, 0, 0.08);border-radius: 8upx;float: left;margin: 41upx 0upx 10upx 23upx;padding: 15upx;position: relative;}
	.xllistsjimg {width: 200upx;height: 146upx;border-radius: 8upx 0upx 0upx 8upx;float: left;}
	.xllistsjall {float: left;margin: 0upx 0upx 0upx 25upx;width: 336upx;}
	.xllistsjname {font-size: 30upx;font-family: Medium;font-weight: 500;color: #333333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;margin: 17upx 0upx 0upx 0upx;}
	.xllistsjjy {font-size: 24upx;font-family: Regular;font-weight: 400;color: #666666;margin: 25upx 0upx 0upx 0upx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
	.xllistsjimgjs {width: 36upx;height: 36upx;position: absolute;top: 70upx;right: 20upx;}
	.jlstyle {font-size: 24upx;font-family: Medium;font-weight: 500;color: #272829;margin: 0upx 0upx 0upx 15upx;}
	.zjystyle {float: left;width: 568upx;height: 158upx;background: rgba(0, 120, 215, 0.04);border: 1upx solid #0078D7;border-radius: 8upx;float: left;margin: 41upx 0upx 0upx 23upx;padding: 15upx;}
	.zjystylename {font-size: 28upx;font-family: Medium;font-weight: 500;color: #333333;}
	.zjystylevalue {font-size: 24upx;font-family: Regular;font-weight: 400;color: #999999;line-height: 36upx; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;margin: 9upx 0upx 0upx 0upx;}
	.bottom {width: 280upx;height: 84upx;background: #0078D7;box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.14);border-radius: 42upx;text-align: center;line-height: 84upx;font-size: 32upx;font-family: Medium;font-weight: 500;color: #FFFFFF;position: fixed;bottom: 45upx;left: 235upx;cursor: pointer;}
	.ztscimg {width: 40upx;height: 40upx;position: absolute;right: 30upx;top: 12upx;}
	.tjjd {float: right;margin: 30upx 0upx 0upx 0upx;}
	.tjjdimg {width: 28upx;height: 28upx;float: left;margin: 8upx 0upx 0upx 0upx;}
	.tjjdname {font-size: 28upx;font-family: Regular;font-weight: 400;color: #0078D7;margin: 0upx 0upx 0upx 6upx;float: left;}
	.fixedstyle {width: 750upx;height: 100vh;position: absolute;top: 0upx;left: 0upx;z-index: 9999;background: url('https://ys.tour-ma.com/r/cms/www/m/yushan/ra-xcx-bg-3qiu.png') no-repeat #FFFFFF;background-size: 100% 100%;}
	.sousuo {width: 690upx;height: 72upx;background: #F5F5F5;border-radius: 36upx;position: relative;overflow: hidden;padding: 0upx 0upx 0upx 0upx;margin: 34upx auto 40upx auto;}
	.sousuoimg {width: 38upx;height: 38upx;float: left;margin: 17upx 0upx 0upx 27upx;}
	.sousuoinput {float: left;font-size: 28upx;font-family: Regular;font-weight: 400;color: #B8B8B8;margin: 0upx 0upx 0upx 22upx;width: 540upx;height: 68upx;line-height: 68upx;}
	.wodeAll {width: 690upx;margin: 0upx auto 70upx auto;padding: 0upx 0upx 0upx 0upx;}
	.wodelist {width: 660upx;height: 170upx;background: #FFFFFF;box-shadow: 0px 0px 18upx 0px rgba(0, 0, 0, 0.08);border-radius: 8upx;padding: 15upx;margin: 0upx 0upx 20upx 0upx;position: relative;}
	.wodelistimg {float: left;width: 200upx;height: 170upx;border-radius: 8upx 0upx 0upx 8upx;}
	.wodeleft {float: left;margin: 0upx 0upx 0upx 20upx;width: 390upx;}
	.wodelistname {font-size: 32upx;font-family: Medium;font-weight: 500;color: #333333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;margin: 20upx 0upx 10upx 0upx;}
	.wodelistnr {font-size: 24upx;font-family: Regular;font-weight: 400;color: #999999;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;margin: 10upx 0upx 0upx 0upx;}
	.wodelisttitle {font-size: 24upx;font-family: Regular;font-weight: 400;color: #D8A04B;margin: 10upx 0upx 0upx 0upx;}
	.wodelisttj {width: 36upx;height: 36upx;position: absolute;top: 82upx;right: 20upx;}
	.fotter {overflow: hidden;width: 750upx;height: 90upx;background: #FFFFFF;border: 1upx solid #EEEEEE;box-shadow: 0upx 0upx 30upx 0upx rgba(0, 0, 0, 0.14);position: fixed;bottom: 0upx;left: 0upx;z-index: 1;}
	.fotterleft {font-size: 28upx;font-family: Regular;font-weight: 400;color: #999999;float: left;margin: 24upx 0upx 0upx 32upx;}
	.fotterright {width: 124upx;height: 52upx;background: #0078D7;border-radius: 26upx;font-size: 24upx;font-family: Regular;font-weight: 400;color: #FFFFFF;text-align: center;line-height: 52upx;margin: 19upx 30upx 0upx 0upx;float: right;}
	.xllistoverflow {display: flex;overflow-x: auto;}
	.xllistdwright.active {height: auto;}
	.canyinlist .xllistsjimg{width: 100%;}
</style>
