<template>
	<view class="backView">
		<view class="shadowBackView" style="background-color: transparent;z-index: 1" v-if="loading">
			<u-loading style="position: fixed;top: 50%;" :show="loading" size="36" mode="flower"></u-loading>
		</view>
		<view class="itemView firstItem">
			<view class="itemTitleView">
				<text class="itemTitle">保存原图</text>
				<text class="itemNotice">拍照后另保存一张无水印的图片</text>
			</view>
			<switch class="itemSwitch" :checked="result['hasOrigin']" @change="handleOrigineChange" color="#007AFF" />
		</view>
		<view class="itemView" v-if="showTitleSwitch">
			<view class="itemTitleView" @click="itemClick({},-1)">
				<text class="itemTitle">水印标题</text>
				<text class="itemNotice">{{result['lowerLeft']['title'] || '点击可编辑更改'}}</text>
			</view>
			<switch class="itemSwitch" disabled :checked="result['lowerLeft']['title'] != ''"
				@click="handleClickTitleSwitch" color="#007AFF" />
		</view>
		<view class="itemView" v-for="(item,ikey) in itemList" :key="ikey">
			<view class="itemTitleView" @click="itemClick(item,ikey)">
				<text class="itemTitle">{{item['watemarkText'] || '自定义' + (ikey + 1)}}</text>
				<text class="itemNotice">{{item['watemarkValue'] || '点击可编辑更改'}}</text>
			</view>
			<switch class="itemSwitch" :checked="item['enable']" @change="itemChange(item, ikey)" color="#007AFF" />
		</view>
		<u-popup border-radius="10" v-model="isPopShow" safe-area-inset-bottom :mask-close-able="false" mode="center"
			width="690rpx" height="600rpx" @close="handlePopClose">
			<view class="popCenterView">
				<text class="popTitle">设置自定义项</text>
				<view class="inputBackView">
					<view class="ph-pop-left-view">
						<view class="leftInputView">
							<input class="leftInput" type="text" v-model="currenItem['watemarkText']"
								@input="leftInput()" :disabled="currenItem.type === 'title_text'" placeholder="请输入"
								maxlength="10" />
						</view>
						<view class="ph-pop-tip-view" v-if="showTipLeft">*必填项</view>
					</view>
					<view class="ph-pop-mid-view">：</view>
					<view>
						<view class="rightInputView">
							<input class="rightInput" type="text" v-model="currenItem['watemarkValue']"
								@input="rightInput()" placeholder="请输入内容" maxlength="30" />
						</view>
						<view class="ph-pop-tip-view" v-if="showTipRight">*必填项</view>
					</view>
				</view>
				<text class="popNoticeText u-m-t-20">示例：</text>
				<text class="popNoticeText">工程队名称：蓝天工程队</text>
				<view class="popBtnView">
					<u-button :custom-style="customStyleCancel" hover-class="none" shape="circle" type="primary" @click="popCancelClick()">
						取消
					</u-button>
					<u-button :custom-style="customStyleSave" shape="circle" type="primary" @click="popSaveClick()">
						保存
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemId: '',
				isSaveOrigine: true,
				isPopShow: false,
				icon_close_new: '',
				result: {
					hasOrigin: true,
					lowerLeft: {
						body: []
					}
				},
				currenItem: {
					'watemarkText': '',
					'watemarkValue': ''
				},
				editingItem: {},
				showTipLeft: false,
				showTipRight: false,
				loading: true
			}
		},
		computed: {
			itemList() {
				if (this.result['lowerLeft']) {
					var arr = this.result['lowerLeft']['body']
					return arr.filter((item) => {
						return item.watemark_type === '备注'
					})
				} else {
					return []
				}

			},
			showTitleSwitch() {
				return this.result['lowerLeft'].hasOwnProperty('title')
			},
			customStyleCancel() {
				return {
					'background-color': '#D1D4D4',
					'width': '280rpx',
					'height': '96rpx'
				}
			},
			customStyleSave() {
				return {
					'background-color': '##2272FF',
					'width': '280rpx',
					'height': '96rpx',
					'margin-left': '50rpx'
				}
			}
		},
		onLoad(e) {
			getApp().trackPage('水印设置页')
			const globalData = getApp().globalData
			this.icon_close_new = globalData.icon_close_new
			this.systemId = globalData.photo.product.systemId
		},
		methods: {
			//保存原图 开关
			handleOrigineChange: function(e) {
				this.result['hasOrigin'] = !this.result['hasOrigin']
				this.saveUserWatermark()
			},

			handleClickTitleSwitch: function(e) {
				var string = this.result['lowerLeft']['title'] ? '水印标题不可关闭' : '请先编辑该自定义项'
				uni.showToast({
					icon: 'none',
					title: string
				})
			},

			//自定义 开关
			itemChange: function(item, ikey) {
				if (item['watemarkValue']) {
					// 修改
					item['enable'] = !item['enable']
					this.saveUserWatermark()
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先编辑该自定义项'
					})
				}
			},

			//自定义 点击
			itemClick: function(item, ikey) {
				if (ikey === -1) {
					this.currenItem = {
						'watemarkText': '水印标题',
						'watemarkValue': this.result['lowerLeft']['title'],
						'type': 'title_text'
					}
				} else {
					this.editingItem = item
					this.currenItem = {
						...item
					}
				}

				this.isPopShow = true
			},

			//左侧输入框
			leftInput: function(e) {
				if (this.currenItem['watemarkText']) {
					this.showTipLeft = false
				}

			},

			//右侧输入框
			rightInput: function(e) {
				if (this.currenItem['watemarkValue']) {
					this.showTipRight = false
				}
			},

			//自定义弹窗 关闭
			popCancelClick: function() {
				this.isPopShow = false
				this.currenItem = {
					'watemarkText': '',
					'watemarkValue': ''
				}
			},

			handlePopClose() {
				this.showTipLeft = false,
				this.showTipRight = false
			},

			//自定义弹窗 保存
			popSaveClick: function() {
				if (this.currenItem['watemarkText'] && this.currenItem['watemarkValue']) {
					this.isPopShow = false
					if (this.currenItem.type === 'title_text') {
						this.result['lowerLeft']['title'] = this.currenItem['watemarkValue']
					} else {
						this.editingItem['watemarkText'] = this.currenItem['watemarkText']
						this.editingItem['watemarkValue'] = this.currenItem['watemarkValue']
						this.editingItem['enable'] = true
					}
					this.saveUserWatermark()
				} else {
					// 提示
					if (!this.currenItem['watemarkText']) {
						this.showTipLeft = true
					}
					if (!this.currenItem['watemarkValue']) {
						this.showTipRight = true
					}
				}

			}


		}
	}
