<template>
<span class="bsui_cell" tapmode>
	<!-- <abstract-button containerElement="div" class="mu-raised-button  " :centerRipple="false"> -->
		<div :class="['top', {'top-rang-right': clickRangeRight},'top_' + [a_direction]]" @click="doClick">
			<div class="bsui_cell_hd" v-if="icon">
				<slot name="icon"></slot>
			</div>
			<div :class="['bsui_cell_bd', {'bsui_cell_primary':!clickRangeRight}, {'bsui-cell-rang-right': clickRangeRight}]">
				<p v-html="title"></p>
				<span v-text="btnText" v-if="isBtn" class="bsui_cell_btn" @click="doBtnClick"></span>
			</div>
			<div :class="['bsui_cell_ft', 'bsui_cell_ft2',{'bui-cell-ft-rang-right': clickRangeRight}]">
				<slot name="label1">
				</slot>
				<slot name="label2">
				</slot>
			</div>
			<div :class="['bsui_cell_arrow',{'bsui-cell-arrow-rang-right': clickRangeRight},[a_direction]]" v-if="arrow" tapmode  @click="doArrowClick($event)">
			</div>
		</div>

		<div class="content slide" :class="showContent ? 'animate' : '' ">
				<slot name='child'>
					<div></div>
				</slot>
		</div>
</span>

</template>

<script>
export default {
  name:'mu-cell-item',
  props: {
	icon:{
	  type: Boolean,
	},
	target:{
		type: String,
	},
	iconClass: {
	  type: String,
	},
	title:{
	  type: String,
	},
	label1: {
	  type: Boolean,
	},
	label2: {
	  type: Boolean,
	},
	hide_direction:{
		type:String,
		default:'up',
	},
	show_direction:{
		type:String,
		default:'down',
	},
	arrow: {
	  type: Boolean,
	},
	// arrow_direction:{
	// 	type:String,
	// 	default: 'right',
	// },
	disableExpend:{
		type:Boolean,
		default:false
	},
	showChild:{
		type:Boolean,
		default:false
	},
	clickRangeRight:{
		type: true,
		default: false
	},
	btnText:{
		type: String
	},
	isBtn:{
		type: Boolean,
		default: false
	}
  },
  data(){
	  return {
		  showContent:this.showChild
	  }
  },
  computed:{
  	a_direction(){

  		if(this.showChild && this.showContent) {
  			return 'cell_arrow_'+this.show_direction;
  		}

  		return this.showContent ? 'cell_arrow_'+this.show_direction : 'cell_arrow_'+this.hide_direction;
  	},
  	arrow_direction(){
			if(this.showChild && this.showContent) {
  			return  this.show_direction
  		}else {
  			return this.hide_direction;
  		}
  	}
  },
  methods: {
	  doClick: function(){
			if (this.target == 'arrow') {
	  		return ;
	  	}
	  	if(!this.disableExpend) {
	  		this.showContent = !this.showContent ;
	  	}
	  	event.stopPropagation();
			this.$emit('do-title-click');

	  },
	  doArrowClick:function(event){
			if(!this.disableExpend) {
	  		this.showContent = !this.showContent ;
	  	}
	  	event.stopPropagation();
	  	this.$emit('do-arrow-click');
	  },
		doBtnClick(){
			event.stopPropagation();
			this.$emit('do-click-btn');
		}
  }
}
</script>

<style lang="css">
.bsui_cell {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
   flex-direction: column;
}
.top{
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;

}
.top:after{
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 1px;
	border-bottom: 1px solid #e6e7e8;
	color: #e6e7e8;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}
.top-rang-right{

}
.top_cell_arrow_down:after{
	opacity: 1;
	transition: opacity 1s;
}
.top_cell_arrow_up:after{
	opacity: 0;
	transition: opacity 1s;
}
.bsui_cell:after {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	color: #d9d9d9;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleY(.5);
	-ms-transform: scaleY(.5);
	transform: scaleY(.5);

}
a {
	text-decoration: none;
}
.bsui_cell_hd img {
	width: 20px;
	margin-right: 5px;
	display: block;
}
.bsui_cell_primary {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.bsui-cell-rang-right{
	max-width: 80%;
	z-index: 3;
}
.bsui_cell_primary p, .bsui-cell-rang-right p {
	font-size: 16px;
	color: #6b7175;
	line-height: 20px;
}
.bsui_cell_ft {
	text-align: right;
}
.bsui_cell_ft1 p {
	font-size: 17px;
	color: #888;
}
.bsui_cell_ft2 p:first-child {
	font-size: 14px;
	color: #888;
}
.bsui_cell_ft2 p:nth-child(2) {
	font-size: 1px;
	color: #888;
}
.bui-cell-ft-rang-right{
	position: absolute;
	right: 30px;
	width: 100%;
}
.bsui_cell_arrow{
	text-align: right;
	color: #9da1a3;
}
.bsui-cell-arrow-rang-right{
	position: absolute;
	right: 0px;
}
.cell_arrow_up:after {
	content: " ";
	display: inline-block;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: transform .15s cubic-bezier(0.25,.1,.25,1);
	height: 12px;
	width: 12px;
	border-width: 1px 0 0 1px;
	border-color: #9DA1A3;
	border-style: solid;
	position: relative;
	top: 5px !important;
	margin-right: 14px ;
}

.cell_arrow_right:after {
	content: " ";
	display: inline-block;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: transform .15s cubic-bezier(0.25,.1,.25,1);
	height: 12px;
	width: 12px;
	border-width: 1px 1px 0 0;
	border-color: #9DA1A3;
	border-style: solid;
	position: relative;

	top: 1px;
	margin-right: 14px;
}
.cell_arrow_down:after {
	content: " ";
	display: inline-block;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: transform .15s cubic-bezier(0.25,.1,.25,1);
	height: 12px;
	width: 12px;
	border-width: 1px 1px 0 0;
	border-color: #9DA1A3;
	border-style: solid;
	position: relative;
	margin-right: 14px;
}
.content{
	//padding: 0px 15px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;

}
.content>div{
	width:100%;
}

.content {
  overflow: hidden;
}
.slide {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1) -.1s;
	transition: max-height .3s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
	max-height: 9999px;
	-webkit-transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
	transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.bsui_cell_btn{
	position: absolute;
    right: 35px;
    top: 0;
    font-size: 14px;
    padding: 5px;
}
</style>
