<template>
	<view style="display:flex;">
		<view v-if="picarr.length > 0 && label" style="width: 1em;margin-right: 0.5em;line-height: 1.2em;color: #999999;">{{label}}</view>
		<view v-if="type == 'thumb'" style="flex:1;">
			<video :id="'video' + index" v-for="(item,index) in videoarr" :key="index" :src="file_stor(item)" controls @tap="fullvideo('video' + index)" :show-fullscreen-btn="false" :style="{width:width,height:height,margin:'0 0.5em 0 0'}"></video>
			<image lazy-load :lazy-load-margin="0" @tap.stop="preview(index)" :src="item" v-for="(item,index) in picarr" :key="index" :mode="mode" :style="{width:width,height:height,margin:'0 0.5em 0 0'}" style="border-radius:0.3em;" />
			<view @tap.stop="openfile(index)" v-for="(item,index) in pdfarr" :key="index" :style="{width:width,height:height,lineHeight: height}" style="margin:0 0.5em 0 0;border-radius:0.3em;display:inline-block;vertical-align: top;border: 1px solid #cccccc;text-align: center;color:#000000;background: #ffffff;">{{lang('showimgs.att')}}{{index+1}}</view>
		</view>
		<view v-else style="flex:1;">
			<video :id="'video' + index" v-for="(item,index) in videoarr" :key="index" :src="file_stor(item)" controls @tap="fullvideo('video' + index)" :show-fullscreen-btn="false" :style="{width:width,margin:'0 0 -2px 0;'}"></video>
			<image lazy-load :lazy-load-margin="0" @tap.stop="preview(index)" :src="item" v-for="(item,index) in picarr" :key="index" :mode="mode" :style="{width:width}" style="margin:0 0 -2px 0;" />
			<view @tap.stop="openfile(index)" v-for="(item,index) in pdfarr" :key="index" :style="{width:width,height:height,lineHeight: height,margin:index==0?'0':'0 0.5em 0 0'}" style="border-radius:0.3em;display:inline-block;vertical-align: top;border: 1px solid #cccccc;text-align: center;color:#000000;background: #ffffff;">{{lang('showimgs.att')}}{{index+1}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '5em'
			},
			height: {
				type: String,
				default: '5em'
			},
			type: {
				type: String,
				default: 'thumb'
			},
			mode: {
				type: String,
				default: 'aspectFill'
			},
			whpre: {
				type: String,
				default: '?50'
			},
		},
		data() {
			return {
				picarr: [],
				picoriarr: [],
				pdfarr: [],
				videoarr: [],
			};
		},
		watch: {
			src(newD, oldD) {
				this.fill();
			}
		},
		created() {
			this.fill();
		},
		methods: {
			fill() {
				this.picarr = [];
				this.picoriarr = [];
				var ps = this.src.split('~');
				var images = [];
				for (var i = 0; i < ps.length; i++) {
					if (ps[i].length == 0)
						continue;
					var ind = ps[i].lastIndexOf('.');
					var ext = ps[i].substring(ind + 1).toUpperCase();
					if (ext == 'JPG' || ext == 'JPEG' || ext == 'GIF' || ext == 'PNG')
						images.push(ps[i]);
					else if (ext == 'MP4')
						this.videoarr.push(ps[i]);
					else
						this.pdfarr.push(ps[i]);
				}
				for (var i in images) {
					var ind = images[i].indexOf('|');
					var psm = '';
					var pbig = '';
					if (ind > -1) {
						psm = images[i].substr(0, ind);
						pbig = images[i].substr(ind + 1);
					} else {
						pbig = images[i];
					}
					if (psm == '')
						psm = pbig;
					this.picarr.push(this.file_stor(psm));
					this.picoriarr.push(this.file_stor(pbig));
				}
			},
			preview(idx) {
				uni.previewImage({
					current: idx,
					indicator: 'default',
					urls: this.picoriarr
				});
			},
			openfile(idx) {
				var app = getApp();
				app.toast('Downloading...');
				var url = this.pdfarr[idx];
				if (url.substr(0, 1) == '/')
					url = app.globalData.jsnurl[this.srv] + url;
				uni.downloadFile({
					url: url,
					success: res => {
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true,
							fail: res => {
								app.toast('Open Document Fail:' + res.errMsg + '\n' + url);
							}
						});
					},
					fail: res => {
						app.toast('Down Document Fail:' + res.errMsg + '\n' + url);
					}
				});
			},
			fullvideo(id) {
				const videoContext = uni.createVideoContext(id, this);
				videoContext.requestFullScreen({
					direction: 0
				})
			}
		}
	}
</script>

<style scoped>

</style>