<template>
	<view class="container">
		<view class="fixed-top">
			<view class="flex shop-auth" @click="bindAuth">
				<view>注：添加门店前请先授权扫码,点击右侧按钮授权,如已授权可忽略</view>
				<view class="shop-auth-btn flex-center">
					扫码授权
				</view>
			</view>
			<view class="search-user flex-y-center ">
				<view class="search-content flex-y-center">
					<icon type="search" size="18" />
					<input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch"
						class="flex-grow-1" type="text" placeholder-style="font-size:26rpx" placeholder="请输入关键词" />
					<view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
						<icon type="clear" size="18" />
					</view>
				</view>
				<view class="search-btn" @click="search">
					搜索
				</view>
			</view>
		</view>

		<view class="shop-auth-hg100">
		</view>

		<block v-if='list.length<=0'>
			<no-none></no-none>
			<navigator url="../addStore/addStore" class="shop_add">
				+去添加门店
			</navigator>
		</block>

		<block v-else>
			<!-- 设置圆角 -->
			<!-- <uni-search-bar :radius="100" @confirm="search"></uni-search-bar> -->
			<view class="list">

				<view class="item" v-for="(item,index) in list" :key="index">

					<block v-if="item.shop_info_status">
						<view class="attestation" :class="item.shop_info_status =='01'?'active':''">
							{{item.shop_info_status =='01'?'已认证':'待优化'}}
						</view>
					</block>
					<view class="top ">
						<view class="flex">
							<navigator :hover-class="none" :url="`./storeNumberdetail?id=${item.id}`"
								class="flex-grow-1 flex-y-center">
								<image :src="URL+item.thumb" mode="aspectFill" class="store-img"></image>
								<view class="info ">
									<view class="name text-1">{{item.title}}</view>
									<view class="money text-1">电话：{{item.tel}}</view>
									<view class="money text-1">创建时间：{{item.create_time}}</view>
								</view>
							</navigator>
							
							<view class="flex-grow-0 flex-y-center">
								<view class="layui-btn-xs" @click.stop="navigatorShop(item.id)">
									进入门店
								</view>
							</view>

						</view>
					</view>

					<navigator v-if="item.koubeiId" :hover-class="none" :url="`./storeNumberdetail?id=${item.id}`"
						class="bottom flex flex-y-center">
						<!-- <text class="iconfont iconmendiandizhi"></text> -->
						<view class="money text-1" style="margin-top: 0;">蚂蚁门店ID：{{item.koubeiId}}</view>
					</navigator>

				</view>
			</view>
		</block>

		<zx-footer-bar :active="1" :type="type" />

		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<image :src="qrcodeImg"></image>
				<view class="save-btn flex-center" @click="upCode">
					保存图片
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import zxFooterBar from '../../components/zx-footer-bar/zx-footer-bar.vue'
	// #ifdef MP-WEIXIN
	import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
	// #endif
	export default {
		components: {
			zxFooterBar,
		},
		data() {
			return {
				list: [],
				URL: getApp().globalData.URL,
				type: 2,
				qrcodeImg: "",
				seTval: '',
				keywords: ''
			}
		},

		onLoad(e) {
			if (!uni.getStorageSync("admin_id")) {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}
			this.type = e.type;
			this.qrcode();
		},

		onShow() {
			this.http();
		},

		onShareAppMessage() {

		},

		onShareTimeline() {

		},

		methods: {

			getSearch(e) {
				if (!e.detail.value) {
					this.keywords = "";
					this.http();
				}
				this.keywords = e.detail.value;
			},

			onDel() {
				this.seTval = '';
				this.keywords = "";
				this.http();
			},

			confirm(e) {
				this.keywords = e.detail.value;
				this.http();
			},

			search(e) {
				this.http();
			},

			upCode(e) {
				// #ifdef H5
				uni.showModal({
					title: '提示',
					content: '请长按二维码图片进行保存',
					showCancel: false,
					confirmText: '好的',
				});
				// #endif

				// #ifdef MP-WEIXIN 
				var url = this.qrcodeImg;
				console.log(url, "url")
				saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
					//成功的逻辑
					console.log(res, "保存成功")
					wx.showToast({
						title: '保存成功',
						icon: 'none',
						mask: true,
					})
					setTimeout(() => {
						this.$refs.popup.close();
					}, 2000)
				}).catch((err) => {
					console.log(err, "保存失败")
					if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
						err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
						"saveImageToPhotosAlbum:fail authorize no response") {
						// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
						uni.showModal({
							title: '提示',
							content: '需要您设置授权保存相册',
							showCancel: false,
							success: modalSuccess => {
								uni.openSetting({
									success(settingdata) {
										console.log("settingdata", settingdata)
										if (settingdata.authSetting[
												'scope.writePhotosAlbum']) {
											uni.showModal({
												title: '提示',
												content: '获取权限成功,再次点击图片即可保存',
												showCancel: false,
											})
										} else {
											uni.showModal({
												title: '提示',
												content: '获取权限失败，将无法保存到相册哦~',
												showCancel: false,
											})
										}
									},
									fail(failData) {
										console.log("failData", failData)
									},
									complete(finishData) {
										console.log("finishData", finishData)
									}
								})

							}
						})
					}
					// 失败后的逻辑
				})
				// #endif			
			},

			bindAuth() {
				if (!this.qrcodeImg) {
					return
				}
				this.$refs.popup.open();
			},


			qrcode() {
				this.request({
					url: "Smdcshop/store_ewm",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.qrcodeImg = res.data;
					}
				}).catch((res) => {});
			},

			navigatorShop(id) {
				this.request({
					url: "Smdcshop/storeadmin",
					data: {
						id,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {

						// this.list = res.data;
						// 门店
						// if (this.is_login == 3) {
						// getApp().globalData.is_shop=1;
						uni.setStorageSync("is_shop", true);
						uni.setStorageSync("is_login", 3);

						uni.setStorageSync("admin_shopid", uni.getStorageSync("admin_id"));

						uni.setStorageSync("admin_id", res.data.id);

						uni.setStorageSync("store_id", res.data.store_id);

						uni.reLaunch({
							url: "../../storeInfoIng/storeInfo"
						})
						// }
						// 商家
					}

				}).catch((res) => {});
			},

			http() {
				this.request({
					url: "Smdcshop/shop_store_index",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
						serch: this.keywords,
					},
					showLoading: true
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.list = res.data;
					}
				}).catch((res) => {});
			}

		}
	}
