<template>
	<div>
		<view class="uni-card">
		    <!-- <view class="uni-list"> -->
		       <view class="uni-list-cell-navigate uni-navigate-right" v-for="(menu,index) in moduleAuthority" :key="index" :class="index === menu.length - 1 ? 'uni-list-cell-last' : ''">
		      <!--      <view class="uni-list-cell-navigate " :hover-class="getMenuSever[menu.id].length>0?'uni-list-cell-hover':''" :class="{'uni-navigate-bottom': getMenuSever[menu.id] ,'uni-active': menu.show}" 
		                @tap="trigerCollapse(menu)"> -->
					<view class="uni-flex ai-center">
							
						<image :src="`/static/images/user/${menu.class}`" mode="aspectFit" class="ico-images"></image>
						<text> {{menu.title}} </text>
					</view>
					
		            <!-- </view> -->
					<!-- 
					<view class="uni-list uni-collapse" :class="menu.show ? 'uni-active' : ''" v-if="getMenuSever[menu.id]">
						<div class="show-detail" >
							<div class="detail-unit" >
								<div style="display: flex;">
									
									<strong class="detail-title mr20" v-for="(d,i) in getDatapower[menu.id]" :key="i">{{d}}</strong>
								</div>
								
								<div class='detail-shop'>
									<span class="shop-name" v-for="(item,key) in getMenuSever[menu.id]" :key="key" >{{item}}</span>
								</div>
							</div>
						</div>
					</view> -->
					
		        </view>
				
			
		    <!-- </view> -->
		</view>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				modules: [],
				severList: [],
				shopShow: false,
				powerKey: [
			
					{id: '2580cb9f-ad2c-4d0b-b478-0be52eaf6ef6', title: '公文阅办', show: false, class: 'mrys.png'},
					{id: 'c870b1bc-95c8-473d-81c8-8596eb793bd4', title: '阳光公示', show: false, class: 'mrys.png'},
					{id: '1ceeaa5c-d11e-4dcd-8d33-0c3df4cd4937', title: '请假加班', show: false, class: 'mrys.png'},
					{id: '5733dfdd-29f6-4233-9ff0-6f077d80d778', title: '安全问答', show: false, class: 'mrys.png'},
					{id: 'ff04b551-c382-4638-a947-f95c42387ada', title: '考勤打卡', show: false, class: 'mrys.png'},
					{id: '1ceeaa5c-d11e-4dcd-8d33-0c3df4cd4937', title: '请假加班', show: false, class: 'mrys.png'},
					
					{id: '1a2907bd-c2f5-4ef9-9ead-70496650ace6', title: '财务报销', show: false, class: 'cwbx.png'},
					{id: '916cdbb5-f05b-4624-b6c4-9f111d4389fc', title: '招标投标', show: false, class: 'zbtb.png'},
					{id: '8fea5036-d67e-476e-9e56-5f379ba6ae18', title: '服务区报销', show: false, class: 'cwbx.png'},
					{id: 'ac661db4-1af1-4732-88db-76bc05eec335', title: '合同审批', show: false, class: 'cwbx.png'},
				
					{id: 'c26c1620-2149-4b3d-ac2e-07e0c0494042', title: '走动式管理', show: false, class: 'zdsgl.png'},
					{id: 'd405ae13-3388-41c0-a5f6-d11194d0a943', title: '投诉意见', show: false, class: 'tsjy.png'},
					{id: '74934d31-385a-4eed-80bb-9c9ed7da29b5', title: '每日营收', show: false, class: 'mrys.png'},
					{id: 'b0b63a75-56c9-4f1d-aacb-a26e62b47e3e', title: '数据校验', show: false, class: 'sjjy.png'},
					{id: '056b29d7-4721-47ee-ad25-660814e1f3a9', title: '商品审批', show: false, class: 'spsp.png'},
					{id: '2290e96d-c6d7-4dde-b5b7-e699b615ff2f', title: '招商审批', show: false, class: 'spsp.png'},
				],
				dataPower: [
					{id: '6f020a1c-69db-4910-8d27-1f1140cb27d7',title: '日结校验',show: false},
					{id: '2eada261-97e7-4881-998b-06b1cfc290af',title: '日结审核',show: false},
					{id: '43ecf139-66a7-421b-ba0f-bf7ddd77437d',title: '主任确认',show: false},
				]
				
			};
		},
		computed: {
			...mapGetters({
				'menus': 'getMenu',
			}),
			
			moduleAuthority() {
				let _this = this
				let userModules = _this.menus
				let _data = []
				this.powerKey.forEach(u => {
					if (userModules[u.id] ==1) {
						_data.push(u)
					}
				})
				
				return _data;
			},
		// 	getDatapower() {
		// 		let _this = this
			
		// 		let _data = {}
		// 		let allMenu = this.moduleEffective

		// 		this.powerKey.map(n => {
		// 			let hasMenu = allMenu.filter(a=> {return a.MODULE_PGUID===n.id})
					
		// 			if(hasMenu.length>0) {
		// 				let c_name = []
		// 				hasMenu.map(u =>{
		// 					c_name.push(u.MODULE_NAME)
		// 				})
		
		// 				_data[n.id] = c_name
						
		// 			}
		// 		})
				
		// 		return _data;
		// 	},
		// 	getMenuSever() {
		// 		let allMenu = this.$store.getters.getModuleEffective
		// 		let menuServer = {}	

		// 		this.powerKey.map(n => {
		// 			let hasMenu = allMenu.find(a=> {return a.MODULE_GUID===n.id})
		// 			if(hasMenu) {
		// 				menuServer[n.id] =  hasMenu.SERVERPART_NAMES.length>0 ? hasMenu.SERVERPART_NAMES.split(',') : ''
		// 			}
		// 		})
				
		// 		return menuServer
		// 	}
		
		},
		methods: {
			trigerCollapse (item) {
				if(this.getMenuSever[item.id].length>0){

					item.show = !item.show
				}
			},
			// getshop () {
			// 	let severList= []
			// 	this.revenueMode.map(el => {
			
			// 		let u = severList.find(c=> {return c.name===el.SERVERPARTNAME})
			// 		if (!u) {
						
			// 			severList.push({
			// 				SERVERPART_ID: el.SERVERPART_ID,
			// 				name: el.SERVERPARTNAME,
			// 				child: [{
			// 					id: el.SERVERPARTSHOP_ID,
			// 					name: el.SHOPNAME
			// 				}]
			// 			})
			// 		}else {
			// 			u.child.push({
			// 				id: el.SERVERPARTSHOP_ID,
			// 				name: el.SHOPNAME
			// 			})
			// 		}
			// 	})
			// 	this.severList =  severList
			// }
		},
		created() {
		
			// this.getshop()
		}
	}
