<template>
	<view class="">
		<view class="header">
			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
			<view class="info-block flex-row-between">
				<view class="info">
					<view class="title">智能替换</view>
					<view class="desc">请上传高质量原图图片，以便更好的识别替换</view>
				</view>
			</view>
		</view>

		<view class="main">

			<view class="box-pack-between ft32 item flex-y-center pd40">
				<text>上传原图 <text style="color:red">*</text> <text class="tips"></text></text>
				<image v-if="Original_img" @click="ChooseImage" :data-type="1" class="qrupimg" :src="URL+''+Original_img" mode="aspectFit"></image>
				<image v-else @click="ChooseImage" :data-type="1" class="qrupimg" src="../../static/images/upimg.png" mode="aspectFit"></image>
			</view>

			<view class="box-pack-between ft32  flex-y-center header-tab">
				<view class="flex-grow-11 flex-center" @click="bindOriginal" :class="make_type==1?'act':''">快速模式</view>
				<view class="flex-grow-11 flex-center" @click="bindOrigina2" :class="make_type==2?'act':''">高级模式</view>
				<!-- <view class="flex-center ft24">
					<switch :checked="make_type==1?true:false" name="is_real" @change="bindOriginal" style="transform:scale(0.7)" />
				</view> -->
			</view>

			<block v-if="make_type==2">
				<view class="item-bg pd40">
					<view class="box-pack-between ">
						<text>配置替换</text>
						<picker @change="bindPickerAdvertising" :range="Advertising">
							<text class="col">{{Advertising[Adver_index]}} <text class="iconfont icon-prev"></text></text>
						</picker>
					</view>

					<view class="item-pd20 box-pack-between flex-y-center" v-if="Adver_index==0">
						<view class="flex-grow-0">二维码（扫码/相册选取）</view>
						<image v-if="code_img" @click="bindCode" class="qrupimg_end" src="../../static/images/pay_bz.png" mode=""></image>
						<image v-else @click="bindCode" class="qrupimg_end" src="../../static/images/saoma.png" mode=""></image>
					</view>

					<navigator hover-class="none" url="../enabling/enabling" class="box-pack-between flex-y-center item-pd20" v-if="Adver_index==1">
						<text style="min-width: 150rpx;">{{$test.$test}}记录</text>
						<view class="col flex-y-center">
							<view class="content" v-if="code_url">
								{{code_url}}
							</view>
							<text v-else>请选择{{$test.$test}}记录</text>
							<text class="iconfont icon-prev"></text>
						</view>
					</navigator>

					<view class="box-pack-between flex-y-center item-pd20" v-if="Adver_index==2">
						<text style="min-width: 150rpx;">链接地址</text>
						<input maxlength="5000" @input="address" :value="code_url" adjust-position="false"
						 placeholder="请输入链接" class="tr"></input>
					</view>

				</view>
			</block>

			<view v-else class="pd40">
				<view class="">

					<view class="box-pack-between ft32 item" style="padding-top:0;">
						<text>{{$test.$test}}场景 </text>
						<view class="add-home flex-center ft24">
							<picker @change="bindPickerChange" :range-key="'name'" :range="allwayList">
								添加
							</picker>
						</view>
					</view>

					<view class="item-bg" v-if="arr.length>0">
						<view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of arr" :key='item.id'>
							<view class="flex-y-center flex-grow-1 pdr-20">
								<text style="margin-right: 10rpx;">{{item.name}}</text>
								<input class="flex-grow-1" type="text" @input="getScene" 
								:data-index="index" placeholder="请填写链接或内容" :value="item.way_power" />
							</view>
							<image class="item-del" @click="delScene" :data-index='index' src="../../static/images/del.png" mode=""></image>
						</view>
					</view>
				</view>


				<view class="box-pack-between ft32 item flex-y-center">
					<text>开启遮盖指引</text>
					<view class="flex-center ft24">
						<switch :checked="hj_state==1?true:false" @change="bindHj" style="transform:scale(0.7)" />
					</view>
				</view>	
			</view>
			<view class="tips pd40" style="margin-top: 20rpx;">
				ps:本功能目前处于尝鲜阶段，成功率并不是100%，后续将不断优化二维码替换成功率。
			</view>
		</view>

		<view class="btm-btn-replace">
			<view class="btm-btn" @click="Confirm">{{card_num?'修改替换':'确认替换'}}</view>
		</view>

	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				$test: this.$test.$test,
				Advertising: ["二维码", `${this.$test.$test}记录`, "链接"],
				Adver_index: 0,
				URL: getApp().globalData.URL,
				Original_img: "",
				code_img: "",
				save_url: "",
				code_url:"",
				make_type: 1,
				allwayList: [],
				arr: [],
				hj_state: 2,
				info: {},
				type:"",
			}
		},


		onLoad(e) {
			this.card_num = e.card_num;
			this.allways();
		},

		onShow(e) {

		},
		methods: {

			bindHj(e) {
				this.hj_state = e.target.value ? 1 : 2;
			},

			bindOriginal(e) {
				this.make_type = 1;
			},
			bindOrigina2(e) {
				this.make_type = 2;
			},

			bindPickerChange: function(e) {
				console.log(e, this.allwayList, "bindPickerChange", )
				if (this.arr.length > 0) {
					for (let i of this.arr) {
						if (i.id == this.allwayList[e.target.value].id) {
							uni.showToast({
								title: "场景重复",
								icon: 'none'
							})
							return
						}
					}
				}
				this.arr.push({
					id: this.allwayList[e.target.value].id,
					name: this.allwayList[e.target.value].name,
					super_id: this.allwayList[e.target.value].super_id,
				});
			},

			allways() {
				this.request({
					url: "funeng/allways",
					data: {},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.allwayList = res.data;
						this.arr.push({
							id: res.data[0].id,
							name: res.data[0].name,
							super_id: res.data[0].super_id,
						});
						if (this.card_num) {
							this.edit_detail();
						}
					}
				}).catch((res) => {});
			},

			edit_detail(e) {
				this.request({
					url: "picture/edit_detail",
					data: {
						card_num: this.card_num,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;
						this.Original_img = res.data.bg;
						this.make_type = res.data.make_type;
						this.type=res.data.is_video==1?6:0;
						
						if (res.data.make_type == 1) {
							
							this.save_url =res.data.url;
							this.arr = res.data.funeng;
							this.hj_state = res.data.hj_state;
							
						} else {
							
							if(res.data.type==1){
								this.code_img=true;
							}
							this.code_url =res.data.url;
							this.Adver_index = Number(res.data.type) - 1;
							this.arr = [];
							this.hj_state = 2;
							
							
							
						}
						// this.allmuban();
						// make_type
					}
				}).catch((res) => {

				});
			},

			qr_del(e) {
				var index = e.currentTarget.dataset.index;
				this.qr_arr.splice(index, 1)
			},


			getScene(e) {
				var index = e.currentTarget.dataset.index;
				this.arr[index].way_power = e.detail.value;
			},

			delScene(e) {
				var index = Number(e.currentTarget.dataset.index);
				this.arr.splice(index, 1);
			},

			bindPickerAdvertising(e) {
				this.save_url = "";
				this.code_url="";
				this.Adver_index = e.detail.value;
			},

			address(e) {
				this.code_url = e.detail.value;
			},

			bindCode(e) {
				console.log(e, "bangCode")
				// #ifdef MP-WEIXIN
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.code_img = true;
						this.code_url = res.result;
					}
				});
				// #endif
				// #ifdef H5
				getWXSign().then(res => {
					console.log('wx_getLocation');
					this.$wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: (res) => {
							console.log(res, "qrCode")
							this.code_url = res.resultStr;
							this.code_img = true;
						}
					})
				})
				// #endif
			},

			ChooseImage(e) {
				console.log(e, "rrr")
				let type = e.currentTarget.dataset.type;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						res.tempFilePaths.forEach((v, i) => {
							console.log(v)
							this.Upload({
								url: "Spread/upload_img",
								data: {
									url: v,
									type: 1,
									token: uni.getStorageSync("token"),
								}
							}).then(res => {
								console.log(res, "res")
								// if (this.make_type==1) {
								this.Original_img = res.file;
								this.save_url = res.url;
								// } else {
								// 	this.Original_img = res.file;
								// 	this.save_url ="";
								// }
							}).catch(err => {
								console.log(err, "err")
								this.Original_img = err.data.file;
								uni.showModal({
									title: '提示',
									content: '上传图片里的二维码无法识别，请重新上传原图',
									showCancel: false,
									confirmText: '再试一次',
									success: res => {
										if (res.confirm) {
											// #ifdef MP-WEIXIN
											uni.scanCode({
												success: (res) => {
													console.log('条码类型：' + res.scanType);
													console.log('条码内容：' + res.result);
													this.save_url = res.result;
												}
											});
											// #endif
											// #ifdef H5
											getWXSign().then(res => {
												console.log('wx_getLocation');
												this.$wx.scanQRCode({
													needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
													scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
													success: (res) => {
														console.log(res, "qrCode")
														this.save_url = res.resultStr;
													}
												})
											})
											// #endif	
										}
									},
									fail: () => {},
									complete: () => {}
								});
							});
						})
					},
				});
			},

			Confirm(e) {

				let arr = this.arr,
					qr_arr = this.qr_arr,
					way_id = [],
					way_power = [];
				for (let i of arr) {
					way_id.push(i.id);
					way_power.push(i.way_power)
				}

				if (this.make_type == 1 && way_power.length <= 0) {
					uni.showToast({
						title: "场景为空",
						icon: 'none'
					})
					return
				}

				if (!this.Original_img) {
					uni.showToast({
						title: "请上传原图",
						icon: "none"
					})
					return false
				}

				this.request({
					url: "picture/save",
					data: {
						id: this.card_num ? this.info.id : "",
						bg: this.Original_img,
						type: Number(this.Adver_index) + 1,
						url:  this.make_type==1?this.save_url:this.code_url,
						make_type: this.make_type,
						token: uni.getStorageSync("token"),
						is_video:this.type==6?1:2,
						way_id: way_id.join(","),
						way_power: way_power.join(","),
						hj_state: this.hj_state,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						let qrcode = res.data.data;
						uni.setStorageSync("qrcode", qrcode);
						uni.redirectTo({
							url: "./results?typpe=1"
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			}
		}
	}
</script>

<style>
	.content {
		word-wrap: break-word;
		word-break: break-all;
	}

	.qrupimg_end {
		width: 80rpx;
		height: 80rpx;
	}

	.header {
		width: 100%;
		height: 198rpx;
		position: relative;
	}

	.header .bg-img {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 198rpx;

	}

	.header .info-block {
		padding: 0 40rpx 0 48rpx;
		height: 198rpx;
	}

	.header .info-block .title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		line-height: 50rpx;
	}

	.header .info-block .desc {
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 40rpx;
		margin-top: 8rpx;
	}

	.header .info-block .btn {
		width: 120rpx;
		height: 56rpx;
		border: 2rpx solid #fff;
		border-radius: 28rpx;
		background-color: rgba(255, 255, 255, 0.2);
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
	}

	.col {
		color: #999999;
	}

	.item {
		padding: 30rpx 0;
		/* border-bottom: 1rpx solid #F1F1F1; */
	}

	.header-tab {
		height: 100rpx;
		background: #F1F1F1;
		font-size: 28rpx;
		margin-top: 50rpx;
		padding: 0 20px;
		margin-bottom: 60rpx;

	}

	.header-tab .flex-grow-11 {
		width: 40%;
		height: 79%;
	}

	.header-tab .act {
		color: #3387ff;
		background: #fff;
		border-radius: 8rpx;
	}

	.add-home {
		color: #FFFFFF;
		width: 126rpx;
		height: 54rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	}

	.item-bg {
		width: 670rpx;
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
	}

	.main {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		padding: 20rpx 0rpx 0;
	}

	.pd40 {
		padding: 0rpx 40rpx;
	}

	.qrupimg {
		width: 126rpx;
		height: 126rpx;
	}

	.headerMind {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #333333;
		padding: 44rpx 0 32rpx 0;
	}

	.item-pd20 {
		padding: 50rpx 0 20rpx 0;
	}

	.tr {
		text-align: right;
	}

	.btm-btn-replace {
		width: 100%;
		margin-top: 100rpx;
	}

	.btm-btn {
		width: 670rpx;
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #fff;
		line-height: 98rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.tips {
		font-size: 26rpx;
		color: #999;
	}

	.item-bg {
		width: 670rpx;
		/* height: 298rpx; */
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
	}

	.item-del {
		width: 40rpx;
		height: 40rpx;
	}

	.mar64 {
		margin-bottom: 64rpx;
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.hg200rpx {
		height: 100rpx;
	}

	.mgr57 {
		margin-bottom: 57rpx;
	}

	.item-bg-32 {
		margin-right: 32rpx;
	}
</style>
