<template>
	<view class="_vphoto" :class="{left}">
		<input type="hidden" :maxlength="-1" :name="name" :value="tvalue.value" style="display:none;" />
		<view class="_btn" :class="{_disabled:disabled}" @tap="photo_select" v-if="tvalue.imgs.length < num">
			<view class="_icon _photo"></view>
		</view>
		<ciy-gesture class="_pimg" v-for="(item,index) in tvalue.imgs" :key="index" :style="{'display':'block','width':showwh}" @toleft="toleft(index)" @toright="toright(index)">
			<view class="_del" :data-idx="index" @tap="photo_delone"></view>
			<image v-if="isimg(item)" :src="file_stor(item, '?50')" @tap="preview(index)" mode="widthFix" style="display:block;"></image>
			<video v-else-if="isvideo(item)" :id="'video' + index" :src="file_stor(item)" controls @tap="fullvideo('video' + index)" :show-fullscreen-btn="false" :style="{width:showwh,height:showwh}"></video>
			<view v-else class="_file">{{file_ext(item)}}</view>
		</ciy-gesture>
		<view class="_tip">{{tip}}</view>
		<canvas type="2d" id="canvas" :style="{'width':cvwidth+'px','height':cvheight+'px','top':-cvheight+'px'}" style="position:fixed;z-index:-999;left:100vw;"></canvas>
	</view>
	<view v-if="showrecam" :style="{top:header_height+'px'}" style="z-index:50005;position: fixed;left:0;right:0;bottom:0;background:linear-gradient(327deg,var(--bg1),var(--man3))">
		<image v-if="cammaskpng" :src="file_stor(cammaskpng)" class="abs t0 l0" :style="{pointerEvents: 'none',zIndex:50006,opacity:0.8,width: '100%', height: cameraheight + 'vw'}"></image>
		<camera style="border: 1px solid #cccccc;" device-position="back" flash="off" :style="{width: '100%', height: cameraheight + 'vw'}"></camera>
		<view>

		</view>
		<view style="opacity: 0.7;position: absolute;bottom:8em;left:0;right:0;text-align:center;">
			<button class="btn lg cc" @tap="recamphoto" style="margin-top:0.5em;">拍照</button>
		</view>
		<view style="position: absolute;bottom:1em;left:0;right:0;">
			<view v-if="!camheight">
				<view style="position: absolute;bottom:0.5em;right:0.8em;">
					<ciy-select :rows="2" itemalign="center" :minselectsearch="20" :range="recamrange" v-model="cameraheight" @change="setcamheight"></ciy-select>
				</view>
				<view style="position: absolute;bottom:0.2em;left:0.5em;">
					<button class="btn def" @tap="setcamaddheight(2)">↓</button>
					<button class="btn def" @tap="setcamaddheight(-2)">↑</button>
					<button class="btn smm def" @tap="setcamswapheight()" style="padding:0.8em 1em;">转向</button>
				</view>
			</view>
			<view class="px3 flex flex-center" style="gap:0.2em;" v-if="recamimgs.length > 0">
				<image v-for="img in recamimgs.slice(-6)" :src="img" style="height:3em;width:3em;border:1px solid var(--bg9);border-radius: 5px;"></image>
				<view class="flex1 px2" style="font-size:1.5em;">x{{recamimgs.length}}</view>
			</view>
			<view style="text-align: center;">
				<button class="btn cc" @tap="closerecam" style="margin-top:0.5em;">完成</button>
				<!-- <view @tap="showrecam=false" style="display:inline-block;background: var(--man6);color: #ffffff;width: 1.5em;height: 1.5em;line-height:1.5em;border-radius: 50%;text-align: center;font-size: 2em;">✔</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			action: {
				type: String,
				default: ''
			},
			sourcetype: {
				type: String,
				default: 'camera,album,message' //rehcam
			},
			camheight: {
				type: String,
				default: ''
			},
			cammaskpng: {
				type: String,
				default: ''
			},
			filetype: {
				type: String,
				default: 'image' //all   image    video
			},
			ext: {
				type: String,
				default: ''
			},
			num: {
				type: [String, Number],
				default: 1
			},
			stor: {
				type: String,
				default: '/'
			},
			imgwidth: {
				type: [String, Number],
				default: 0
			},
			imgheight: {
				type: [String, Number],
				default: 0
			},
			maxkb: {
				type: [String, Number],
				default: 0
			},
			zipjpg: {
				type: [String, Number],
				default: 70
			},
			waterfont: {
				type: String,
				default: '28px Arial'
			},
			watertext: {
				type: String,
				default: ''
			},
			watertype: {
				type: String,
				default: ''
			},
			watercolors: {
				type: String,
				default: ''
			},
			wateralpha: {
				type: String,
				default: ''
			},
			waterpadding: {
				type: String,
				default: '30'
			},
			waterangle: {
				type: String,
				default: '-20'
			},
			showwh: {
				type: String,
				default: '4em'
			},
			path: {
				type: String,
				default: 'nopath'
			},
			saas: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				tip: '',
				updatevalue: false,
				val: '',
				showrecam: false,
				header_height: 0,
				cameraheight: '141.4',
				recamrange: [],
				recamimgs: [],
				cvwidth: 0,
				cvheight: 0
			};
		},
		watch: {
			value: {
				async handler(newD, oldD) {
					this.val = newD;
				},
				immediate: true
			},
			modelValue: {
				async handler(newD, oldD) {
					if (this.updatevalue) {
						this.updatevalue = false;
						return;
					}
					this.val = newD;
				},
				immediate: true
			},
			camheight: {
				async handler(newD, oldD) {
					var val = 0;
					if (newD)
						val = this.tofloat(newD);
					else {
						var dh = this.getstorage('_cameraheight_' + this.name);
						if (dh)
							val = this.tofloat(dh);
					}
					if (val < 10 || val > 200)
						return;
					this.cameraheight = val + '';
				},
				immediate: true
			},
			camrefheight: {
				async handler(newD, oldD) {
					if (newD) {
						var url = this.file_stor(newD);
						url = url.replace('http://', 'https://');
						uni.getImageInfo({
							src: url,
							success: res => {
								this.cameraheight = this.toint(res.height * 100 / res.width) + '';
							}
						});
					}
				},
				immediate: true
			},
		},
		computed: {
			tvalue() {
				var v = this.val;
				var ret = {};
				ret.value = v;
				var pimgs = v.split('~');
				ret.imgs = [];
				for (var i in pimgs) {
					if (!pimgs[i])
						continue;
					ret.imgs.push(pimgs[i]);
				}
				return ret;
			}
		},
		mounted() {
			var app = getApp();
			this.header_height = app.globalData._header_statusbar_height;
			this.recamrange.push({
				id: '100',
				name: '1:1'
			});
			this.recamrange.push({
				id: '63',
				name: '名片'
			});
			this.recamrange.push({
				id: '75',
				name: '4:3'
			});
			this.recamrange.push({
				id: '134',
				name: '3:4'
			});
			this.recamrange.push({
				id: '56',
				name: '16:9'
			});
			this.recamrange.push({
				id: '179',
				name: '9:16'
			});
			this.recamrange.push({
				id: '162',
				name: '黄金 纵向'
			});
			this.recamrange.push({
				id: '62',
				name: '黄金 横向'
			});
			this.recamrange.push({
				id: '141',
				name: 'A4 纵向'
			});
			this.recamrange.push({
				id: '71',
				name: 'A4 横向'
			});
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.tvalue.value
				});
			}
		},
		methods: {
			toleft(idx) {
				if (idx == 0)
					return;
				var imgs = [...this.tvalue.imgs];
				var swap = imgs[idx];
				imgs[idx] = imgs[idx - 1];
				imgs[idx - 1] = swap;
				this.val = imgs.join('~');
				this.updatevalue = true;
				this.$emit('update:modelValue', this.val);
				this.$emit('change', {
					name: this.name,
					from: 'toleft',
					value: this.val
				});
			},
			toright(idx) {
				if (this.tvalue.imgs.length == idx + 1)
					return;
				var imgs = [...this.tvalue.imgs];
				var swap = imgs[idx];
				imgs[idx] = imgs[idx + 1];
				imgs[idx + 1] = swap;
				this.val = imgs.join('~');
				this.updatevalue = true;
				this.$emit('update:modelValue', this.val);
				this.$emit('change', {
					name: this.name,
					from: 'toright',
					value: this.val
				});
			},
			preview(idx) {
				var imgs = [...this.tvalue.imgs];
				for (var i in imgs) {
					imgs[i] = this.file_stor(imgs[i]);
				}
				uni.previewImage({
					current: idx,
					indicator: 'default',
					urls: imgs
				});
			},
			fullvideo(id) {
				const videoContext = uni.createVideoContext(id, this);
				videoContext.requestFullScreen({
					direction: 0
				})
			},
			async photo_select(b) {
				if (this.disabled)
					return;
				if (this.tip)
					return this.toast(this.lang('upload.uploadingmsg'));

				var items = [];
				var sourcetypes = this.sourcetype.split(',');
				if (sourcetypes.includes('rehcam')) {
					items.push({
						act: 'rehcam',
						name: this.lang('upload.menu_rehcam')
					});
				}
				if (sourcetypes.includes('camera')) {
					items.push({
						act: 'camera',
						name: this.lang('upload.menu_camera')
					});
				}
				if (sourcetypes.includes('album')) {
					items.push({
						act: 'album',
						name: this.lang('upload.menu_album')
					});
				}
				if (sourcetypes.includes('message')) {
					items.push({
						act: 'message',
						name: this.lang('upload.menu_message')
					});
				}
				var item = await this.popmenu({
					items,
					one: true
				});
				if (item.act == 'rehcam')
					this.vrehcam();
				if (item.act == 'camera')
					this.vcamera();
				if (item.act == 'album')
					this.valbum();
				if (item.act == 'message')
					this.vmessage();
			},
			photo_delone(b) {
				if (this.disabled)
					return;
				if (this.tip)
					return this.toast(this.lang('upload.uploading'));
				var imgs = [...this.tvalue.imgs];
				imgs.splice(b.currentTarget.dataset.idx, 1);
				this.val = imgs.join('~');
				this.updatevalue = true;
				this.$emit('update:modelValue', this.val);
				this.$emit('change', {
					name: this.name,
					from: 'del',
					value: this.val
				});
			},
			addfile(url, from) {
				var imgs = [...this.tvalue.imgs, url];
				this.val = imgs.join('~');
				if (!from)
					return;
				this.updatevalue = true;
				this.$emit('update:modelValue', this.val);
				this.$emit('change', {
					name: this.name,
					from: from,
					value: this.val
				});
				if (from == 'rehcam') {
					if (this.tvalue.imgs.length < this.num) {
						this.vrehcam();
					}
				}
			},
			setcamheight(e) {
				this.cameraheight = e.value.id;
				this.setstorage('_cameraheight_' + this.name, this.cameraheight);
			},
			setcamaddheight(hei) {
				var h = this.tofloat(this.cameraheight) + hei;
				if (h < 10)
					return;
				this.cameraheight = h + '';
				this.setstorage('_cameraheight_' + this.name, this.cameraheight);
			},
			setcamswapheight(hei) {
				var h = this.tofloat(this.cameraheight);
				this.cameraheight = Math.ceil(10000 / h) + '';
				this.setstorage('_cameraheight_' + this.name, this.cameraheight);
			},
			recamphoto() {
				const ctx = wx.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: async (res) => {
						this.showrecam = false;
						this.recamimgs.push(res.tempImagePath);
						this.upfiles([res], 'rehcam');
					}
				});
			},
			closerecam() {
				this.showrecam = false;
				this.recamimgs = [];
			},
			async vrehcam(b) {
				this.showrecam = true;
			},
			async vcamera(b) {
				if (!uni.chooseMedia) {
					return this.vh5();
				}
				var count = this.toint(this.num) - this.tvalue.imgs.length;
				if (count <= 0)
					return this.toast(this.lang('upload.maxmsg').replace('{n}', this.num));
				var opt = {};
				opt.count = 1;
				if (this.filetype == 'all') {
					opt.mediaType = ['mix'];
				}
				if (this.filetype == 'image') {
					opt.mediaType = ['image'];
				}
				if (this.filetype == 'video') {
					opt.mediaType = ['video'];
				}
				opt.sizeType = ['original', 'compressed'];
				opt.sourceType = ['camera'];
				opt.maxDuration = 60;
				var [err, retchoose] = await this.go(uni.chooseMedia(opt));
				if (err)
					return console.warn('chooseMedia', err);
				this.upfiles(retchoose.tempFiles, 'camera');
			},
			async valbum(b) {
				if (!uni.chooseMedia) {
					return this.vh5();
				}
				var count = this.toint(this.num) - this.tvalue.imgs.length;
				if (count <= 0)
					return this.toast(this.lang('upload.maxmsg').replace('{n}', this.num));
				var opt = {};
				opt.count = count;
				if (this.filetype == 'all') {
					opt.mediaType = ['mix'];
				}
				if (this.filetype == 'image') {
					opt.mediaType = ['image'];
				}
				if (this.filetype == 'video') {
					opt.mediaType = ['video'];
				}
				opt.sizeType = ['original', 'compressed'];
				opt.sourceType = ['album'];
				var [err, retchoose] = await this.go(uni.chooseMedia(opt));
				if (err)
					return console.warn('chooseMedia', err);
				this.upfiles(retchoose.tempFiles, 'album');
			},
			async vmessage(b) {
				if (!uni.chooseMessageFile) {
					return this.vh5();
				}
				var count = this.toint(this.num) - this.tvalue.imgs.length;
				if (count <= 0)
					return this.toast(this.lang('upload.maxmsg').replace('{n}', this.num));
				var opt = {};
				opt.count = count;
				if (this.filetype == 'all') {
					if (this.ext) {
						opt.type = 'file';
						opt.extension = this.ext.split(',');
					} else {
						opt.type = 'all';
					}
				}
				if (this.filetype == 'image') {
					opt.type = 'image';
				}
				if (this.filetype == 'video') {
					opt.type = 'video';
				}
				var [err, retchoose] = await this.go(uni.chooseMessageFile(opt));
				if (err)
					return console.warn('chooseMessageFile', err);
				this.upfiles(retchoose.tempFiles, 'message');
			},
			async vh5(b) {
				var count = this.toint(this.num) - this.tvalue.imgs.length;
				if (count <= 0)
					return this.toast(this.lang('upload.maxmsg').replace('{n}', this.num));
				var opt = {};
				opt.count = count;
				opt.sizeType = ['original', 'compressed'];
				opt.sourceType = ['camera', 'album'];
				var [err, retchoose] = await this.go(uni.chooseImage(opt));
				if (err)
					return console.warn('chooseImage', err);
				await this.upfiles(retchoose.tempFiles, 'h5');
			},
			async upfiles(temps, from) {
				var thos = this;
				var app = getApp();
				this.upcount = temps.length;
				this.tip = this.lang('upload.tip') + ' 0/' + this.upcount;
				this.upidx = 0;
				var opn = {};
				//opn.canvasid = 'canvas';
				opn.post = {
					from: from
				};
				opn.basepath = this.path;
				opn.saas = this.saas;
				opn.stor = this.stor;
				opn.action = this.action;
				opn.maxkb = this.toint(this.maxkb);
				opn.imgwidth = this.toint(this.imgwidth);
				opn.imgheight = this.toint(this.imgheight);
				opn.zipjpg = this.toint(this.zipjpg);
				opn.watertext = this.watertext;
				opn.watertype = this.watertype;
				opn.waterpadding = this.toint(this.waterpadding);
				opn.waterangle = this.toint(this.waterangle);
				opn.wateralpha = this.tofloat(this.wateralpha);
				if (opn.wateralpha <= 0) {
					if (this.watertype == 'full')
						opn.wateralpha = 0.1;
					else
						opn.wateralpha = 1;
				}
				if (this.watercolors)
					opn.watercolors = this.watercolors.split(',');
				await this.file_uploads(temps, opn, {
					success(url, file) {
						thos.upidx++;
						thos.tip = thos.lang('upload.tip') + ' ' + thos.upidx + '/' + thos.upcount;
						if (thos.upidx == thos.upcount) {
							thos.tip = '';
							thos.addfile(url, from);
						} else {
							thos.addfile(url);
						}
					},
					fail(err, gf, al) {
						console.warn(err, gf, al);
						thos.upidx++;
						thos.tip = '';
						return thos.alert('Upload Fail:' + err);
					}
				});
			}
		}
	}