</script>

<style scoped>
	.mr20 {
		margin-right: 24rpx;
	}
	.show-title {
		padding: 20upx;
		font-weight: 500;
	}
	.show-detail {
		background-color: #f1f1f1;
		padding: 16upx 32upx;
	}
	.detail-title {
		color: #333;
		font-size: 14px;
		
	}
	.detail-shop {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	    margin: 8upx 0 16upx 0;
	}
	.shop-name {
		margin: 8upx 14upx 8upx 0;
		background-color: #fff;
		display: block;
		padding: 8upx 16upx;
		border-radius: 4upx;
		font-size: 12px;
		color: #696969;
	}
	.uni-card {
		margin: 0;
	}
	.uni-list-cell-navigate.uni-active ,.uni-list-cell-hover{
		background-color: #fff;
		color: #6293e1;
	}
	/* .uni-list:before {
		background-color: #f2f2f2;
	}
	.uni-list-cell:after,.uni-list:after {
		background-color: #efefef;
	} */
	.ico-images {
		width: 62rpx;
		height: 62rpx;
		margin-right: 20rpx;
	}
	.ico-spsp {
		background-image: url(/static/images/user/spsp.png);
	}
	.ico-sjjy {
		background-image: url(/static/images/user/sjjy.png);
	}
	.ico-cwbx {
		background-image: url(/static/images/user/cwbx.png);
		
	}
	.ico-myshop {
		background-image: url(/static/images/user/myshop.png);
	}
	.ico-ndhz {
		background-image: url(/static/images/user/ndhz.png);
	}
	.ico-tsjy {
		background-image: url(/static/images/user/tsjy.png);
	}
	.ico-mrys {
		background-image: url(/static/images/user/mrys.png);
	}
	.ico-zbtb {
		background-image: url(/static/images/user/zbtb.png);
	}
	.ico-zdsgl {
		background-image: url(/static/images/user/zdsgl.png);
	}
	.ico-qjt {
		background-image: url(/static/images/user/qjt.png);
	}
	.ico-zdshz {
		background-image: url(/static/images/user/zdshz.png);
	}
	.ico-spsp,
	.ico-sjjy,
	.ico-cwbx,
	.ico-myshop,
	.ico-ndhz,
	.ico-tsjy,
	.ico-zbtb,
	.ico-zdsgl,
	.ico-qjt,
	.ico-mrys,
	.ico-zdshz{
		background-position: center;
		background-repeat: no-repeat;
		display: inline-block;
		vertical-align: middle;
		margin-right: 16upx;
		background-size: contain;
		width: 62upx;
		height: 62upx;
	}
</style>