</script>

<style>
	page {
		background: #F4F5F7;
	}

	.fixed-top {
		position: fixed;
		top: 0rpx;
		left: 0;
		width: 100%;
	}

	.search-user {
		z-index: 999;

		height: 100rpx;
		background: #FFFFFF;
		margin-left: 15rpx;
	}

	.search-user .search-content {
		width: 83%;
		height: 70rpx;
		background: #F1F1F1;
		border-radius: 100rpx;
		padding: 0 20rpx;

	}

	.search-user .search-content icon {
		margin-right: 10rpx;
	}

	.search-user .search-btn {
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.save-btn {
		width: 330rpx;
		height: 90rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		opacity: 1;
		border-radius: 6rpx;
		margin: 0 auto;
		color: #FFFFFF;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		opacity: 1;
		margin-top: 30rpx;
	}

	.shop_add {
		text-align: center;
		font-size: 30rpx;
		color: #999;
		width: 227rpx;
		border: 1px solid #999;
		padding: 10rpx 0;
		margin: 0 auto;
		border-radius: 6rpx;
		margin-top: 20rpx;
	}

	.popup-content {
		/* width: 100%; */
		/* height: 656rpx; */
		/* background: #fff; */
		/* padding: 40rpx; */
	}

	.popup-content image {
		width: 350rpx;
		height: 350rpx;
	}

	.shop-auth {
		font-size: 26rpx;
		color: red;
		padding: 15rpx 30rpx;
		/* margin-bottom: 20rpx; */
		background: #FFFFFF;
		width: 100%;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.shop-auth-btn {
		color: #fff;
		background-color: #1E9FFF;
		min-width: 150rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.shop-auth-hg100 {
		height: 200rpx;
	}

	.layui-btn-xs {
		height: 32px;
		line-height: 32px;
		padding: 0 8px;
		font-size: 12px;
		background-color: #1E9FFF;
		color: #FFFFFF;
		border-radius: 8rpx;
	}

	.list {
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.list .item {
		width: 100%;
		/* height: 213rpx; */
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		border: 1px solid #f1f1f1;
		position: relative;
	}

	.attestation {
		width: 201rpx;
		height: 30rpx;
		color: #fff;
		background: #FD2C2C;
		text-align: center;
		transform: rotate(-42deg);
		position: absolute;
		left: -32px;
		top: 9px;
		font-size: 20rpx;
		line-height: 30rpx;

	}

	.list .item .active {
		color: #fff;
		background: #1E9FFF;
	}

	.list .item .top {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.list .item .store-img {
		display: block;
		width: 94rpx;
		height: 94rpx;
		flex: none;
		border-radius: 9rpx;
	}

	.list .item .info {
		padding: 0 24rpx;
		flex: none;
		/* width: 300rpx; */
		box-sizing: border-box;
		width: 85%;
	}

	.list .item .icon-gengduo {
		font-size: 24rpx;
		color: #999;
	}

	.list .item .name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		line-height: 45rpx;
	}

	.list .item .money {
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
	}

	.list .item .bottom {
		height: 70rpx;
	}

	.list .item .bottom .icon-mendiandizhi {
		color: #59A7FF;
	}

	.list .item .bottom .addr {
		font-size: 24rpx;
		color: #999;
		margin-left: 16rpx;
	}
</style>
