<template>
	<view class="zbp-head-wrapper">
		<view class="color-lump"></view>
		<view class="bg-img">
			<img :src="bgColor" alt="">
		</view>
		<view class="site-box flex_a_c_j_sb">
			<view class="place_wrapper flex_a_c" @click="selectLocation">
				<view class="iconfont icon-weizhi"></view>
				<view class="town_name">{{street}}</view>
			</view>

			<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
				<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
			</navigator>

		</view>
		<!-- 搜索栏 -->
		<navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
			<view class="flex_a_c">
				<view class="iconfont icon-sousuo"></view>
				<input type="text" v-model="keyword" placeholder="搜索产品或店铺" disabled>
			</view>
			<button class="search_btn">搜索</button>
		</navigator>
		<!-- 轮播图 -->
		<view class="supply_chains-head">
			<swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
				:autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
				indicator-active-color="#fff">
				<block v-for="(item,index) in swiper['url']" :key="index">
					<swiper-item class="swi_item" @click="swiperClick(item)">
						<u--image :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx"
							mode="aspectFill">
						</u--image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<u-picker :defaultIndex="defaInd" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
			@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
	</view>
</template>

<script>
	import {
		getArea,
		getStreet
	} from '@/api/article.js';
	import {
		getIndexData,
		getDiy
	} from '@/api/api.js'
	import {
		getGeocoder
	} from '@/api/store.js';
	import {
		mapGetters
	} from 'vuex'
	import {
		Toast
	} from '../libs/uniApi';
	import Cache from '@/utils/cache';
	export default {
		props: {
			isSelectPlace: {
				type: Boolean,
				default: false
			},
			location_Arr: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				defaInd: [0, 0],
				street: '',
				showPicker: false,
				styleConfig: [],
				columnData: [],
				homeCombData: [],
				keyword: '',
				bgColor: '',
				swiper: {
					url: [{
						img: ''
					}],
					indicatorDots: true, // 显示面板指示点
					vertical: false, // 滑动方向是否为纵向
					autoplay: true, // 是否自动切换
					interval: 2000, // 自动切换时间间隔
					duration: 400 // 滑动动画时长
				},
			}
		},


		created() {
			this.appLocation()

			this.getBanner()
			this.Area()

		},
		onShow() {
			this.street = uni.getStorageSync('adress_location')
		},
		methods: {
			swiperClick(item) {
				const url = item.info[1].value
				uni.navigateTo({
					url: url
				})
			},
			selectLocation() {
				this.isSelectPlace ? this.showPicker = true : ''

			},
			async appLocation() {
				uni.getLocation({
					type: 'wgs84',
					timeout: '10',
					success: (res) => {
						// console.log(res)

						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
					
							this.street = res.data.address_component.street
							uni.setStorageSync('adress_location', res.data.address_component
								.street)

						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						})
					},
					fail: (err) => {

						uni.showToast({
							title: "获取定位超时",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			confirm(e) {
				this.street = uni.setStorageSync('adress_location', e.value[1].name) ? uni.setStorageSync(
					'adress_location', e.value[1].name) : e.value[1].name
				this.showPicker = false
				this.$emit('selectPlce', e)
				uni.setStorageSync('adress_location', e.value[1].name)

			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
					getStreet({
						area_code: value[0]['code']
					}).then(res => {
						picker.setColumnValues(1, res.data);
					});
				}
			},
			Area() {
				getArea({
					city_code: 510500
				}).then(res => {
					this.$refs.uPicker.setColumnValues(0, res.data);
					this.Street(res.data[0]['code']);
				});
			},
			Street(code) {
				getStreet({
					area_code: code
				}).then(res => {
					this.$refs.uPicker.setColumnValues(1, res.data);
				});
			},

			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.bgColor = this.swiper.url[e.detail.current]['img']
				}
			},
			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data).sort();
				let m = obj.map(key => data[key]);
				return m;
			},
			async getBanner(id) {
				let that = this;
				const {
					data
				} = await getDiy({
					id: 0
				})
				that.styleConfig = that.objToArr(data.value);
				/* 循环数组得到数据*/
				that.styleConfig.forEach((item, index, arr) => {
					if (item.name == 'headerSerch' || item.name == 'homeComb') {
						if (item.name == 'homeComb') {
							that.swiper.url = item.swiperConfig.list
						}
					}
				})
				this.bgColor = this.swiper.url[0].img
			},
		}
	}
</script>

<style lang="scss">
	.zbp-head-wrapper {
		position: relative;
		padding-top: 78.95rpx;
		overflow: hidden;

		.color-lump {
			z-index: 1;
			position: absolute;
			bottom: -86px;
			left: 50%;
			transform: translate(-50%, 0);
			width: 102%;
			height: 133px;
			border-radius: 30px 30px 0 0;
			background-color: #fff;
		}

		.bg-img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			/* #ifdef MP || APP-PLUS */
			z-index: -1;
			/* #endif */
			/* #ifdef H5 */
			z-index: 0;
			/* #endif */
			z-index: 0;
			filter: blur(0);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				filter: blur(30rpx);
				transform: scale(1.5);
			}
		}

		.site-box {
			margin: 0 auto;
			width: 694.74rpx;
			height: 66.67rpx;
			margin-bottom: 26.32rpx;
			position: relative;

			// 位置
			.place_wrapper {
				color: #fff;
				margin-right: 24.56rpx;
				font-size: 31.58rpx;

				.town_name {
					margin-left: 10.53rpx;
				}
			}

			.iconfont {
				font-size: 35.09rpx;
			}
		}

		.my-main {
			transition: background-color .5s ease;
		}

		.search_content {
			margin: 0 auto;
			width: 694.74rpx;
			height: 61.4rpx;
			padding: 2px 2px 2px 21.05rpx;
			border-radius: 100px;
			background: #fff;
			margin-bottom: 17.54rpx;
			position: relative;
			box-sizing: border-box;

			.icon-sousuo {
				font-size: 26.32rpx;
				font-weight: bold;
				color: #c8c7c6;
				margin-right: 17.54rpx;
			}

			.search_btn {
				color: #fff;
				width: 105.26rpx;
				height: 52.63rpx;
				line-height: 52.63rpx;
				background: #f84221;
				border-radius: 100px;
				font-size: 28.07rpx;
			}
		}

		.supply_chains-head {
			margin-bottom: 17.54rpx;
			position: relative;
			z-index: 2;

			.swiper {
				width: 694.74rpx;
				height: 242.11rpx;
				margin: 0 auto;
				border-radius: 15px;
				overflow: hidden;

				.swi_item {
					width: 100%;
					height: 242.11rpx;
				}
			}
		}
	}
</style>