</script>

<style>
	.backView {
		background-color: #FAFAFA;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/*
	.firstItemView{
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 80rpx;
		padding-bottom: 80rpx;
		border-bottom: 2rpx solid #F4F5F7;
	} */

	.itemView {
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 54rpx;
		padding-bottom: 54rpx;

	}

	.itemView.firstItem {
		border-bottom: 2rpx solid #F4F5F7;
	}

	.itemTitleView {
		background-color: #FFFFFF;
		width: 80%;
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
	}

	.itemTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.itemNotice {
		font-size: 26rpx;
		color: #666666;
		margin-top: 4rpx;
	}

	.itemSwitch {
		margin-right: 30rpx;
		transform: scale(0.78, 0.75);
	}

	.shadowBackView {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.popCenterView {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

	}

	.popTitle {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 50rpx;
		padding-left: 30rpx;
	}

	.inputBackView {
		margin-top: 52rpx;
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		display: flex;
		align-items: flex-start;
	}

	.leftInputView {
		width: 220rpx;
		height: 72rpx;
		border: 2rpx solid #666666;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.leftInput {
		width: 180rpx;
		height: 32rpx;
	}

	.ph-pop-left-view {
		margin-left: 30rpx;
	}

	.ph-pop-tip-view {
		color: #F56C6C;
	}

	.ph-pop-mid-view {
		margin-top: 20rpx;
	}

	.rightInputView {
		width: 360rpx;
		height: 72rpx;
		border: 2rpx solid #666666;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rightInput {
		width: 320rpx;
		height: 32rpx;
	}

	.popNoticeText {
		font-size: 26rpx;
		color: #666666;
		padding-left: 30rpx;
	}

	.popBtnView {
		margin-top: 110rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .popCancelBtn {
		background-color: #D1D4D4;
		width: 280rpx;
		height: 96rpx;
		border-radius: 48rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	} */

/* 	.popSaveBtn {
		background-color: #2272FF;
		width: 280rpx;
		height: 96rpx;
		border-radius: 48rpx;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	} */

/* 	.popBtnText {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: 600;
	} */
</style>
