<template>
	<view class="container">
		<view class="detailsCss">
			<!-- 图片区域 -->
			<!-- <view class="topPhotoCss">
				<u-image class="topPhotoCss" width="100%" height="200px" :src="coverImg[] || ''"></u-image>
			</view> -->
			<view class="swiperCss">
				<u-swiper :list="coverImg" @change="e => current = e.current" :autoplay="true" height="250"
					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="leftBackIconCss" @click="goBack">
				<u-icon name="arrow-left" color="#000" size="20"></u-icon>
			</view>
			<!-- 气站信息 -->
			<view class="detailsCardCss">
				<view class="detailsTopCss">
					<view class="flex pszTagCss align-center margin-top-lg">
						<u-tag :text="storeDetail.fCzlx||''" :bgColor="storeDetail.fCzlx==='储配站'?'#00AEAA':'#5875EB'"
							borderColor="#fff" color="#fff"></u-tag>
						<text class="nameTextCss margin-left-sm text-xl text-bold">{{storeDetail.fCzjc || ""}}</text>
					</view>
					<!-- <view class="flex typeTagCss margin-top-xs">
						<u-tag class="margin-right-sm margin-top-xs" text="充装" bgColor="#FFF6E6" color="#FFB700"
							borderColor="#fff"></u-tag>
						<u-tag class="margin-right-sm margin-top-xs" text="配送" bgColor="#FFF6E6" color="#FFB700"
							borderColor="#fff"></u-tag>
						<u-tag class="margin-right-sm margin-top-xs" text="自提" bgColor="#FFF6E6" color="#FFB700"
							borderColor="#fff"></u-tag>
					</view> -->
					<view class="flex flex-direction">
						<view class="flex align-center margin-top-xs">
							<view class="">
								<u-image src="/static/images/home/localtion.png" mode="aspectFit" width="15px" height="15px"></u-image>
							</view>
							<view class="text-gray margin-left-xs">
								{{storeDetail.fXxdz || ""}}
							</view>
						</view>
						<view class="flex justify-between">
							<view class="">
								<view class="flex align-center margin-top">
									<view class="">
										<u-image src="/static/images/home/yysj.png" width="15px" mode="aspectFit"
											height="15px"></u-image>
									</view>
									<view class="text-gray margin-left-xs">
										{{storeDetail.fYykssj || ""}} ~ {{storeDetail.fYyjssj || ""}}
									</view>
								</view>
								<view class="flex align-center margin-top">
									<view class="">
										<u-image src="/static/images/home/phone.png" width="15px" mode="aspectFit"
											height="15px"></u-image>
									</view>
									<view class="text-gray margin-left-xs">
										{{storeDetail.fCzlxfs || ""}}
										<!-- /{{storeDetail.fCzzj || ""}} -->
									</view>
								</view>
							</view>
							<view class="flex align-center justify-center">
								<view class="margin-xs text-center" @click="handleMap">
									<view class="iconRoundCss">
										<u-icon name="map-fill" color="#EA5504" size="20"></u-icon>
									</view>
									<view class="themeColor margin-top-xs">
										地图
									</view>
								</view>
								<view class="margin-xs text-center" @click="handleCallPhone">
									<view class="iconRoundCss">
										<u-icon name="phone-fill" color="#EA5504" size="20"></u-icon>
									</view>
									<view class="themeColor margin-top-xs">
										电话
									</view>
									<!-- <u-image width="30px" height="30px" shape="circle"></u-image> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-notice-bar :text="text" direction="column" color="#EB5C11" bgColor="#F8EAE3" speed="50"
					url="/pages/componentsB/tag/tag"></u-notice-bar>
			</view>
			<view class="qpCardWrapCss">
				<view class="qpCardCss flex justify-between align-start" v-for="(item,index) in gasBottleList"
					:key="index" @click="goToGasDetail(item)">
					<view class="leftPhotoCss">
						<u-image width="85px" height="85px" radius="10" :src="item.images"></u-image>
					</view>
					<view class="w50 h100 flex flex-direction margin-left-xs justify-between">
						<view class="text-bold text-lg">
							{{item.fMc || ""}}
						</view>
						<view class="text-gray text-sm margin-top-xs margin-top">
							{{item.fMs || ""}}
						</view>
						<!-- <view class="themeColor text-sm margin-top-xs">
						库存：20
					</view> -->
						<!-- <view class="flex margin-top-xs">
							<u-tag :text="item.fSfsj || ''" color="#00AEAA" bgColor="#E6F7F7"
								borderColor="#fff"></u-tag>
						</view> -->
					</view>
					<view class="flex flex-direction">
						<view class="flex flex-direction align-end dgBtnCss" @click.stop="goOrderPage(item)">
							<view class="topBtnCss text-sm">
								订气
							</view>
							<view class="bomBtnCss text-sm">
								在线订
							</view>
						</view>
						<view class="w20 themeColor themeFs text-bold justify-center align-center">
							￥{{item.fJg || ""}}
						</view>
					</view>
				</view>
				<u-empty text="气瓶为空" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
					v-if="!gasBottleList.length"></u-empty>
				<u-loadmore :status="status" marginTop="20" height="10" marginBottom="20" v-else />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/login';
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				text: [
					'为了您和家人的安全，请不要使用过期的石油气钢瓶',
					'温馨提示'
				],
				storeDetail: {},
				gasBottleList: [],
				formData: {
					czid: "",
					current: 1,
					size: 10,
				},
				status: "loadmore",
				total: null,
				coverImg: [],
				current: 0,
			}
		},
		computed: {

		},
		onPullDownRefresh() {
			this.gasBottleList = []
			//调用获取数据方法
			this.formData.current = 1;
			this.getGasbottleList()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			let allTotal = this.formData.current * this.formData.size
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.formData.current++;
				this.status = 'loading';
				setTimeout(() => {
					this.getGasbottleList()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		async onLoad(data) {
			if (data.czid) {
				this.formData.czid = data.czid;
			}
			await this.getStoreDetail();
			await this.getGasbottleList();
		},
		methods: {
			async getStoreDetail() {
				let query = {
					id: this.formData.czid
				}
				const result = await this.$api.storeApi.getwCzxxDetail(query);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					// 转换多个图片
					this.storeDetail = value;
					let JsonParse = JSON.parse(this.storeDetail.fCztp)
					this.coverImg = await this.$getPhotoUrl(JsonParse);
					console.log("厂站详情", this.storeDetail);
				}
			},
			// 厂站的气瓶
			async getGasbottleList() {
				const result = await this.$api.memberApi.getwQplxlist(this.formData);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					let allTotal = this.formData.current * this.formData.size
					this.total = value.total
					const newlist = value.records;
					if (this.formData.current === 1) {
						this.gasBottleList = newlist;
					} else {
						this.gasBottleList.push(...newlist)
					}
					if (this.gasBottleList.length < allTotal) {
						this.status = 'nomore'
					}
					// 转换单个图片
					this.gasBottleList.map(async (item,index)=> {
						let JsonParse = JSON.parse(item.fTp);
						let images = await this.$getPhotoUrl(JsonParse[0].response.fileId);
						item.images = images;
						this.$forceUpdate();
					})
					console.log('气瓶列表', JSON.parse(JSON.stringify(this.gasBottleList)));
				}
			},
			handleMap(){
				console.log('storeDetail',JSON.parse(JSON.stringify(this.storeDetail)));
				this.$viewMapLocation(this.storeDetail.fJd,this.storeDetail.fWd,this.storeDetail.fCzmc);
			},
			handleCallPhone(item){
				console.log('storeDetail',JSON.parse(JSON.stringify(this.storeDetail)));
				if(this.storeDetail.fCzlxfs){
					uni.makePhoneCall({
						phoneNumber:this.storeDetail.fCzlxfs,
					})
				}
			},
			goBack() {
				// uni.navigateBack(1);
				this.$goBack()
			},
			goToGasDetail(item) {
				uni.navigateTo({
					url: '/pages/home/gasDetail?qpid=' + item.id
				})
			},
			goOrderPage(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/home/placeOrder?qpid=" + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailsCss {
		height: 200px;
		position: relative;

		.topPhotoCss {
			width: 100%;
			height: 100%;
			background: #fff;
		}

		.leftBackIconCss {
			position: absolute;
			top: 13px;
			left: 13px;
		}

		.detailsCardCss {
			position: relative;
			width: 100vw;
			border-radius: 30px 0px 0px 0;
			padding: 10px;
			background: #fff;

			.nameTextCss {
				font-size: 22px;
			}

			.iconRoundCss {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FDEEE6;
			}
		}

		.qpCardWrapCss {
			padding: 5px 10px 10px 10px;
			background: #F9FAFC;

			.qpCardCss {
				// height: 120px;
				background: #fff;
				border-radius: 15px;
				padding: 10px 5px;
				margin: 10px 0;

				// padding: 10px;
				.leftPhotoCss {}

				.dgBtnCss {
					.topBtnCss {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						width: 50px;
						height: 30px;
						background: #EA5504;
						border-radius: 8px 8px 0 0;
					}

					.bomBtnCss {
						width: 50px;
						height: 25px;
						color: #EA5504;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #EA5504;
						padding: 3px;
						border-radius: 0 0 8px 8px;
					}
				}
			}
		}


	}

	/deep/.topPhotoCss .u-image__image {
		border-radius: 0 0 30px 0 !important;
	}

	/deep/.pszTagCss .u-tag {
		width: 50px !important;
		height: 20px;
		padding: 0;
		display: flex !important;
		justify-content: center;
	}

	.u-notice-bar {
		// margin:0 10px 10px 10px;
		border-radius: 10px;
		margin-top: 10px;
	}

	.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>