</script>

<style scoped>
	._vphoto ._photo {
		background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnPjxwYXRoIGQ9J00xMjUuOTUyIDIzNC40OTZoMTY2LjkxMmMyMS41MDQgMCAyOS42OTYtNDguMTI4IDU0LjI3Mi03MS42OCA3LjE2OC03LjE2OCAyOC42NzItMTIuMjg4IDM2Ljg2NC0xMi4yODhoMjc4LjUyOGM4LjE5MiAwIDI5LjY5NiAxMS4yNjQgMzYuODY0IDI1LjYgMTMuMzEyIDI0LjU3NiAxMi4yODggNTguMzY4IDI1LjYgNTguMzY4aDE4MS4yNDhjNDYuMDggMCA4My45NjggMzcuODg4IDgzLjk2OCA4My45Njh2NDc0LjExMmMwIDQ2LjA4LTM3Ljg4OCA4My45NjgtODMuOTY4IDgzLjk2OEgxMjUuOTUyYy00Ni4wOCAwLTgzLjk2OC0zNy44ODgtODMuOTY4LTgzLjk2OFYzMTcuNDRjMS4wMjQtNDYuMDggMzcuODg4LTgyLjk0NCA4My45NjgtODIuOTQ0eicgZmlsbD0nIzNFQkRGRic+PC9wYXRoPjxwYXRoIGQ9J002MzQuODggMjc1LjQ1NmgxNC4zMzZjMTEuMjY0IDAgMjAuNDggOS4yMTYgMjAuNDggMjAuNDhzLTkuMjE2IDIwLjQ4LTIwLjQ4IDIwLjQ4SDYzNC44OGMtMTEuMjY0IDAtMjAuNDgtOS4yMTYtMjAuNDgtMjAuNDggMC0xMC4yNCA5LjIxNi0yMC40OCAyMC40OC0yMC40OHpNNzMyLjE2IDI3NS40NTZoMTY2LjkxMmMxMS4yNjQgMCAyMC40OCA5LjIxNiAyMC40OCAyMC40OHMtOS4yMTYgMjAuNDgtMjAuNDggMjAuNDhINzMyLjE2Yy0xMS4yNjQgMC0yMC40OC05LjIxNi0yMC40OC0yMC40OCAwLTEwLjI0IDkuMjE2LTIwLjQ4IDIwLjQ4LTIwLjQ4eicgZmlsbD0nI0ZGRkZGRic+PC9wYXRoPjxwYXRoIGQ9J001MzAuNDMyIDM1OS40MjRjMTIyLjg4IDAgMjIzLjIzMiA5OS4zMjggMjIzLjIzMiAyMjMuMjMyIDAgMTIyLjg4LTk5LjMyOCAyMjMuMjMyLTIyMy4yMzIgMjIzLjIzMi0xMjIuODggMC0yMjMuMjMyLTk5LjMyOC0yMjMuMjMyLTIyMy4yMzIgMC0xMjIuODggMTAwLjM1Mi0yMjMuMjMyIDIyMy4yMzItMjIzLjIzMnonIGZpbGw9JyNBMkRFRkQnPjwvcGF0aD48L3N2Zz4=");
	}

	._vphoto {
		margin: 0.5em auto 0 auto;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-end;
		position: relative;
	}

	._vphoto.left {
		justify-content: flex-start;
	}

	._vphoto ._tip {
		position: absolute;
		top: 0.1em;
		left: 0.2em;
		line-height: 1em;
		font-size: 0.7em;
		color: #999999;
	}

	._vphoto>._btn {
		padding: 0.5em;
		width: 3em;
		height: 3em;
		margin: 0 0.5em 0.5em 0;
		border: 1px solid #cccccc;
		display: inline-block;
		border-radius: 0.3em;
		background: #ffffff;
	}

	._vphoto>._btn._disabled {
		background: #ebebeb;
		filter: grayscale(0.8);
	}

	._vphoto ._icon {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-size: cover;
	}

	._vphoto ._pimg {
		margin: 0 0.5em 0.5em 0;
		background: #ffffff;
		position: relative;
		border: 1px solid #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	._vphoto ._pimg ._file {
		margin: 1.2em 0;
		text-align: center;
	}

	._vphoto ._pimg image {
		width: 100%;
		height: 100%;
		border-radius: 0.3em;
	}

	._vphoto ._pimg ._del {
		background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTUxMiAzMC4xMTc2NDdhNDgxLjg4MjM1MyA0ODEuODgyMzUzIDAgMSAwIDQ4MS44ODIzNTMgNDgxLjg4MjM1MyA0ODEuODgyMzUzIDQ4MS44ODIzNTMgMCAwIDAtNDgxLjg4MjM1My00ODEuODgyMzUzeicgZmlsbD0nI0ZENDgzNyc+PC9wYXRoPjxwYXRoIGQ9J003MDUuMTc0NTg4IDY1Ny43MDkxNzZhMzMuOTcyNzA2IDMzLjk3MjcwNiAwIDEgMS00OC4xODgyMzUgNDcuODI2ODI0TDUxMiA1NjAuMDA3NTI5bC0xNDUuMjI3Mjk0IDE0NS44ODk4ODNhMzMuOTcyNzA2IDMzLjk3MjcwNiAwIDEgMS00OC4xODgyMzUtNDcuODI2ODI0bDE0NS40MDgtMTQ1Ljc2OTQxMkwzMTguNzY1MTc2IDM2Ni4yMzA1ODhhMzMuOTcyNzA2IDMzLjk3MjcwNiAwIDAgMSA0OC4xODgyMzYtNDcuODI2ODIzTDUxMiA0NjMuOTkyNDcxbDE0NS4yMjcyOTQtMTQ1LjcwOTE3N2EzMy45NzI3MDYgMzMuOTcyNzA2IDAgMSAxIDQ4LjE4ODIzNSA0Ny44MjY4MjRMNTU5Ljc2NjU4OCA1MTJ6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PC9zdmc+");
		width: 1.2em;
		height: 1.2em;
		position: absolute;
		top: -0.3em;
		right: -0.3em;
		z-index: 10;
	}
</style>