<template>
	<view class="container">
		<!-- <u-navbar title="门店列表" autoBack :safeAreaInsetTop="true" placeholder fixed></u-navbar> -->
		<Navbar title="门店列表" canBack></Navbar>
		<customNavBar mode="store" @search="handSearch"></customNavBar>
		<!-- 推荐tag区域 -->
		<view class="recommendCss padding-sm">
			<view class="text-lg text-gray margin-sm">
				为您推荐当前定位地址附近的服务店
			</view>
			<view class="flex justify-around">
				<view class="" v-for="(item,index) in recommendList" :key="index">
					<u-tag class="recommendTagCss" :borderColor="item.checked?'#EB1815':'#B1B4C2'"
						:color="item.checked?'#EB1815':'#B1B4C2'" bgColor="#fff" shape="circle" :text="item.name"
						:name="index" @click="checkboxClick"></u-tag>
				</view>

			</view>
		</view>
		<view class="storeCardCss" v-for="(item,index) in storeList" :key="index" @click="goToDetails(item)">
			<view class="flex align-center margin-top">
				<u-tag :text="item.fCzlx||''" :bgColor="item.fCzlx==='储配站'?'#00AEAA':'#5875EB'" borderColor="#fff"
					color="#fff"></u-tag>
				<text class="storeNameCss margin-left-sm text-lg text-bold">{{item.fCzjc || ""}}</text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex flex-direction">
					<!-- <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 align-center margin-top-sm">
						<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">
							{{item.fSssf || ""}}{{item.fSss || ""}}{{item.fSsq || ""}}{{item.fSsjd || ""}}{{item.fXxdz || ""}}
							<!-- 孝感市汉川市S1006炼厂石化(农利加油站) 西南侧约150米 -->
						</view>
					</view>
					<view class="flex align-center margin-top-xs">
						<view class="">
							<u-image src="/static/images/home/yysj.png" mode="aspectFit" width="15px"
								height="15px"></u-image>
						</view>
						<view class="text-gray margin-left-xs">
							{{item.fYykssj || ""}} ~ {{item.fYyjssj || ""}}
						</view>
					</view>
					<view class="flex align-center margin-top-sm">
						<view class="">
							<u-image src="/static/images/home/phone.png" mode="aspectFit" width="15px"
								height="15px"></u-image>
						</view>
						<view class="text-gray margin-left-xs">
							<!-- 0712-8468188/1367712675 -->
							{{item.fCzlxfs || ""}}
						</view>
					</view>
				</view>
				<view class="rightIconBodyCss flex flex-direction margin-right-xs margin-top-sm">
					<!-- <view class="rightTagCss" v-if="item.distance <= 1">
						最近订气场站
					</view> -->
					<view class="text-center">
						<view class="iconRoundCss" @click.stop="handleMap(item)">
							<u-icon name="map-fill" color="#EA5504" size="20"></u-icon>
						</view>
						<text class="text-gray text-sm" style="width: 30px;">{{$formatDistance(item.distance)}}</text>
					</view>
					<view class="margin-top-lg">
						<view class="iconRoundCss" @click.stop="handleCallPhone(item)">
							<u-icon name="phone-fill" color="#EA5504" size="20"></u-icon>
						</view>
						<!-- <u-image width="30px" height="30px" shape="circle"></u-image> -->
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="!storeList.length"></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="10" v-else />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import customNavBar from '@/components/customNavBar/customNavBar.vue'
	export default {
		components: {
			customNavBar
		},
		data() {
			return {
				recommendList: [{
					index: 0,
					name: '全部',
					checked: true
				}, {
					index: 1,
					name: '推荐',
					checked: false
				}, {
					index: 2,
					name: '充装站',
					checked: false
				}, {
					index: 3,
					name: '供应站',
					checked: false
				}],
				storeList: [],
				formData: {
					current: 1,
					size: 10,
					// jd: "114.347455", //PC无法定位调试使用
					// wd: "30.504396", //PC无法定位调试使用
					jd: "",
					wd: "",
					czlxList: '',
					search: ""
				},
				status: "loadmore",
				total: null,
			}
		},
		computed: {
			// 使用 mapState 辅助函数将 Vuex state 中的 adsJd 和 adsWd 映射到当前组件的计算属性中
			...mapState({
				adsJd: state => state.user.adsJd,
				adsWd: state => state.user.adsWd
			})
		},
		onPullDownRefresh() {
			this.storeList = []
			//调用获取数据方法
			this.getStoreList()
			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.getStoreList()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		async onLoad() {

		},
		async onShow() {
			console.log(this.$store);
			// 如果未选择地址则获取当前定位
			if (!this.adsJd && !this.adsWd) {
				await this.getLocation();
			}
			await this.getStoreList();
		},
		methods: {
		  //获取当前的定位
			getLocation() {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							console.log('无地址,定位获取', JSON.parse(JSON.stringify(res)));
							that.formData.jd = res.longitude;
							that.formData.wd = res.latitude;
							resolve(); // 成功获取经纬度后 resolve
						},
						fail: (error) => {
							uni.$u.toast("定位失败");
							console.log("定位失败",error);
							reject(error); // 获取经纬度失败时 reject
						}
					});
				});
			},
			async getStoreList() {
				// 如果有选择的地址经纬度
				if(this.adsJd && this.adsWd){
					this.formData.jd = this.adsJd;
					this.formData.wd = this.adsWd;
				}
				console.log('门店列表查询条件', JSON.parse(JSON.stringify(this.formData)));
				const result = await this.$api.memberApi.getwCzxxList(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.storeList = newlist;
					} else {
						this.storeList.push(...newlist)
					}
					if (this.storeList.length < allTotal) {
						this.status = 'nomore'
					}
				}
				console.log('门店列表', JSON.parse(JSON.stringify(this.storeList)));
			},
			checkboxClick(name) {
				console.log(name);
				let tempIsOpen = this.recommendList[name].checked;
				this.recommendList[name].checked = !tempIsOpen;
				console.log("tempIsOpen", tempIsOpen);
				this.recommendList.map((item, index) => {
					item.checked = index === name ? true : false
				})
				if (name === 0 || name === 1) {
					this.formData.czlxList = '';
				}
				if (name === 2) {
					this.formData.czlxList = '充装站';
					// if (this.recommendList[name].checked) {
					// 	this.formData.czlxList.push('储配站')
					// } else {
					// 	let index = this.formData.czlxList.indexOf('储配站');
					// 	if (index !== -1) {
					// 		this.formData.czlxList.splice(index, 1);
					// 	}
					// }
				}
				if (name === 3) {
					this.formData.czlxList = '供应站'
					// if (this.recommendList[name].checked) {
					// 	this.formData.czlxList.push('供应站')
					// } else {
					// 	let index = this.formData.czlxList.indexOf('供应站');
					// 	if (index !== -1) {
					// 		this.formData.czlxList.splice(index, 1);
					// 	}
					// }
				}
				this.getStoreList();
			},
			handleMap(item){
				console.log('item',JSON.parse(JSON.stringify(item)));
				this.$viewMapLocation(item.fJd,item.fWd,item.fCzmc);
			},
			handleCallPhone(item){
				console.log('item',JSON.parse(JSON.stringify(item)));
				if(item.fCzlxfs){
					uni.makePhoneCall({
						phoneNumber:item.fCzlxfs,
					})
				}
			},
			handSearch(e) {
				console.log("搜索关键词", e);
				this.formData.search = e;
				this.getStoreList();
			},
			goToDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/home/storeDetails?czid=" + item.id
				})
			}
		}
	}
</script>

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

	.recommendCss {
		background: #fff;
	}

	/deep/.recommendTagCss .u-tag {
		width: 80px !important;
		display: flex !important;
		justify-content: center;
	}

	/deep/.typeTagCss .u-tag {
		width: 60px !important;
		height: 30px;
		display: flex !important;
		justify-content: center;
	}

	.storeCardCss {
		position: relative;

		.storeNameCss {
			width: 100%;
		}

		.rightIconBodyCss {
			width: 20vw;
			display: flex;
			align-items: flex-end;


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

		.rightTagCss {
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 0px 10px 0px 10px;
			padding: 5px;
			background: #EA5504;
			color: #fff;
		}



	}

	.storeCardCss {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 15px;
	}
</style>