<template>
  	<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
  	 class="uni-collapse-cell">
  		<view class="uni-collapse-cell__title" @click="onClick">

  			<view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view>

  			<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
  			<text class="uni-collapse-cell__title-text">{{ title }}</text>

  			<text class="uni-collapse-cell__time-text">{{ time }}</text>

  			<!-- #ifdef MP-ALIPAY -->
  			<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
  			 class="uni-collapse-cell__title-arrow">
  				<uni-icons color="#bbb" size="20" type="arrowdown" />
  			</view>
  			<!-- #endif -->
  			<!-- #ifndef MP-ALIPAY -->
  			<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
  			 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
  			<!-- #endif -->
  		</view>
  		<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">

  			<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" 

  			:style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">

  				<slot />
  			</view>
  		</view>
  	</view>
  </template>
  
  <script>

  	import UniIcons from '../UniIcons/UniIcons.vue'

  	export default {
  		name: 'UniCollapseItem',
  		components: {

  			UniIcons

  		},
  		props: {
  			title: {
  				// 列表标题
  				type: String,
  				default: ''
  			},

  			time: {
  				// 列表时间 朱海涛加的，验光数据需要
  				type: String,
  				default: ''
  			},

  			name: {
  				// 唯一标识符
  				type: [Number, String],
  				default: 0
  			},
  			disabled: {
  				// 是否禁用
  				type: Boolean,
  				default: false
  			},
  			showAnimation: {
  				// 是否显示动画
  				type: Boolean,
  				default: false
  			},
  			open: {
  				// 是否展开
  				type: Boolean,
  				default: false
  			},
  			thumb: {
  				// 缩略图
  				type: String,
  				default: ''

  			},
  			iconText:{
  				//名字头像
  				type:String,
  				default:''

  			}
  		},
  		data() {
  			return {

  				isOpen: false,
  				background: ''
  				 

  			}
  		},
  		watch: {
  			open(val) {
  				this.isOpen = val
  			}
  		},
  		inject: ['collapse'],
  		created() {
  			this.isOpen = this.open
  			this.nameSync = this.name ? this.name : this.collapse.childrens.length
  			this.collapse.childrens.push(this)
  			if (String(this.collapse.accordion) === 'true') {
  				if (this.isOpen) {
  					let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
  					if (lastEl) {
  						this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
  					}
  				}
  			}
  		},

  		computed:{
  			//给头像搞个随机背景颜色，验光数据页面需要
  			getRandomColor(){
  				let r = Math.floor(Math.random()*256);
  				let g = Math.floor(Math.random()*256);
  				let b = Math.floor(Math.random()*256);
  				let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
  				this.background = color
  				// return color;
  			}
  		},

  		methods: {
  			onClick() {
  				if (this.disabled) {
  					return
  				}
  				if (String(this.collapse.accordion) === 'true') {
  					this.collapse.childrens.forEach(vm => {
  						if (vm === this) {
  							return
  						}
  						vm.isOpen = false
  					})
  				}
  				this.isOpen = !this.isOpen
  				this.collapse.onChange && this.collapse.onChange()
  				this.$forceUpdate()

  				// console.log(this.isOpen)
  			},

  		}
  	}
  </script>
  
  <style lang="scss" scoped>
  	@import '@/uni.scss';
  
  	.uni-collapse-cell {
  		flex-direction: column;
  		border-color: #FFFFFF;
  		border-bottom-width: 1px;
  		border-bottom-style: solid;
  	}
  
  
  	.uni-collapse-cell--hover {
  		background-color: #FFFFFF;
  	}
  
  	.uni-collapse-cell--open {
  		background-color: #FFFFFF;
  	}
  
  	.uni-collapse-cell--disabled {
  		background-color: #FFFFFF;
  		// opacity: 0.3;
  	}
  
  
  	.uni-collapse-cell--hide {
  		height: 48px;
  	}
  
  	.uni-collapse-cell--animation {

  		transition: transform all 0.5s ease;

  		transition-property: transform;

  		transition-duration: 0.5s;

  		transition-timing-function: ease;
  	}
  
  	.uni-collapse-cell__title {
  		// padding: 12px 12px;

  		font-size: 16px;

  		color: #333333;
  		position: relative;
  		/* #ifndef APP-NVUE */
  		display: flex;
  		width: 100%;
  		box-sizing: border-box;
  		/* #endif */
  		height: 48px;
  		line-height: 24px;
  		flex-direction: row;
  		justify-content: space-between;
  		align-items: center;
  	}

  	.uni-collapse-cell__title-iconText{
  		border: 1px solid #FFFFFF;
  		height: 50rpx;
  		width: 50rpx;
  		border-radius: 26rpx;
  		// background-color: #47A6F0;
  		font-size: 12px;
  		color: #FFFFFF;
  		line-height: 50rpx;
  		text-align: center;
  		margin-right: 20rpx;
  	}

  	.uni-collapse-cell__title:active {
  		background-color: #FFFFFF;
  	}
  
  	.uni-collapse-cell__title-img {
  		height: $uni-img-size-base;
  		width: $uni-img-size-base;
  		margin-right: 10px;

  		// height: 50rpx;
  		// width: 50rpx;
  		// border-radius: 25rpx;
  		// border-radius: 25rpx;

  	}
  
  	.uni-collapse-cell__title-arrow {
  		width: 20px;
  		height: 20px;

  		transform: rotate(-90deg);

  		transform-origin: center center;
  
  	}
  
  	.uni-collapse-cell__title-arrow-active {

  		transform: rotate(0deg);

  	}
  
  	.uni-collapse-cell__title-text {
  		flex: 1;
  		font-size: $uni-font-size-base;
  		/* #ifndef APP-NVUE */
  		white-space: nowrap;
  		color: inherit;
  		/* #endif */
  		/* #ifdef APP-NVUE */
  		lines: 1;
  		/* #endif */
  		overflow: hidden;
  		text-overflow: ellipsis;

  		font-size: 12px;
  		color: #333333;
  	}
  	.uni-collapse-cell__time-text{
  		font-size: 12px;
  		color: #999999;
  		margin-right: 20rpx;

  	}

  	.uni-collapse-cell__content {
  		overflow: hidden;
  	}
  
  	.uni-collapse-cell__wrapper {
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: column;
  	}
  
  	.uni-collapse-cell__content--hide {
  		// height: 0px;
  		// line-height: 0px;
  	}
  </style>