<template>
	<div class="rtypestyle" style="background: #FFF;">
		<div class="left-slider">
			<sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d" @change="changeHandler">
			</sidebar>
		</div>
		<div class="right-slider">
			<scroll-view scroll-y="true" style="height: 30vh;">
				<div class="item" :class="{'active':d[tid].ID==currentObj.ID}" @click="clickHandler(d[tid])">
					<div class="left">不限</div>
				</div>
				<div class="item" :class="{'active':x.ID==currentObj.ID}" v-for="(x, index) in sd" :key="index" @click="clickHandler(x)">
					<div class="left">{{ x.Name}}</div>
				</div>
			</scroll-view>
			<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
				<view style="flex:1;margin-right: 30rpx;">
					<u-button :custom-style="btnStyle" @click="sendResult(-1)">取消</u-button>
				</view>
				<view style="flex:1;">
					<u-button :custom-style="btnStyle2" @click="sendResult(0)">完成</u-button>
				</view>
			</view>
		</div>
	</div>
</template>

<script>
	import sidebar from "../../../components/sidebar/index";
	export default {
		props: {
			d:{
				type:Array,
				default:[{
					ID:1,
					Name:"川菜",
					ChildrenList:[
						{
							ID:2,
							Name:"中餐"
						},
						{
							ID:3,
							Name:"汤锅"
						},
						{
							ID:4,
							Name:"干锅"
						},
						{
							ID:5,
							Name:"火锅"
						},
						{
							ID:6,
							Name:"蓉派川菜"
						},
						{
							ID:7,
							Name:"渝派川菜"
						},
						{
							ID:8,
							Name:"盐帮菜"
						}
					]
				},{
					ID:9,
					Name:"火锅",
					ChildrenList:[
						{
							ID:10,
							Name:"成都火锅"
						},
						{
							ID:11,
							Name:"藏式火锅"
						},
						{
							ID:12,
							Name:"重庆火锅"
						},
						{
							ID:13,
							Name:"北京火锅"
						}
					]
				}]
			},
			current:{
				type:Object,
				default:{
					ID:-1,
					active:0
				}
			}
		},
		watch: {
			current:{
				handler(newValue, oldValue){
					this.$nextTick(() => {
						this.active=newValue.active
						this.currentObj=newValue
						this.changeHandler(this.active)
					});
				},
				deep:true
			}
		},
		data() {
			return {
				mainColor: "",
				tid: 0,
				active: 0,
				sd: [],
				btnStyle:{
					borderRadius: '16rpx',
					color: '#111',
					fontSize: '30rpx',
					width: '100%',
					border:"1px solid #111",
					background:"#FFF"
				},
				btnStyle2:{
					borderRadius: '16rpx',
					color: '#fff',
					fontSize: '30rpx',
					width: '100%',
					background:"#111"
				},
				currentObj:{
					ID:-1,
					active:0
				}
			};
		},
		components: {
			sidebar,
		},
		mounted() {
			this.mainColor = this.$uiConfig.mainColor;
			this.sd = this.d[this.tid].ChildrenList;
		},
		methods: {
			changeHandler(i) {
				this.tid = i;
				this.sd = this.d[this.tid].ChildrenList;
				this.currentObj=this.d[i]
			},
			clickHandler(item) {
				this.currentObj=item
				this.currentObj.active=this.active
			},
			sendResult(t){
				if(t==-1){
					this.currentObj={
						ID:-1,
						active:0
					}
				}
				this.$emit("sure-type",this.currentObj)
			}
		},
	};
</script>

<style>
	.rtypestyle {
		display: flex;
	}

	.rtypestyle .left-slider {
		width: 85px;
		background: #f5f5f5;
	}

	.rtypestyle .right-slider {
		padding: 10px;
		height: 100%;
		width: 1px;
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
	}

	.rtypestyle .right-slider .item {
		background: #f5f5f5;
		margin-bottom: 4px;
	}
	.rtypestyle .right-slider .item.active .left{
		background-color: #111;
		color: #FFF;
	}
	.rtypestyle .right-slider .item .left {
		padding: 15rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #666;
	}
</style>
