<template>
	<view class="item-box" :class="{
		'item-box-height': !list || list.length == 0
	}">
		<block v-if="list && list.length">
			<view
				v-for="(item, index) in list"
				:key="index"
				class="cursor item"
				hover-class="hover-class"
				hover-start-time="0"
				hover-stay-time="90"
				:class="{
					itemFullWidth: fullWidthIndex.includes(index) || getFullWidth(index),
					shadow: showTitleBg
				}"
				:style="{opacity: item.opacity ? item.opacity : 1}"
				@click="toDetails(item)"
			>
				<view 
					class="bg-black"
					:style="{ backgroundColor: showTitleBg ? '' : item.color, opacity: showTitleBg ? 1 : 0.8}"
				></view>
				<view class="slot-black">
					<view class="slot" :style="{ backgroundColor: !showTitleBg ? color : '', opacity: showTitleBg ? 0.2 : 0.8 }">
					</view>
						<!-- 卡片自定义内容 返回卡片数据data -->
						<slot class="" :data="item"></slot>
				</view>
				<view
					v-if="item[titleKey]"
					v-scroll
					:id="'titleKey' + index"
					class="item-name"
					:style="{
						color: showTitleBg ? color : '#f0f0f0',
						padding: showTitleBg ? '0 0 10px 15px' : '0 0 15px 15px'
					}"
				>
					<view
						:id="'ID' + index"
						style="white-space: nowrap; width: fit-content;"
					>{{ item[titleKey] }}</view>
					<view
						class="name-bg"
						:style="{
							background: showTitleBg ? color : '#f0f0f0',
							opacity: showTitleBg ? 0.2 : 0,
						}"
					></view>
				</view>
				<!-- <image v-if="icon || item[iconKey]" :style="{opacity: iconOpacity}" class="item-icon" :src="item[iconKey]" mode="heightFix"></image> -->
				<view class="item-icon iconfont" 
					:class="icon ? icon : item[iconKey]"
					:style="{opacity: iconOpacity}"
				></view>
			</view>
		</block>
		<k-empty v-else></k-empty>
	</view>
</template>

<script>
	/**
	 * 卡片列表组件，首页模块列表组件
	 * @description k-column-list 卡片列表组件，首页模块列表组件
	 * @property {Boolean} showTitleBg 是否显示标题背景， 默认显示标题背景，其他背景为白色， 为自定义设置参数
	 * @property {String} color 每个卡片的背景颜色
	 * @property {String, Number} opacity 全局透明度（默认：1）
	 * @property {String, Number} iconOpacity 图标透明度（默认：0.05）
	 * @property {String} icon 统一图标（字体图标， 若阿里图标， 需带iconfont）
	 * @property {Array} list 卡片列表数据（数组格式，icon：字体图标）
	 * @property {String} titleKey list内 标题字段（默认：name）
	 * @property {String} iconKey list内 标题字段（默认：icon）
	 * @property {Array} fullWidthIndex 卡片需要全宽的索引， 数组 [0,3]等， 默认数组索引为偶数的最后一条
	 * @event {Function()} toDetails 点击列表项（item）事件， 返回该项数据item
	 */
	export default {
		name:"k-column-list",
		props: {
			 // 卡片列表数据(icon：字体图标) eg:[{name: '', icon: '', color: ''}]
			list: Array,
			// 每个卡片的背景颜色
			color: String,
			// 是否显示标题背景， 默认显示标题背景，其他背景为白色， 为自定义设置参数
			showTitleBg: Boolean,
			 // 统一图标
			icon: String,
			 // 标题字段
			titleKey: {
				type: String,
				default: 'name'
			},
			 // 图标字段
			iconKey: {
				type: String,
				default: 'icon'
			},
			// 卡片需要全宽的索引， 数组 [0,3]等， 默认数组索引为偶数的最后一条
			fullWidthIndex: { 
				type: [Array],
				default: () => {
					return [];
				}
			},
			// 透明度
			opacity: {
				type: [String, Number],
				default: 1
			},
			// 图标透明度
			iconOpacity: {
				type: [String, Number],
				default: 0.05
			}
		},
		watch: {
			list: {
				deep: true,
				handler() {
					this.$forceUpdate()
				}
			}
		},
		methods: {
			toDetails(item) {
				// 卡片点击事件
				// @arg 点击对应卡片的数据
				this.$emit('toDetails', item)
			},
			getFullWidth(index) {
				if(this.fullWidthIndex.length == 0 && index%2 == 0 && index == this.list.length - 1) {
					return true;
				} else {
					return false;
				}
			},
			getWidthRoll(header, value) {
				if(document.getElementById(value) && document.getElementById(header)) {
					let width = document.getElementById(value).offsetWidth
					let oldWidth = document.getElementById(header).offsetWidth
					return width + 20 > oldWidth;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.hover-class {
		opacity: 0.8;
		transform: scale(.98);
		background-color: #eee;
		border-radius: 5px;
	}
	.item-box-height {
		height: 100%;
	}
	.item-box {
		width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		algin-items: center;
		flex-wrap: wrap;
		.cursor {
			cursor: pointer;
		}
		.itemFullWidth {
			width: 100% !important;
			height: 110px;
			margin-bottom: 10px;
			border-radius: 8px;
			position: relative;
			overflow: hidden;
		}
		.item {
			width: calc((100% - 10px) / 2);
			height: 110px;
			margin-bottom: 10px;
			border-radius: 8px;
			position: relative;
			overflow: hidden;
		}
		.shadow {
			box-shadow: 0px 1px 6px #bbb;
		}
	}
	.item-name::-webkit-scrollbar {
		display: none;
	}
	.item-name {
		position: absolute;
		height: 40px;
		bottom: 0px;
		left: 0px;
		right: 0;
		box-sizing: border-box;
		z-index: 1;
		font-size: 22px;
		line-height: 22px;
		font-weight: bold;
		display: flex;
		align-items: flex-end;
		position: relative;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		overflow: hidden;
		white-space: nowrap;
		.name-bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.text-roll {
			float: left;
			min-width: 100%;
			will-change: transform;
			animation: roll 8s linear infinite;
		}
		@keyframes roll {
			0%,
			20% {
				transform: translateX(0%);
			}
			100% {
				transform: translateX(-100%);
			}
		}
	}
	.item-icon {
		// height: 100%;
		position: absolute;
		bottom: -0px;
		right: -0px;
		transform: rotate(-15deg);
		z-index: 0;
		font-size: 80px;
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.slot-black {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 40px);
		z-index: 2;
		position: relative;
		.slot {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
	}
	.bg-black {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 0;
		border-radius: 8px;
		overflow: hidden;
	}
	

</style>