<template>
	<view class="self-service-index">
		<template v-if="hasMenu('architecture')">
			<view class="self-service-item more d-c-c" @click="rotate(-1)">
				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_381')}}</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/member-area/architecture/resettle/Scheme1')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0175')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/member-area/architecture/resettle/Scheme2')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0176')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/member-area/architecture/resettle/Scheme3')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0177')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/member-area/architecture/resettle/Scheme4')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0178')}}</view>
			</view>
		</template>
		<template v-if="hasMenu('recommend')">
			<view class="self-service-item more d-c-c" @click="rotate(0)">
				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_382')}}</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/member-area/architecture/recommend/Scheme1')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0175')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/member-area/architecture/recommend/Scheme2')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0176')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/member-area/architecture/recommend/Scheme3')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0177')}}</view>
			</view>
			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }"
				@click="gotoPage('/pages/member-area/architecture/recommend/Scheme4')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0178')}}</view>
			</view>
		</template>
	</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 == 30) {
							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>