<template>
	<view class="t-wrap">
		<view class="t-collapse" v-if="renderData && renderData.length>0" :style="{'left':isComputed?'0rpx':'99999px'}">
			<view class="t-collapse-item" v-for="(item,index) in renderData" :key="index">
				<view :class="['t-collapse-title',{'open':item.open}]"
					:style="{'border-bottom': item.open?'1px solid #dedede':'none','font-size':fontSize+'rpx','color':color, 'font-weight':item.bold?'bold':'400'}"
					@click="itemClick(index)">
					{{item.title}}
					<view v-if="!item.hideArrow===true" :class="['t-icon iconfont','icon-arrow',{'open':item.open}]"
						:style="{'color':arrowColor,'font-size':(fontSize*1.5)+'rpx'}"></view>
				</view>
				<view :class="['t-collapse-wrap',{'chide':!item.open}]" :style="{'height':item.height}">
					<view :class="['t-collapse-content','t-cn-'+index]"
						:style="{'font-size':contentFontSize+'rpx','color':contentColor}">
						<view v-if="item.table===true" class="t-table">
							<view class="t-head-con">
								<view class="t-head" :style="{'width':'calc(100% / '+item.content.head.length+')'}"
									v-for="(thd,index0) in item.content.head" :key="index0">{{thd}}</view>
							</view>
							<view class="t-tr" v-for="(trow,index1) in item.content.data" :key="index1"
								:style="{'border-bottom':item.content.bordered===true?'1rpx solid #e6e6e6':'none'}">
								<view :style="{'width':'calc(100% / '+trow.length+')'}" class="t-td"
									v-for="(tad,index2) in trow" :key="index2">{{tad}}</view>
							</view>
						</view>
						<text v-else>{{item.content}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "KevyCollapse",
		props: {
			/**
			 * 是否开启手风琴效果
			 */
			accordion: {
				type: Boolean,
				default: true
			},
			/**
			 * 数据
			 */
			collapseData: {
				type: Array,
				default: []
			},
			/**
			 * 是否有边框
			 */
			bordered: {
				type: Boolean,
				default: true
			},
			/**
			 * 标题文字大小，单位rpx
			 */
			fontSize: {
				type: Number,
				default: 32
			},
			/**
			 * 标题文字颜色
			 */
			color: {
				type: String,
				default: '#333333'
			},
			/**
			 * 箭头颜色
			 */
			arrowColor: {
				type: String,
				default: '#333'
			},
			/**
			 * 内容文字大小
			 */
			contentFontSize: {
				type: Number,
				default: 32
			},
			/**
			 * 内容文字颜色
			 */
			contentColor: {
				type: String,
				default: '#666'
			}

		},
		data() {
			return {
				isComputed: false,
				renderData: JSON.parse(JSON.stringify(this.collapseData)),
			};
		},
		created() {
			if(this.collapseData && this.collapseData.length>0){
				this.initCollapse();
			}
		},
		watch: {
			collapseData(newVal, oldVal) {
				this.renderData = JSON.parse(JSON.stringify(newVal));
				this.isComputed = false;
				this.initCollapse();
			}
		},
		methods: {
			initCollapse(){
				this.$nextTick(() => {
					let arr = this.renderData;
					if(this.renderData && this.renderData.length>0){
						let is = this.accordion;
						let find = false;
						for (let i = 0; i < arr.length; i++) {
							//手风琴效果适配
							if (is && arr[i]['open']) {
								if (!find) {
									find = true;
								} else {
									this.$set(this.renderData[i], 'open', false);
								}
							}
							//更新更高
							this.updateItemHeight(i, true);
						}
						this.$nextTick(() => {
							this.isComputed = true;
						});
					}
				})
			},
			itemClick(index) {
				if (this.renderData[index]['disabled']) {
					return;
				}
				this.$set(this.renderData[index], 'open', !this.renderData[index]['open']);
				this.updateItemHeight(index);
				this.$emit("itemClick", {
					index,
					open: this.renderData[index]['open']
				});
			},
			updateItemHeight(index, isInit) {
				// let $this = this;
				// #ifdef MP-ALIPAY
				uni.createSelectorQuery().in().select('.t-cn-' + index).fields({
					size: true
				}, d => {
					this.$set(this.renderData[index], "height", this.renderData[index]['open'] ? (d.height +
						"px") : "0rpx");
				}).exec();
				// #endif
				// #ifndef MP-ALIPAY
				uni.createSelectorQuery().in(this).select('.t-cn-' + index).fields({
					size: true
				}, d => {
					this.$set(this.renderData[index], "height", this.renderData[index]['open'] ? (d.height +
						"px") : "0rpx");
					//手风琴适配
					if (this.renderData[index]['open'] && this.accordion && !isInit) {
						this.closeOther(index);
					}
				}).exec();
				// #endif
			},
			closeOther(idx) {
				let arr = this.renderData;
				for (let i = 0; i < arr.length; i++) {
					if (i != idx && arr[i]['open']) {
						this.$set(this.renderData[i], 'open', false);
						this.updateItemHeight(i);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/kevy-collapse/static/icon/iconfont.css';

	.t-wrap {
		width: 100%;
		box-sizing: border-box;

		.t-collapse {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			right: 99999px;

			.t-collapse-item {
				margin: 10rpx 0rpx;
				border: 2rpx solid #dedede;

				.t-collapse-title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: rgba(0, 0, 0, .6);
					-webkit-transition: background-color .15s ease-out;
					transition: background-color .15s ease-out;
					padding: 25rpx 40rpx 25rpx 20rpx;
					position: relative;
					font-weight: 400;
					/*  #ifdef  H5  */
					cursor: pointer;
					/*  #endif  */
					// font-size: 28rpx;
					box-sizing: border-box;

					&.open {
						background-color: #f5f5f5;
						// color: rgba(0, 0, 0, .8);
					}

					.t-icon {
						font-size: 48rpx;
						position: absolute;
						right: 0rpx;
						top: 0rpx;
						height: 100%;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						font-weight: 400 !important;

						&.open {
							&::before {
								transform: rotate(90deg);
							}
						}
					}
				}

				.t-collapse-wrap {
					margin: 0 !important;
					padding: 0 !important;
					border: none !important;
					box-sizing: border-box;
					transition: height .2s linear;
					overflow: hidden;

					.t-collapse-content {
						// color: #666;
						margin-top: 0;
						padding: 16rpx 20rpx 24rpx;
						// font-size: 28rpx;
						white-space: pre-line;
					}

					&.chide {
						height: 0rpx;

						.t-collapse-content {
							overflow: hidden;
						}
					}

					.t-table {

						.t-head-con {
							display: flex;
							flex-direction: row;
							border-bottom: 1rpx solid #e6e6e6;

							.t-head {
								text-align: center;
								font-weight: bold;
								padding: 10rpx 6rpx;
							}
						}

						.t-tr {
							display: flex;
							flex-direction: row;

							&:last-child {
								border-bottom: none !important;
							}

							.t-td {
								text-align: center;
								padding: 10rpx 6rpx;

							}
						}
					}
				}

				.t-collapse-hide {
					height: 0rpx;
					overflow: hidden;
				}

				.t-collapse-visible {
					height: 0rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>