<template>
  <view class="uv-album">
    <view
      class="uv-album__row"
      ref="uv-album__row"
      v-for="(arr, index) in showUrls"
      :forComputedUse="albumWidth"
      :key="index"
    >
      <view
        class="uv-album__row__wrapper"
        v-for="(item, index1) in arr"
        :key="index1"
        :style="[imageStyle(index + 1, index1 + 1)]"
        @tap.stop="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
      >
        <image
          :src="getSrc(item)"
          :mode="
            urls.length === 1
              ? imageHeight > 0
                ? singleMode
                  : 'widthFix'
                  : multipleMode
          "
          :style="[
            {
              width: imageWidth,
              height: imageHeight
            }
          ]"
        ></image>
        <view
          v-if="
            showMore &&
            urls.length > rowCount * showUrls.length &&
            index === showUrls.length - 1 &&
            index1 === showUrls[showUrls.length - 1].length - 1
          "
          class="uv-album__row__wrapper__text"
        >
          <uv-text
            :text="`+${urls.length - maxCount}`"
            color="#fff"
            :size="$uv.getPx(multipleSize) * 0.3"
            align="center"
            customStyle="justify-content: center"
          ></uv-text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	// #ifdef APP-NVUE
	// 由於weex為阿裏的KPI業績考核的產物，所以不支持百分比單位，這裏需要通過dom查詢組件的寬度
	const dom = uni.requireNativePlugin('dom')
	// #endif

	/**
	 * Album 相冊
	 * @description 本組件提供壹個類似相冊的功能，讓開發者開發起來更加得心應手。減少重復的模板代碼
	 * @tutorial https://www.uvui.cn/components/album.html
	 * @property {Array}           urls             圖片地址列表 Array<String>|Array<Object>形式
	 * @property {String}          keyName          指定從數組的對象元素中讀取哪個屬性作為圖片地址
	 * @property {String | Number} singleSize       單圖時，圖片長邊的長度  （默認 180 ）
	 * @property {String | Number} multipleSize     多圖時，圖片邊長 （默認 70 ）
	 * @property {String | Number} space            多圖時，圖片水平和垂直之間的間隔 （默認 6 ）
	 * @property {String}          singleMode       單圖時，圖片縮放裁剪的模式 （默認 'scaleToFill' ）
	 * @property {String}          multipleMode     多圖時，圖片縮放裁剪的模式 （默認 'aspectFill' ）
	 * @property {String | Number} maxCount         取消按鈕的提示文字 （默認 9 ）
	 * @property {Boolean}         previewFullImage 是否可以預覽圖片 （默認 true ）
	 * @property {String | Number} rowCount         每行展示圖片數量，如設置，singleSize和multipleSize將會無效	（默認 3 ）
	 * @property {Boolean}         showMore         超出maxCount時是否顯示查看更多的提示 （默認 true ）
	 *
	 * @event    {Function}        albumWidth       某些特殊的情況下，需要讓文字與相冊的寬度相等，這裏事件的形式對外發送  （回調參數 width ）
	 * @example <uv-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></uv-album>
	 */
	export default {
		name: 'uv-album',
		mixins: [mpMixin, mixin],
		emits: ['albumWidth'],
		props: {
			// 圖片地址，Array<String>|Array<Object>形式
			urls: {
				type: Array,
				default: () => []
			},
			// 指定從數組的對象元素中讀取哪個屬性作為圖片地址
			keyName: {
				type: String,
				default: ''
			},
			// 單圖時，圖片長邊的長度
			singleSize: {
				type: [String, Number],
				default: 180
			},
			// 多圖時，圖片邊長
			multipleSize: {
				type: [String, Number],
				default: 70
			},
			// 多圖時，圖片水平和垂直之間的間隔
			space: {
				type: [String, Number],
				default: 6
			},
			// 單圖時，圖片縮放裁剪的模式
			singleMode: {
				type: String,
				default: 'scaleToFill'
			},
			// 多圖時，圖片縮放裁剪的模式
			multipleMode: {
				type: String,
				default: 'aspectFill'
			},
			// 最多展示的圖片數量，超出時最後壹個位置將會顯示剩余圖片數量
			maxCount: {
				type: [String, Number],
				default: 9
			},
			// 是否可以預覽圖片
			previewFullImage: {
				type: Boolean,
				default: true
			},
			// 每行展示圖片數量，如設置，singleSize和multipleSize將會無效
			rowCount: {
				type: [String, Number],
				default: 3
			},
			// 超出maxCount時是否顯示查看更多的提示
			showMore: {
				type: Boolean,
				default: true
			},
			...uni.$uv?.props?.album
		},
		data() {
			return {
				// 單圖的寬度
				singleWidth: 0,
				// 單圖的高度
				singleHeight: 0,
				// 單圖時，如果無法獲取圖片的尺寸信息，讓圖片寬度默認為容器的壹定百分比
				singlePercent: 0.6
			}
		},
		watch: {
			urls: {
				immediate: true,
				handler(newVal) {
					if (newVal.length === 1) {
						this.getImageRect()
					}
				}
			}
		},
		computed: {
			imageStyle() {
				return (index1, index2) => {
					const { space, rowCount, multipleSize, urls } = this;
					const rowLen = this.showUrls.length;
					const allLen = this.urls.length;
					const style = {
						marginRight: this.$uv.addUnit(space),
						marginBottom: this.$uv.addUnit(space)
					}
					// 如果為最後壹行，則每個圖片都無需下邊框
					if (index1 === rowLen) style.marginBottom = 0
					// 每行的最右邊壹張和總長度的最後壹張無需右邊框
					if (
						index2 === rowCount ||
						(index1 === rowLen &&
							index2 === this.showUrls[index1 - 1].length)
					)
						style.marginRight = 0
					return style
				}
			},
			// 將數組劃分為二維數組
			showUrls() {
				const arr = []
				this.urls.map((item, index) => {
					// 限制最大展示數量
					if (index + 1 <= this.maxCount) {
						// 計算該元素為第幾個素組內
						const itemIndex = Math.floor(index / this.rowCount)
						// 判斷對應的索引是否存在
						if (!arr[itemIndex]) {
							arr[itemIndex] = []
						}
						arr[itemIndex].push(item)
					}
				})
				return arr
			},
			imageWidth() {
				return this.$uv.addUnit(
					this.urls.length === 1 ? this.singleWidth : this.multipleSize
				)
			},
			imageHeight() {
				return this.$uv.addUnit(
					this.urls.length === 1 ? this.singleHeight : this.multipleSize
				)
			},
			// 此變量無實際用途，僅僅是為了利用computed特性，讓其在urls長度等變化時，重新計算圖片的寬度
			// 因為用戶在某些特殊的情況下，需要讓文字與相冊的寬度相等，所以這裏事件的形式對外發送
			albumWidth() {
				let width = 0
				if (this.urls.length === 1) {
					width = this.singleWidth
				} else {
					width =
						this.showUrls[0].length * this.$uv.getPx(this.multipleSize) +
						this.$uv.getPx(this.space) * (this.showUrls[0].length - 1)
				}
				this.$emit('albumWidth', width)
				return width
			}
		},
		methods: {
			// 預覽圖片
			onPreviewTap(url) {
				const urls = this.urls.map((item) => {
					return this.getSrc(item)
				})
				uni.previewImage({
					current: url,
					urls
				})
			},
			// 獲取圖片的路徑
			getSrc(item) {
				return this.$uv.test.object(item) ?
					(this.keyName && item[this.keyName]) || item.src :
					item
			},
			// 單圖時，獲取圖片的尺寸
			// 在小程序中，需要將網絡圖片的的域名添加到小程序的download域名才可能獲取尺寸
			// 在沒有添加的情況下，讓單圖寬度默認為盒子的壹定寬度(singlePercent)
			getImageRect() {
				const src = this.getSrc(this.urls[0])
				uni.getImageInfo({
					src,
					success: (res) => {
						// 判斷圖片橫向還是豎向展示方式
						const isHorizotal = res.width >= res.height
						this.singleWidth = isHorizotal ?
							this.singleSize :
							(res.width / res.height) * this.$uv.getPx(this.singleSize)
						this.singleHeight = !isHorizotal ?
							this.singleSize :
							(res.height / res.width) * this.singleWidth
					},
					fail: () => {
						this.getComponentWidth()
					}
				})
			},
			// 獲取組件的寬度
			async getComponentWidth() {
				// 延時壹定時間，以獲取dom尺寸
				await this.$uv.sleep(30)
				// #ifndef APP-NVUE
				this.$uGetRect('.uv-album__row').then((size) => {
					this.singleWidth = size.width * this.singlePercent
				})
				// #endif

				// #ifdef APP-NVUE
				// 這裏ref="uv-album__row"所在的標簽為通過for循環出來，導致this.$refs['uv-album__row']是壹個數組
				const ref = this.$refs['uv-album__row'][0]
				ref &&
					dom.getComponentRect(ref, (res) => {
						this.singleWidth = res.size.width * this.singlePercent
					})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	.uv-album {
		@include flex(column);
		&__row {
			@include flex(row);
			flex-wrap: wrap;
			&__wrapper {
				position: relative;
				&__text {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.3);
					@include flex(row);
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>