<template>
	<view class="container">
		<view class="top">

			<view class="t-title">{{arr.title}}</view>
			<view class="t-xtitle">随时退 | 过期退 | 需预约</view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in arr.imageList" :key="index" style="border-radius: 6px;"
					@click="getcarPics(index)">
					<view class="swiper-box">
						<image :src="baseUrl + item"></image>
					</view>
				</swiper-item>
			</swiper>
			<u-overlay :show="show" @click="this.show = false">
				<view class="top-x">
					<text>X</text>
				</view>
				<view class="warp">
					<view class="jtou1" @click.stop="getsyt()">
						<uni-icons type="left" size="30" color="#fffff"></uni-icons>
					</view>
					<movable-area style="width: 80%; height: auto;">
						<movable-view :x="x" :y="y" direction="all" @change="onChange" class="ma-img" scale="true">
							<image :src="xzimg" mode="aspectFit"></image>
						</movable-view>
					</movable-area>

					<view class="jtou" @click.stop="getxyt()">
						<uni-icons type="right" size="30" color="#fffff"></uni-icons>
					</view>
				</view>
			</u-overlay>
			<view class="dis">
				<text>评价</text>
				<uni-rate :touchable="false" size="18" :value="5" @change="onChange" />
			</view>
			<view class="dis">
				<text class="senju">￥{{arr.realPrice}}</text>
				<text v-if="arr.realPrice != arr.originalPrice " class="xhui"
					style="text-decoration:line-through">{{arr.originalPrice}}</text>
			</view>
			<view class="bqing" v-if="arr.isSpecial != 0">
				<text>特价商品</text>
			</view>
			<view class="flex-row justify-between align-center">
				<view>
					<view class="dis">
						<view class="characters">优惠</view>
						<view class="z-box">
							<text>折</text>
						</view>
						<view class="characters">白银会员{{arrdata.silver}}折</view>
					</view>
					<view class="dis">
						<view class="characters">优惠</view>
						<view class="z-box">
							<text>折</text>
						</view>
						<view class="characters">黄金会员{{arrdata.gold}}折</view>
					</view>
					<view class="dis">
						<view class="characters">优惠</view>
						<view class="z-box">
							<text>折</text>
						</view>
						<view class="characters">白金会员{{arrdata.platinum}}折</view>
					</view>
				</view>
				<view>
					<u-button text="升级会员" :customStyle="{color:'#ffffff',width:'200rpx'}"
						@click="this.$tab.navigateTo('/pages/tabBar/mine/Recharge')" throttleTime="1000"
						color="linear-gradient(to right, rgb(248, 80, 33), rgb(248, 122, 19))"></u-button>
				</view>
			</view>
		</view>
		<!-- 详情区域 -->
		<view class="content">
			<view class="t-title">详情</view>

			<u-parse :content="arr.goodsDesc" :tagStyle="style"></u-parse>

		</view>
		<view style="width: 100%; height: 50px;"></view>
		<view class="content-bottom">
			<view class="senju">￥{{arr.realPrice}}</view>
			<view class="janniu" @click="getorder(arr.id)">
				<text>立即支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carPicsindex: 0,
				xzimg: "",
				show: false,
				arr: {},
				style: {
					img: 'width: 100%;margin: 10px auto'
				},
				arrdata: {},
				baseUrl: getApp().globalData.config.baseUrl,
				htmlUrl: getApp().globalData.config.htmlUrl,
				id: '',
				descriptionStr: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				rateValue: 0, //评分
			}
		},
		onLoad(option) {
			this.id = option.id

			// 模拟动态赋值
			setTimeout(() => {
				this.rateValue = 3
			}, 1000)
		},
		onShow() {
			this.getdetails()
		},
		methods: {
			getsyt() {
				let lenghts = this.arr.imageList.length
				console.log('a', this.carPicsindex);
				if (this.carPicsindex != 0) {
					this.carPicsindex--
				} else {
					uni.showToast({
						title: '没有上一张了！',
						icon: 'none'
					})
					return
				}
				this.xzimg = this.baseUrl + this.arr.imageList[this.carPicsindex]
			},
			getxyt() {
				let lenghts = this.arr.imageList.length
				if (lenghts >= this.carPicsindex) {
					this.carPicsindex++
				} else {
					uni.showToast({
						title: '已经是最后一张了！',
						icon: 'none'
					})
					return
				}
				this.xzimg = this.baseUrl + this.arr.imageList[this.carPicsindex]
			},
			getcarPics(index) {
				// console.log(this.carPics[index]);
				this.carPicsindex = index
				this.show = true
				this.xzimg = this.baseUrl + this.arr.imageList[index]

			},
			async getdetails() {
				console.log(this.id);
				const res = await this.$request({
					url: '/system/repaiGoods/' + this.id,
				})
				console.log('获取我的详情页', res);
				this.arr = res.data

				this.getorderx()
				// this.arr.goodsDesc = this.handleDeschtml(this.arr.goodsDesc)
			},
			//获取支付页信息
			async getorderx() {

				console.log('123123123', this.arr);
				const res = await this.$request({
					url: '/orderApi/orderDetail?goodsId=' + this.arr.id + '&type=qx',
				})
				console.log('获取支付页信息', res);
				this.arrdata = res.data
				// if(res.data == 11111111 ){
				// 	uni.navigateTo({
				// 		url:'/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
				// 	})
				// }
			},
			getorder(id) {
				console.log('111');
				uni.navigateTo({
					url: '/subRepairPages/order/order?id=' + id
				})
			},
			handleDeschtml(detail) {
				// while(detail.indexOf('src="/')>=0){
				//  detail = detail.replace('src=/"','src="'+this.htmlUrl+"/")
				// }
				// return detail
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},

			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-x {
		width: 90%;
		margin: 0 auto;
		height: 60px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: white;
		font-size: 22px;
	}

	.warp {
		width: 100%;
		margin: 60px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;


	}

	.container {
		box-sizing: border-box;
		background-color: #F4F4F4;
	}

	.top {
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		background-color: white;
		margin-bottom: 10px;
	}

	.content {
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		background-color: white;
	}

	.content-bottom {
		box-sizing: border-box;
		padding: 0px 25px;
		height: 50px;
		background-color: white;
		position: fixed;
		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.swiper-box {
		width: 100%;
		height: 175px;
		background-color: powderblue;
		border-radius: 6px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dis {
		margin-top: 15px;
		display: flex;
		align-items: center;
	}

	.t-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10px;
	}

	.t-xtitle {
		font-size: 10px;
		font-weight: 400;
		color: #585858;
		margin-bottom: 10px;
	}

	.senju {
		font-size: 24px;
		font-weight: bold;
		color: #F85021;
		margin-right: 15px;
	}

	.xhui {
		font-size: 16px;
		font-weight: 400;
		color: #B5B5B5;
	}

	.bqing {
		width: 60px;
		height: 20px;
		border-radius: 4px;
		background: #FFEAEA;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 12px;
		margin: 15px 0px;
	}

	.characters {
		font-size: 14px;
		font-weight: 400;
		color: #585858;
	}

	.z-box {
		font-size: 12px;
		font-weight: bold;
		// font-style: italic;
		background-color: #F85021;
		color: white;
		box-sizing: border-box;
		padding: 1px 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		margin: 0 10px;
	}

	.janniu {
		width: 90px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F85021;
		color: white;
		font-size: 16px;
		font-weight: bold;
		border-radius: 50px;
	}

	.yban1 {
		width: 40%;
		display: flex;

	}

	.yban {
		width: 60%;
		display: flex;

	}

	.jtou1 {
		position: fixed;
		left: 5px;
		top: 40%;
		z-index: 999;
		color: white;
		font-size: 30px;
		font-weight: bold;
	}

	.jtou {
		position: fixed;
		right: 5px;
		top: 40%;
		z-index: 999;
		color: white;
		font-size: 30px;
		font-weight: bold;
	}

	.ma-img {
		width: 100%;
		height: 260px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>