<template>
	<view class="container">
		<view class="app-content">
			<Navbar :title="gasDetail.fMc" canBack></Navbar>
			<!-- <u-navbar title="15KG 液化石油气" autoBack :safeAreaInsetTop="true" placeholder fixed></u-navbar> -->
			<view class="swiperCss">
				<u-swiper :list="coverImg" @change="e => current = e.current" imgMode="heightFix" :autoplay="true" height="350"
					indicatorStyle="right: 20px">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in coverImg" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<!-- 商品简介 -->
			<view class="introduceCardCss">
				<view class="flex flex-direction margin">
					<view class="themeColor themeFs text-bold margin-top">
						￥{{gasDetail.fJg || ""}}
					</view>
					<view class="text-lg text-bold margin-top-xs margin-left-xs">
						{{gasDetail.fMc || ""}}
					</view>
				</view>
				<view class="flex padding-sm text-gray">
					<view class="flex justify-center w50">
						<u-icon name=""></u-icon>
						<view class="flex justify-center align-center overflow-one-lines">
							销量：{{gasDetail.salesVolume}}件
						</view>
					</view>
					<view class="flex justify-center w50">
						<u-icon name=""></u-icon>
						<view class="flex justify-center align-center overflow-one-lines">
							<!-- 状态：{{gasDetail.fSfsj || ""}} -->
						</view>
					</view>
				</view>
			</view>
			<!-- 配送 -->
			<view class="deliveryCardCss">
				<!-- <view class="flex justify-around align-center">
					<view class="leftCss text-gray margin-sm">
						选择
					</view>
					<view class="centerCss margin-left-xl">
						已选：15KG 液化石油气
					</view>
					<view class="rightCss">
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view> -->
				<!-- <view class="flex justify-around align-center">
					<view class="leftCss text-gray margin-sm">
						配送
					</view>
					<view class="centerCss flex flex-direction align-start justify-center margin-left-xl">
						<view class="flex align-center">
							<u-icon name="map"></u-icon>
							<view class="text-gray text-sm">
								湖北省武汉市洪山区青菱街道青菱寺白
							</view>
						</view>
						<view class="text-xs">
							店门发货由专业配送人员进行上门配送服务
						</view>
					</view>
					<view class="rightCss">
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view> -->
				<view class="flex justify-around align-center">
					<view class="leftCss text-gray margin-sm">
						服务
					</view>
					<view class="centerCss margin-left-xl">
						确保气瓶安全、合格、合规
					</view>
				</view>
			</view>
			<!-- 气瓶详情 -->
			<view class="gasDetailsCardCss">
				<titleSecion title="详情" bgColor="#ED261E"></titleSecion>
				<!-- <view class="" :v-text="html"> -->
					<u-parse :content="content"></u-parse>
				</view>
			</view>
			<!-- 底部栏 -->
			<view class="bomBarCss">
				<view class="flex justify-between align-center">
					<view class="leftCss">
						<view class="flex flex-direction justify-between align-center margin-sm" @click="goHome">
							<u-image  src="/static/images/home/home.png"  mode="widthFix" width="30px" height="30px"></u-image>
							<view class="text-sm">
								首页
							</view>
						</view>
						<view class="flex flex-direction justify-between align-center margin-sm" @click="goToStoreListPage">
							<u-image width="30px" height="30px" mode="widthFix" src="/static/images/home/shop.png"></u-image>
							<view class="text-sm">
								店铺
							</view>
						</view>
						<view class="flex flex-direction justify-between align-center margin-sm">
							<u-image width="30px" height="30px" mode="widthFix" src="/static/images/home/collection.png"></u-image>
							<view class="text-sm">
								收藏
							</view>
						</view>
					</view>
					<view class="rightCss">
						<u-button color="#EA5504" @click="goOrderPage">立即订气</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const { Base64 } = require('js-base64');
	import titleSecion from '@/components/titleSection/titleSection.vue';
	export default {
		components: {
			titleSecion
		},
		props: {

		},
		data() {
			return {
				current: 0,
				coverImg:[],
				content: "",
				qpid: "",
				gasDetail:{},
				formData: {
					current: 1,
					size: 10,
				},
			}
		},
		computed: {

		},
		onPullDownRefresh() {
			this.gasDetail = {}
			//调用获取数据方法
			this.getGasDetail()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onLoad(data) {
			if (data.qpid) {
				this.qpid = data.qpid
			}
			// this.getGasDetail()
		},
		onShow() {
			this.getGasDetail()
		},
		methods: {
			async getGasDetail() {
				let query = { id:this.qpid };
				const result = await this.$api.memberApi.getwQplxDetail(query);
				let {code,value} = result;
				if(code === 200){
					this.gasDetail = value;
					let JsonParse = JSON.parse(value.fTp);
					// let photoUrl = await this.$getPhotoUrl(JsonParse[1].response.fileId);
					let photoUrl = await this.$getPhotoUrl(JsonParse);
					this.content = Base64.decode(this.gasDetail.fJs);
					this.coverImg = photoUrl;
					console.log("图片",this.coverImg);
				}
			},
			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			goToStoreListPage() {
				uni.navigateTo({
					url: '/pages/home/storeList'
				})
			},
			goOrderPage() {
				uni.navigateTo({
					url: "/pages/home/placeOrder?qpid="+this.gasDetail.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom:60px;
	}

	.swiperCss {}

	.app-content {
		position: relative;
	}

	.introduceCardCss {
		background: #fff;
		border-radius: 15px;
		margin: 10px;
	}

	.deliveryCardCss {
		border-radius: 15px;
		background: #fff;
		margin: 10px;
		padding: 10px;

		.leftCss {
			width: 10%;
		}

		.centerCss {
			width: 80%;
		}

		.rightCss {
			width: 10%
		}
	}

	.gasDetailsCardCss {
		border-radius: 15px;
		background: #fff;
		margin: 10px;
		padding: 10px;

		.vertical-line {}

		.vertical-line::after {
			content: '';
			border-left: 2px solid black;
			/* 竖线的样式 */
		}
	}

	.bomBarCss {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #ffffff;

		.leftCss {
			display: flex;
			width: 45%;
		}

		.rightCss {
			display: flex;
			width: 55%;
			margin: 10px;
		}
	}

	/deep/.bomBarCss .u-button {
		border-radius: 10px !important;
	}


	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>