<template>
	<view class="" @scroll="onScroll">
		<view v-if="showLength" class="total-box">
			查询结果 {{ actionList.length }}记录
		</view>
		<block v-if="actionList && actionList.length">
			<k-swipeAction-item
				v-for="(item, index) in actionList.slice(0, limitLength)"
				:key="index"
				:index="index"
				:options="options"
				:bgColor="bgColor"
				:btnWidth="btnWidth"
				:minHeight="minHeight"
				:show="item.show"
				:disabled="item.disabled"
				@open="open"
				@close="close"
				@optionClick="optionClick"
				@contentClick="contentClick"
			>
				<slot v-if="$scopedSlots.custom" name="custom" :index="index" :data="item"></slot>
				<view v-else class="k-item-content">
					<view class="department"
						:style="{
							background: item.departmentBgColor
						}"
					>{{ item.department }}</view>
					<view class="other">
						<view class="name">
							{{ item[nameKey] }}
							<slot name="rightContent" :data="item"></slot>
						</view>
						<slot name="bottomContent" :data="item"></slot>
					</view>
				</view>
			</k-swipeAction-item>
			<k-slide-last v-if="limit && showSlideLast" :loading="limitLength < actionList.length"></k-slide-last>
		</block>
		<k-empty v-else text="暂无信息！"></k-empty>
	</view>
</template>

<script>
	/**
	 * 滑动单元格group组件， 统计查询等， 可显示统计数量，统一操作配置等
	 * @description 滑动单元格group组件， 统计查询等， 可显示统计数量，统一操作配置等
	 * @property {type} list 数组形式，k-swipeAction-item列表数据
	 * @property {type} nameKey 员工姓名字段（默认：name）
	 * @property {type} autoClose 是否自动关闭（默认：true）
	 * @property {type} options k-swipeAction-item的左滑操作配置，（默认：[
			{text: '编辑', color: '#1a72ff'},
			{text: '取消', color: '#ff5353'}
		]）
	 * @property {type} showLength 顶部是否显示统计数据条数 （默认：true）
	 * @property {type} bgColor k-swipeAction-item的背景颜色（默认：#f0f0f0）
	 * @property {type} minHeight k-swipeAction-item组件最小高度（默认： 85）
	 * @property {type} btnWidth k-swipeAction-item组件单个操作按钮宽度（默认： 90）
	 * @property {type} limit 一页总显示item数 page * 20， page是第几页
	 * @property {type} showSlideLast 是否显示上拉加载提示文字， 与limit必须同时存在才会显示（默认：true）
	 */
export default {
	name: 'k-swipeAction',
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		nameKey: {
			type: String,
			default: 'name'
		},
		autoClose: {
			type: Boolean, 
			default: true
		},
		options: {
			type: Array,
			default() {
				return [
					{text: '编辑', color: '#1a72ff'},
					{text: '取消', color: '#ff5353'}
				]
			}
		},
		showLength: { // 显示长度
			type: Boolean,
			default: true
		},
		bgColor: {
			type: String,
			default: '#f0f0f0'
		},
		minHeight: {
			type: [String, Number],
			default: '85'
		},
		btnWidth: {
			type: [String, Number],
			default: '90'
		},
		limit: Number, // 显示个数
		showSlideLast: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			actionList: [],
			limitLength: 0
		};
	},
	watch: {
		list: {
			handler() {
				this.init()
			},
			deep: true
		},
		limit() {
			this.limitLength = this.limit ? this.limit : this.list.length
			// console.log(this.limitLength)
		}
	},
	mounted() {
		this.init()
		this.limitLength = this.limit ? this.limit : this.list.length
		// console.log(this.list, this.limitLength)
	},
	methods: {
		onScroll(e) {
			console.log("----", e)
		},
		optionClick(index, opIndex) { // 第几个， option的第几个
			this.actionList[index].show = false
			this.$emit('optionClick', index, opIndex)
		},
		contentClick(index) { // 第几个item
			this.$emit('contentClick', index)
		},
		open(e) {
			if(this.autoClose) {
				this.actionList[e].show = true
				this.actionList.map((val, ind) => {
					if(e != ind) {
						this.actionList[ind].show = false
					}
				})
			}
		},
		close(e) {
			this.actionList[e].show = false
		},
		init() {
			let list = JSON.parse(JSON.stringify(this.list))
			for (let s of list) {
				s.show = false
			}
			this.actionList = list
		}
	}
};
</script>

<style scoped lang="scss">
	.total-box {
		color: rgb(0, 122, 255);
		font-size: 16px;
		margin-bottom: 5px;
		letter-spacing: -1px;
	}
	.k-item-content {
		height: 100%;
		// background-color: aquamarine;
		display: flex;
		justify-content: space-between;
		.department {
			width: 110px;
			// background-color: #f00;
			font-size: 35px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
		.other {
			flex: 1;
			width: 0;
			// background-color: antiquewhite;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 10px;
			box-sizing: border-box;
			.name {
				font-size: 22px;
				font-weight: bold;
				display: flex;
				align-items: baseline;
				color: #303133;
			}
		}
	}
	.empty-box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		flex-direction: column;
		font-size: 16px;
		color: #aaa;
		.empty {
			width: 50%;
			margin-bottom: -10px;
		}
	}
</style>
