<template>
		<div class="left-menu">
			<div class="menu-top" v-for="item in getCurSide" :key="item.name">
				<div class="first-title">{{item.name}}</div>
				<div>
					<div v-for="itemChild in item.children" :key="itemChild.name" @click="leftMenuClick(itemChild.path)" :class="activeMenu == itemChild.path?'second-title activeMenu':'second-title'">{{itemChild.name}}</div>
				</div>
			</div>
		</div>
</template>

<script>
	export default {
		props: {
			collapsed: {
				type: Boolean,
				default: true,
			},
			dynamicTags:{
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				activeMenu:'',
				getCurSide:[],
				path:''
			}
		},
		methods: {
			getLeftMenu(){
				const {path}=this
				let url
				if(path.indexOf('order')>0){
					url='assistant/info/get/getOrderQuantity'
				}
				if(path.indexOf('product')>0){
					url='assistant/info/get/getGeneralService'
					this.getCurSide=[
						{
							"name": "通用服务",
							"children": [
								{
									"path": "/product/productList",
									"name": "定制产品",
								}
							]
            },
            {
							"name": "Wish",
							"children": [
								{
									"path": "/product/1",
									"name": "定制产品",
								},
								{
									"path": "/product/2",
									"name": "待发布",
								},
								{
									"path": "/product/3",
									"name": "在线产品",
								},
							]
            },{
							"name": "Shopify",
							"children": [
								{
									"path": "/product/4",
									"name": "定制产品",
								},
								{
									"path": "/product/5",
									"name": "待发布",
								},
								{
									"path": "/product/6",
									"name": "在线产品",
								},
							]
            },{
							"name": "Shopline",
							"children": [
								{
									"path": "/product/7",
									"name": "定制产品",
								},
								{
									"path": "/product/8",
									"name": "待发布",
								},
								{
									"path": "/product/9",
									"name": "在线产品",
								},
							]
      	  }]
				}
				if(path.indexOf('customerService')>0){
					url='assistant/tickets/questions/getSideBar'
				}
				this.activeMenu = this.$route.path;
			},
			leftMenuClick(value){
				this.$router.push({path:value})
				this.$nextTick(() => {
					this.activeMenu = this.$route.path;
				})
			}
		},
		mounted() {
			this.path=this.$route.path
			this.getLeftMenu()
		},
    watch: {
      "$route": function() {
        this.path=this.$route.path
        this.getLeftMenu()
      }
    }
	}

</script>

<style scoped lang="less">
	.left-menu {
		width: 160px;
		height: 410px;
		border: 1px solid #ccc;
		background: #FFFFFF;
		margin-right: 20px;
		.menu-top{
			text-align: left;
			// padding:32px 45px 0 45px;
			font-size: 16px;
			color: #333333;
			.first-title{
				height: 32px;
				line-height: 32px;
				color: #000;
				vertical-align: top;
				padding-left: 5px;
				background-color: #eee;
				border-bottom: 1px solid #dbdbdb;
				font-weight: 700;
				font-size: 13px
			}
			.second-title{
				color: #000;
				line-height: 28px;
				vertical-align: top;
				height: 28px;
				border-bottom: 1px solid #dbdbdb;
				cursor: pointer;
				padding-left: 12px;
				font-size: 13px
			}
			.second-title:nth-last-child(1){
				border-bottom:none
			}
			.activeMenu{
				color: #fff;
				background-color: #367EE2
			}
		}
	}
</style>