<template>
	<view class="page1">
		<view class="formBox">
			<u-alert description="右滑可编辑店铺名称" type="primary"></u-alert>
			<view>
				<u-swipe-action>
					<u-swipe-action-item :options="options1" index="1" v-for="(item,index) in shopList" :key="index"
						@tap.stop="onActionItemSwipe(item)">
						<view class="swipe-action u-border-top u-border-bottom" @tap.stop="onActionItemClick(item)">
							<view class="swipe-action__content">
								<text class="swipe-action__content__text">{{ type=='wuliu'?item.companyName:item.shopName }}</text>
								<view class="swipe-action__content__icon" v-if="item.id == current && type=='wuliu'">
									<u-icon color="#1ba035" name="checkmark-circle-fill"></u-icon>
								</view>
								<view class="swipe-action__content__icon" v-if="item.shop.id == current && type!='wuliu'">
									<u-icon color="#1ba035" name="checkmark-circle-fill"></u-icon>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<view class="tui-tabbar">
				<u-button type="primary" shape="circle" @tap.stop="submit">确定</u-button>
			</view>
		</view>
		<u-popup :show="popupShow" mode="bottom" closeOnClickOverlay safeAreaInsetBottom @close="onPopupClose">
			<view class="edit-info">
				<view class="title">编辑店铺名称</view>
				<view class="info-name">
					<view>{{ shopNameOld }}</view>
					<view class="info-ipt">
						<u-input placeholder="请输入新店名" border="bottom" clearable v-model="shopName"></u-input>
					</view>
				</view>
				<view>
					<u-button type="primary" shape="circle" @click="onEditSave">保存</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		name: 'checkShop',
		computed: mapState(['userId', 'shopIndex']),
		data() {
			return {
				choose: '1',
				options1: [{
					text: '编辑',
					style: {
						backgroundColor: '#3c9cff'
					}
				}],
				popupShow: false,
				shopName: '',
				shopNameOld: '',
				shopList: [],
				shopId: null,
				current: '',
				shopOwnerPhone:'',
				name: '',
				type:''
			}
		},
		onLoad(option) {
			this.type = option.type
			this.getList()
		},
		methods: {
			...mapMutations(['setShopIndex']),
			submit() {
				if(this.type == 'wuliu'){
					this.getWuliuList()
				}else{
					this.tui.request("/auth/chooseShop", "POST", {
						shopId: this.current
					}, false, true).then((res) => {
						if (res.code == 200) {
							uni.setStorageSync('shopName', this.name)
							uni.setStorageSync('shopAddress', res.result.shopAddress)
							uni.setStorageSync('shopIcon', res.result.shopIcon)
							uni.setStorageSync('type', res.result.userType)
							uni.setStorageSync('shopId', this.current)
							uni.setStorageSync("shopOwnerPhone", this.shopOwnerPhone)
							this.tui.toast('切换店铺成功', 2000, true)
							uni.removeStorageSync('endTime')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 200)
						} else {
							this.tui.toast(res.message)
							return
						}
					}).catch((res) => {})
				}
			},
			getWuliuList(){
				let that = this;
				uni.request({
					url: this.tui.interfaceUrl() + "/app/logitics/chooseCompany",
					data: {
						companyId: this.current
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST',
					dataType: 'json',
					success: (res) => {
						uni.setStorageSync("hiver_token", res.data.result.lcomToken)
						uni.setStorageSync("transCompany", res.data.result.logiticsCompany.id)
						uni.setStorageSync("isOnLine", res.data.result.logiticsCompany.isOnLine)
						uni.setStorageSync("companyMobile", res.data.result.logiticsCompany.mobile)
						uni.setStorageSync("companyName", res.data.result.logiticsCompany.companyName)
						uni.setStorageSync("signCompany", res.data.result.logiticsCompany.signCompany)
						uni.setStorageSync("wayValue", that.wayValue)
						that.tui.toast('登录成功', 2000, true)
						setTimeout(() => {
							uni.reLaunch({
								url: '/package2/other/newLogisticsIndex'
							})
						}, 200)
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			//初始化店铺列表
			getList() {
				if(this.type == 'wuliu'){
					uni.request({
						url: this.tui.interfaceUrl() + "/app/logitics/findByMobile",
						data: {
							mobile:uni.getStorageSync('companyMobile')
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'appWLToken': this.tui.getToken()
						},
						method: 'POST',
						dataType: 'json',
						success: (res) => {
							this.shopList = res.data.result
							for (let i = 0; i < res.data.result.length; i++) {
								if (res.data.result[i].companyName == uni.getStorageSync('companyName')) {
									this.current = res.data.result[i].id
								}
							}
						},
						fail: (res) => {
							this.tui.toast("网络不给力，请稍后再试~")
						}
					})
				}else{
					this.tui.request("/auth/getShopByUser", "post", {
						// shopId: 1,
					}, false, true).then((res) => {
						if (res.code == 200) {
							for (let i = 0; i < res.result.length; i++) {
								if (res.result[i].shopName == uni.getStorageSync('shopName')) {
									this.current = res.result[i].shop.id
								}
							}
							this.shopList = res.result
						} else {
							this.tui.toast(res.message)
						}
					
					})
				}
			},
			onPopupClose() {
				this.popupShow = false
				this.shopName = ''
				this.shopId = ''
				this.shopNameOld = ''
			},
			//编辑
			onActionItemSwipe(item) {
				this.popupShow = true
				this.shopNameOld = item.shopName
				this.shopId = item.shopId
			},
			//切换店铺
			onActionItemClick(item) {
				if(this.type == 'wuliu'){
					this.current = item.id
					this.name = item.companyName
				}else{
					this.current = item.shop.id
					this.name = item.shopName
					this.shopOwnerPhone = item.shopOwnerPhone
				}
			},
			onEditSave() {
				if (!this.shopName) return this.tui.toast('请输入新店铺名称', 2000)
				this.tui.request("/app/shop/modifyShopNameById", "put", {
					id: this.shopId,
					shopName: this.shopName
				}, false, true).then((res) => {
					if (res.code === 200) {
						this.getList()
						this.onPopupClose()
					} else {
						this.tui.toast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,.page1{
		font-size: 28rpx;
	}
	.formBox {
		.uni-data-select {
			width: 100%;
		}

		.tui-order-title {
			position: relative;
			font-size: 28rpx;
			line-height: 28rpx;
			padding-left: 16rpx;
			box-sizing: border-box;
		}

		.tui-order-title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			border-left: 8rpx solid $u-primary;
			height: 120%;
			border-radius: 4rpx;
		}
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 20rpx 0 4rpx 30rpx;
	}

	.swipe-action {
		&__content {
			padding: 25rpx;
			display: flex;
			align-items: center;

			&__text {
				font-size: 30rpx;
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&__icon {
				flex-basis: 20rpx;
			}
		}
	}

	.edit-info {
		height: 450rpx;
		padding: 25rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
		}

		.info-name {
			display: flex;
			align-items: center;
			margin: 35rpx 0;
		}

		.info-ipt {
			flex: 1;
		}
	}
</style>
<style>
	.u-radio {
		margin: 15rpx 0;
	}
</style>