<template>
	<view class="page1">
		<view class="hero">
			<view class="hero-title">店铺资料</view>
			<view class="hero-subtitle">维护副标题、联系方式和收款信息</view>
		</view>

		<view class="form-wrap">
			<view class="content">
				<view class="section-title">可编辑信息</view>
				<view class="value">
					<view class="name">副标题</view>
					<view class="text">
						<input type="text" v-model="shop.subtitle" maxlength="24" placeholder="请输入副标题" />
					</view>
				</view>
				<view class="value">
					<view class="name">联系方式</view>
					<view class="text">
						<input type="number" v-model="shop.contactPhone" maxlength="11" placeholder="请输入联系方式" />
					</view>
				</view>
				<view class="value">
					<view class="name">支付宝账号</view>
					<view class="text">
						<input type="text" v-model="shop.aliAccount" maxlength="32" placeholder="请输入支付宝账号" />
					</view>
				</view>
				<view class="value">
					<view class="name">支付宝实名</view>
					<view class="text">
						<input type="text" v-model="shop.aliName" maxlength="16" placeholder="请输入支付宝实名" />
					</view>
				</view>
			</view>

			<button :loading="submitLoading" @tap="submit">保存</button>

			<view class="content">
				<view class="section-title">基础信息</view>
				<view class="value image-row">
					<view class="name">门头图</view>
					<view class="text image-cell">
						<view class="upload-img" v-if="!shop.shopIcon">
							<uni-icons type="image" size="28" color="#777"></uni-icons>
						</view>
						<image :src="shop.shopIcon" v-else mode="aspectFill" class="upload-img"></image>
					</view>
				</view>
				<view class="value">
					<view class="name">店铺名称</view>
					<view class="text">{{shop.shopName || '暂无'}}</view>
				</view>
				<view class="value">
					<view class="name">店铺分类</view>
					<view class="text">{{currentShopTypeText || '暂无'}}</view>
				</view>
				<view class="value">
					<view class="name">所属区域</view>
					<view class="text">{{currentRegionText || '暂无'}}</view>
				</view>
				<view class="value textarea-row">
					<view class="name">店铺地址</view>
					<view class="text">{{shop.shopAddress || '暂无'}}</view>
				</view>
			</view>

			<view class="content" v-if="certificateImages.length">
				<view class="section-title">认证资料</view>
				<view class="cert-grid">
					<view class="cert-item" v-for="(item,index) in certificateImages" :key="index"
						@tap="previewImage(item)">
						<image :src="item" mode="aspectFill"></image>
						<text>{{certificateNames[index] || '补充资料'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop: {},
				shopTypeList: [],
				submitLoading: false,
				certificateImages: [],
				certificateNames: ['身份证正面', '身份证反面', '营业执照', '补充证照']
			}
		},
		computed: {
			currentRegionText() {
				return this.shop.shopAreaTitle || this.shop.region || ''
			},
			currentShopTypeText() {
				return this.shop.shopTypeTitle || this.getShopTypeText(this.shop.shopType) || ''
			}
		},
		onLoad() {
			this.getShopTypeList()
			this.getShopMsg()
		},
		methods: {
			getShopId() {
				return this.shop.id || uni.getStorageSync('shopId') || ''
			},
			getShopMsg() {
				const shopId = uni.getStorageSync('shopId')
				if (!shopId) {
					this.applyShop(this.getCachedShop())
					return
				}
				let regionId = ''
				try {
					const area = uni.getStorageSync('area')
					regionId = area ? JSON.parse(area).regionId : ''
				} catch (e) {}
				this.NB.sendRequest('/app/shop/getShopInfoById', {
					id: shopId,
					regionId: regionId
				}, false, 'POST', 'application/x-www-form-urlencoded').then(res => {
				
					if (res.code == 200) {
						this.applyShop(this.normalizeShopResult(res.result))
					} else {
						this.applyShop(this.getCachedShop())
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			normalizeShopResult(result) {
				if (result.shop) {
					const data = Object.assign({}, result.shop, result)
					delete data.shop
					return data
				}
				return result || {}
			},
			getCachedShop() {
				const shopList = uni.getStorageSync('schoolShop') || []
				const shopId = uni.getStorageSync('shopId')
				if (Array.isArray(shopList)) {
					const item = shopList.find(shop => shop.id == shopId || shop.shopName == uni.getStorageSync(
						'shopName'))
					if (item) return item
				}
				return uni.getStorageSync('shop') || {
					id: shopId,
					shopName: uni.getStorageSync('shopName') || '',
					shopIcon: uni.getStorageSync('shopIcon') || ''
				}
			},
			applyShop(data) {
				const shop = Object.assign({
					id: '',
					shopName: '',
					shopIcon: '',
					shopType: '',
					shopTypeTitle: '',
					subtitle: '',
					shopAddress: '',
					contactPhone: '',
					aliAccount: '',
					aliName: '',
					remark: '',
					shopArea: '',
					shopAreaTitle: '',
					regionId: '',
					region: ''
				}, data || {})
				Object.keys(shop).forEach(key => {
					if (shop[key] === null) shop[key] = ''
				})
				this.shop = shop
				this.parseShopImages(shop.shopImages)
			},
			parseShopImages(value) {
				const list = []
				if (!value) {
					this.certificateImages = []
					return
				}
				const parts = String(value).split('@@')
				parts.forEach((item, index) => {
					if (!item) return
					if (index == 3) {
						try {
							const extra = JSON.parse(item)
							if (Array.isArray(extra)) {
								extra.forEach(url => {
									if (url) list.push(url)
								})
							}
						} catch (e) {}
					} else {
						list.push(item)
					}
				})
				this.certificateImages = list
			},
			getShopTypeList() {
				this.NB.sendRequest('/dictData/getByCondition', {
					sort: 'sortOrder',
					order: 'asc',
					dictId: '1712359407444168704'
				}, false, 'GET', 'application/x-www-form-urlencoded').then(res => {
				
					if (res.code == 200) {
						const content = res.result && res.result.content ? res.result.content : []
						this.shopTypeList = content.map(item => {
							return {
								value: item.value,
								text: item.title
							}
						})
						if (this.shop.shopType && !this.shop.shopTypeTitle) {
							this.shop.shopTypeTitle = this.getShopTypeText(this.shop.shopType)
						}
					} else {
						this.applyShop(this.getCachedShop())
						
					}
				})
			},
			getShopTypeText(value) {
				const item = this.shopTypeList.find(item => item.value == value || item.text == value)
				return item ? item.text : value
			},
			normalizeId(value) {
				return String(value || '').split(',')[0]
			},
			previewImage(url) {
				if (!url) return
				uni.previewImage({
					current: url,
					urls: this.certificateImages
				})
			},
			validateShop() {
				if (!this.shop.shopArea) return '店铺区域信息缺失，请重新进入页面后再保存'
				if (!this.shop.contactPhone) return '请输入联系方式'
				if (!this.shop.aliAccount) return '请输入支付宝账号'
				if (!this.shop.aliName) return '请输入支付宝实名'
				return ''
			},
			updateLocalShopCache() {
				let shopList = uni.getStorageSync('schoolShop') || []
				if (Array.isArray(shopList)) {
					shopList = shopList.map(item => item.id == this.shop.id ? Object.assign({}, item, this.shop) : item)
					uni.setStorageSync('schoolShop', shopList)
				}
				uni.setStorageSync('shop', this.shop)
				uni.setStorageSync('shopName', this.shop.shopName)
				uni.setStorageSync('shopIcon', this.shop.shopIcon)
			},
			submit() {
				const error = this.validateShop()
				if (error) {
					uni.showToast({
						title: error,
						icon: 'none'
					})
					return
				}
				const shopId = this.getShopId()
				const payload = {
					id: this.normalizeId(shopId),
					shopArea: this.normalizeId(this.shop.shopArea),
					subtitle: this.shop.subtitle,
					contactPhone: this.shop.contactPhone,
					aliAccount: this.shop.aliAccount,
					aliName: this.shop.aliName
				}
				const query = Object.keys(payload).map(key => {
					return key + '=' + encodeURIComponent(payload[key] == null ? '' : payload[key])
				}).join('&')
				this.submitLoading = true
				this.NB.sendRequest('/app/shop/edit?' + query, {}, false, 'PUT', 'application/x-www-form-urlencoded').then(res => {
				
					if (res.code == 200) {
						this.updateLocalShopCache()
						uni.showModal({
							title: '提示',
							content: '店铺资料已更新',
							showCancel: false,
							success: (modalRes) => {
								if (modalRes.confirm) uni.navigateBack()
							}
						})
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	page,
	.page1 {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		color: #12342d;
		background:
			radial-gradient(circle at 92% 120rpx, rgba(166, 255, 234, 0.45) 0, rgba(166, 255, 234, 0) 240rpx),
			linear-gradient(180deg, #f3fff6 0%, #f5f8f5 36%, #eef4f1 100%);
		overflow: scroll;
	}

	.hero {
		position: relative;
		width: 100%;
		height: 260rpx;
		padding: 58rpx 42rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		background:
			linear-gradient(135deg, rgba(227, 255, 150, 0.95) 0%, rgba(166, 255, 234, 0.86) 58%, rgba(255, 255, 255, 0.72) 100%),
			url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') center/cover no-repeat;
	}

	.hero::after {
		content: "";
		position: absolute;
		right: -34rpx;
		top: -44rpx;
		width: 290rpx;
		height: 290rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.32);
	}

	.hero-title {
		position: relative;
		z-index: 1;
		font-size: 46rpx;
		line-height: 64rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
		color: #07362d;
	}

	.hero-subtitle {
		position: relative;
		z-index: 1;
		margin-top: 12rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: rgba(0, 35, 28, 0.62);
	}

	.form-wrap {
		position: relative;
		z-index: 2;
		width: 92%;
		margin: -54rpx auto 0;
		padding-bottom: 40rpx;
	}

	.content {
		width: 100%;
		margin-bottom: 24rpx;
		overflow: hidden;
		border: 1rpx solid rgba(255, 255, 255, 0.86);
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 16rpx 36rpx rgba(0, 35, 28, 0.08);
	}

	.section-title {
		height: 92rpx;
		line-height: 92rpx;
		padding: 0 28rpx;
		border-bottom: 1rpx solid #edf3f0;
		font-size: 30rpx;
		font-weight: 900;
		color: #102f28;
	}

	.value {
		width: 100%;
		min-height: 96rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #edf3f0;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	.section-title+.value {
		border-top: none;
	}

	.name {
		width: 210rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #153c34;
	}

	.text {
		flex: 1;
		min-width: 0;
		text-align: right;
		color: #263f39;
		font-size: 28rpx;
	}

	.text input {
		height: 96rpx;
		line-height: 96rpx;
		text-align: right;
		font-size: 28rpx;
		color: #263f39;
	}

	.text textarea {
		width: 100%;
		height: 132rpx;
		line-height: 42rpx;
		padding-top: 18rpx;
		text-align: right;
		font-size: 28rpx;
		color: #263f39;
	}

	.textarea-row {
		align-items: flex-start;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.textarea-row .name {
		line-height: 60rpx;
	}

	.picker-text {
		min-height: 96rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		color: #263f39;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.picker-text.placeholder {
		color: #9aa7a3;
	}

	.image-row {
		min-height: 212rpx;
	}

	.image-cell {
		display: flex;
		justify-content: flex-end;
	}

	.upload-img {
		width: 172rpx;
		height: 172rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 24rpx;
		background: #f6faf8;
		border: 1rpx dashed rgba(11, 155, 115, 0.26);
		box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.8);
	}

	.cert-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.cert-item {
		overflow: hidden;
		border-radius: 22rpx;
		background: #f6faf8;
		border: 1rpx solid #edf3f0;
	}

	.cert-item image {
		width: 100%;
		height: 180rpx;
		display: block;
	}

	.cert-item text {
		display: block;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 800;
		color: #153c34;
	}

	button {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		margin: 44rpx auto 12rpx;
		border-radius: 999rpx;
		background: linear-gradient(90deg, #e3ff96 0%, #a6ffea 100%);
		color: #00231c;
		font-size: 34rpx;
		font-weight: 900;
		box-shadow: 0 18rpx 36rpx rgba(0, 35, 28, 0.14);
	}

	button::after {
		border: none;
	}
</style>