<template>
	<view class="self-service-index">
		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/performance/index')"
			v-if="hasMenu('ConsanguinityCheck')">
			<view class="self-service-name text-ellipsis-2">业绩分布</view>
		</view> -->
		<template>
			<view class="self-service-item more d-c-c" @click="rotate(-1)" v-if="hasMenu('ConsanguinityCheck')">
				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_510')}}</view>
				<view class="icon-close" :class="{ active: openIndex == -1 }"><u-icon name="arrow-down" size="28rpx"
						color="#666"></u-icon></view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/performance')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_510')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/placementDiagram')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_83')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/monthlyAddition/monthlyAddition')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_84')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/monthlyPerformanceComparison/monthlyPerformanceComparison')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_85')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/recommend')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_86')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/directPush')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_87')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/recommendationList')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_517')}}</view>
			</view>
		</template>
		<template>
			<view class="self-service-item more d-c-c" @click="rotate(0)" v-if="hasMenu('incomeDetail')">
				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_530')}}</view>
				<view class="icon-close" :class="{ active: openIndex == 0 }"><u-icon name="arrow-down" size="28rpx"
						color="#666"></u-icon></view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/index')" v-if="hasMenu('firstPurchase')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_531')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/spend_index')" v-if="hasMenu('repurchaseEarnings')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_532')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/heil_index')" v-if="hasMenu('hignFans')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_533')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/sea_index')" v-if="hasMenu('seaFans')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0140')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/cloud_index')" v-if="hasMenu('sbyd')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_535')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/purchase_index')" v-if="hasMenu('repurchaseTicket')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_536')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/market/bonus-detail/maker_index')" v-if="hasMenu('markerSpaceEarnings')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_537')}}</view>
			</view>
		</template>
		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/bonus-detail/index')">
			<view class="self-service-name text-ellipsis-2">奖金明细</view>
			<image class="self-service-icon" src="/static/icon/space/sc02.png" mode=""></image>
		</view> -->
		<view class="self-service-item" @click="gotoPage('/pages/market/bonus-source/index')"
			v-if="hasMenu('bonusSource')">
			<view class="self-service-name text-ellipsis-2">{{$t('ENU_MENU_540')}}</view>
		</view>
		<!-- 	<view class="self-service-item" @click="gotoPage('/pages/market/cloud-bonus/index')">
			<view class="self-service-name text-ellipsis-2">云代奖金</view>
		</view> -->
		<template>
			<view class="self-service-item more d-c-c" @click="rotate(1)" v-if="hasMenu('appraisal')">
				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_560')}}</view>
				<view class="icon-close" :class="{ active: openIndex == 1 }"><u-icon name="arrow-down" size="28rpx"
						color="#666"></u-icon></view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 1 }"
				@click="gotoPage('/pages/market/assessment-details/index')" v-if="hasMenu('repurchaseCheck')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_561')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 1 }"
				@click="gotoPage('/pages/market/assessment-details/share_index')" v-if="hasMenu('dividendCheck')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_562')}}</view>
			</view>
		</template>
		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/assessment-details/index')">
			<view class="self-service-name text-ellipsis-2">考核明细</view>
		</view> -->
		<view class="self-service-item" @click="gotoPage('/pages/market/registration-list/index')"
			v-if="hasMenu('registration')">
			<view class="self-service-name text-ellipsis-2">{{$t('ENU_MENU_570')}}</view>
		</view>
		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/investment-list/index')">
			<view class="self-service-name text-ellipsis-2">招商列表</view>
		</view> -->
		<template>
			<view class="self-service-item more d-c-c" @click="rotate(2)" v-if="hasMenu('investment')">
				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_580')}}</view>
				<view class="icon-close" :class="{ active: openIndex == 2 }"><u-icon name="arrow-down" size="28rpx"
						color="#666"></u-icon></view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 2 }"
				@click="gotoPage('/pages/market/investment-list/index')" v-if="hasMenu('directList')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_581')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 2 }"
				@click="gotoPage('/pages/market/investment-list/canvass_index')" v-if="hasMenu('attractDetailList')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_582')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 2 }"
				@click="gotoPage('/pages/market/investment-list/heil_index')" v-if="hasMenu('haiList')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_583')}}</view>
			</view>
		</template>
		<view class="self-service-item" @click="gotoPage('/pages/market/statistic-analysis/index')"
			v-if="hasMenu('statistics')">
			<view class="self-service-name text-ellipsis-2">{{$t('w_0420')}}</view>
		</view>
		<view class="self-service-item" @click="gotoPage('/pages/market/activity-zone/index')"
			v-if="hasMenu('activeZone')">
			<view class="self-service-name text-ellipsis-2">{{$t('ENU_MENU_520')}}</view>
		</view>
		<!-- <view class="self-service-item">
			<view class="self-service-name text-ellipsis-2">直推列表</view>
		</view>
		<view class="self-service-item">
			<view class="self-service-name text-ellipsis-2">嗨粉领奖</view>
		</view>
		<view class="self-service-item">
			<view class="self-service-name text-ellipsis-2">嗨粉列表</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openIndex: -2,
				listmenu: []
			};
		},
		onLoad() {
			this.getMenu();
		},
		methods: {
			hasMenu(key) {
				let self = this;
				let flag = false;
				self.listmenu.forEach((item, index) => {
					if (item.menuKey == key) {
						flag = true
					}
				})
				return flag
			},
			getMenu() {
				let self = this;
				self._get('system/api/menu/list', {}, res => {
					let list = [];
					let arr = res.data;
					arr.forEach((item, index) => {
						if (item.menuParent == 50 || item.menuKey == 'statistics') {
							list.push(item)
						}
					})
					self.listmenu = list;
					console.log(self.listmenu)
				});
			},
			rotate(e) {
				if (this.openIndex != e) {
					this.openIndex = e;
				} else {
					this.openIndex = -2;
				}
			}
		}
	};
</script>

<style lang="scss">
	.self-service-index {
		// display: flex;
		// justify-content: space-between;
		// align-items: flex-start;
		// flex-wrap: wrap;
		// padding: 28rpx 20rpx;
		padding: 0 22rpx;
		background: #ffffff;
	}

	.icon-close {
		transition: transform 0.6s ease;

	}

	.icon-close.active {
		transform: rotate(180deg);
	}

	.closemenu.self-service-item {
		height: 0;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		border: none;
	}

	.self-service-item {
		flex-shrink: 0;
		padding: 22rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: 345rpx;
		min-height: 120rpx;
		box-sizing: border-box;
		box-sizing: border-box;
		height: auto;
		transition: all 0.3s ease;
		border-radius: 0rpx;
		// margin-bottom: 25rpx;
		border-bottom: 1rpx solid #eee;

		.self-service-name {
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
			word-break: break-all;
			// font-weight: bold;
		}

		.self-service-icon {
			width: 54rpx;
			height: 54rpx;
			display: block;
			flex-shrink: 0;
			margin-left: 20rpx;
		}
	}
</style>