<template>
	<view class="K-Album-Content">
		<template v-for="(item,index) in lists">
			<view :key='index' class="Album-Img-Item" :style="{
					'width': `${width}rpx`,
					'height': `${height}rpx`,
					'margin-right': MarginDistance(index+1),
					'margin-bottom': Margin,
					'border-radius':`${radius}rpx`
					}">
				<!-- 图片 -->
				<view v-if="item['filetype'] == 'image'" class="Album-Img-Item-Img" @tap.stop="previewImage(index)">
					<image class="img" :src="item['url']" mode="aspectFill"></image>
					<!-- <u--image :showLoading="true"  :src="item['url']"></u--image> -->
				</view>
				<view class="Album-Img-Item-video" v-if="item['filetype'] == 'video'">
					<!-- 视频 -->
					<!-- <video :id="`Video${index}`" :src="item['url']"></video> -->
					<!-- 视频封面 -->
					<image class="img" :src="item['video_cover']" mode="aspectFill"></image>
				</view>
				<!-- 删除元素 -->
				<view v-if="deletable" class="Album-Img-Item-deletable" @click="deleteBtn(index)">
					<text class="icon iconfont icon-shanchu Album-Img-Item-deletable-icon"></text>
					<!-- <image class="Album-Img-Item-deletable-icon" src="/static/image/nolineimage/deletable-icon.png"
						mode=""></image> -->
				</view>
			</view>
		</template>
		<view class="append" @click="AddImages" v-if="lists.length < (Max-0) && isadd" :style="{
					'width': `${width}rpx`,
					'height': `${height}rpx`,
					'margin-right': MarginDistance(lists.length+1),
					'margin-bottom': Margin,
					'border-radius':`${radius}rpx`
					}">
			<!-- <image class="img" src="/static/image/add.png" mode=""></image> -->
			<view class="freight-row-up-img-el">
				+
			</view>
		</view>
	</view>
</template>

<script>
	import props from './props.js';
	/**
	 * Album 图片展示/上传组件
	 * 
	 * @width		展示图片/视频宽度
	 * @height		展示图片/视频高度
	 * @list	 	展示数组
	 * @deletable	是否显示删除按钮
	 * @WAdaptive	展示宽度是否自适应,当该属性为true时width无效,会根据所给左间距来动态计算每个块的宽度
	 * @rightM		左间距(xx)
	 * @bottoM		下间距(xx)
	 * @Max			做多展示几张
	 * @radius		圆角
	 */
	export default {
		mixins: [props],
		name: "K-Album",
		data() {
			return {
				lists: [],
				Margin: 0,
				linenumber: 0,
				index: -1,
				videotype: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv',
					'vob'
				],
				imgtype: ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd',
					'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'
				]
			};
		},
		async onReady() {
			let Element = await this.getElSize.call(this, 'K-Album-Content');
			// 单个元素宽度转为px
			let w = uni.upx2px(this['width']);
			// 每行几个
			let l = parseInt(Element['width'] / w);
			// 父元素宽度 - (每行几个 * 单个元素宽度) / 除最边元素以外的元素数量（因为最边元素不需要外边距）
			let Margin = ((Element['width'] - (w * l)) / (l - 1)) / (uni.upx2px(100) / 100) + 'rpx';
			this['linenumber'] = l;
			this['Margin'] = Margin;
		},
		computed: {
			// Style() {
			// 	this['index'] += 1;
			// 	console.log(this['index'], '12312');
			// 	return `width:${this['width']}rpx;height:${this['height']}rpx;margin-right:${((this['index'] + 1) % this['linenumber'] == 0) ? '' : this['Margin']}`
			// },
		},
		mounted() {
			console.log(this,'this');
			// 加载时判断展示数组是否存在元素
			if (this['list']['length'] > 0) {
				this['lists'] = this.DataReset(this['list']);
				console.log(this.DataReset(this['list']), '列表');
			}
		},
		methods: {
			/**
			 * @获取元素高度
			 * */
			getElSize(em) {
				return new Promise((res, rej) => {
					uni.createSelectorQuery().in(this).select(`.${em}`)
						.boundingClientRect(rect => {
							res(rect);
						})
						.exec();
				});
			},

			/**
			 * @删除按钮
			 * */
			async deleteBtn(i) {
				if (!this['deletable']) return;
				this['lists'].splice(i, 1);
				this.$emit('UpImg', this['lists'])
			},

			/**
			 * @检测类型
			 * */
			detectionType(file) {

			},

			MarginDistance(index) {
				return (index % this['linenumber'] == 0) ? '' : this['Margin']
			},

			/**
			 * @数据格式重置
			 * */
			DataReset(d) {
				let list = d.map(item => {
					if (Object.prototype.toString.call(item) == '[object String]') {
						if (!!item) {
							return {
								url: item,
								filetype: this.detectionType(item)
							}
						}

					} else if (Object.prototype.toString.call(item) == '[object Object]') {
						return {
							url: item[this['keyName']] || item['path'],
							filetype: this.detectionType(item[this['keyName']] || item['path']),
							video_cover: item['video_cover']
						}

					}
				});
				//		console.log(list);
				return list;
			},

			/**
			 * @添加图片
			 * */
			AddImages() {
				console.log(this.tool.uploadFile);
				this.tool.uploadFile().then(data => {
					let i = this.DataReset(data);
					this['lists'].push(...i);
					this.$emit('UpImg', this['lists'])
				})
			},

			/**
			 * @预览
			 * */
			previewImage(current) {
				let tempFilePaths = this['lists'].map(item => {
					return item['url']
				})
				uni.previewImage({
					current,
					urls: tempFilePaths,
					longPressActions: {
						// itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							//		console.log(err.errMsg);
						}
					}
				});
			},

			detectionType(url) {
				let xj = url.substring(url.lastIndexOf('.') + 1);
				if (this.imgtype.indexOf(xj) !== -1) {
					return 'image';
				} else if (this.videotype.indexOf(xj) !== -1) {
					return 'video'
				}
			}

		}
	}
</script>

<style lang="scss">
	.K-Album-Content {
		display: flex;
		flex-wrap: wrap;

		.Album-Img-Item {
			// background-color: red;
			overflow: hidden;
			position: relative;

			&-Img {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			&-video {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			&-deletable {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 0;
				right: 0;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				border-radius: 0 0 0 15rpx;
				z-index: 100;
				text-align: center;
				line-height: 30rpx;

				&-icon {
					width: 100%;
					height: 100%;
					font-size: 20rpx !important;
					color: #ffffff;
				}
			}
		}
	}

	.append {
		.img {
			width: 100%;
			height: 100%;
		}
	}


	@font-face {
		font-family: "iconfont";
		/* Project id 2903098 */
		src: url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.woff2?t=1654136213785') format('woff2'),
			url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.woff?t=1654136213785') format('woff'),
			url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.ttf?t=1654136213785') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-shanchu:before {
		content: "\e6f0";
	}
	.freight-row-up-img-el{
		width: 88rpx;
		height: 88rpx;
		background-color: #DEDEDE;
		margin-top: 20rpx;
		color: #999999;
		text-align: center;
		line-height: 80rpx;
		font-size: 80rpx;
	}
</style>
