<template>
	<view class="rf-category">
		<!-- <a href="https://www.ciftis.org/cn/xmfb/ysztyz/index.html">进入网上展厅</a> -->
		<!-- #ifdef  APP-PLUS -->
		<!-- <u-button class="btn" @click="Download">下载</u-button> -->
		<!-- #endif -->
		<view class="dcp-boxTitle">
			<text class="text floatLeft">
				{{i18n('Service')}}
			</text>
			<!-- <text class="text floatRight ">
				<text class="fa fa-bell-o"></text>
			</text> -->
		</view>
		<view class="dcp-nav">
			<view class="dcp-nav-title">
				{{i18n('MyService')}}
			</view>
			<view :class="$i18n.locale=='en'?'font':''">
				<view class="mywrap">
					<view v-for="(item,index) in initData" class="serviceItems" @click="naviGateTo(item)">
						<image class="icon" :src="getUrl(index)" mode="widthFix"></image>
						<text
							:style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n(item.lable)}}</text>
					</view>
				</view>
				<!-- <view v-for="(item,index) in initData" class="serviceItem" @click="naviGateTo(item)">
					<image :src="getUrl(index)" style="width: 60upx;height: 60upx;margin: 20upx 10upx;vertical-align: middle;"></image>
					<text :style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n(item.lable)}}</text>
				</view> -->
				<!-- 我的报名 -->
				<view class="serviceItem" @click="naviGateTo({path: '/pages/service/others/mySignup'})"
					v-if="isLogin()">
					<image src="@/static/img/server/myServer/new/8.png"
						style="width: 60upx;height: 60upx;margin: 20upx 10upx;vertical-align: middle;"></image>
					<text
						:style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n('ApplicationHistory')}}</text>
				</view>
				<!-- 管理人员可见-会议工作台 -->
				<view class="serviceItem" @click="naviGateTo({path: '/pages/workbench/workbench'})" v-if="isAdmin">
					<image src="@/static/img/server/myServer/9.png"
						style="width: 60upx;height: 60upx;margin: 20upx 10upx;vertical-align: middle;"></image>
					<text
						:style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n('ConferenceWorkbench')}}</text>
				</view>
				<!-- 志愿者可见 -->
				<view class="serviceItem" @click="naviGateTo({path: '/pages/volunteer/volunteer'})" v-if="isVolunteer">
					<image src="@/static/img/server/myServer/10.png"
						style="width: 60upx;height: 60upx;margin: 20upx 10upx;vertical-align: middle;"></image>
					<text
						:style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n('ConferenceVolunteer')}}</text>
				</view>
				<!-- 特定人员可见-平台运行日报 -->
				<view class="serviceItem" @click="naviGateTo({path: '/pages/service/others/myExportLog'})"
					v-if="isCheckLog">
					<!--				<view class="serviceItem" @click="naviGateTo({path: '/pages/service/others/myExportLog'})" v-if="true">-->
					<image src="@/static/img/server/myServer/11.png"
						style="width: 60upx;height: 60upx;margin: 20upx 10upx;vertical-align: middle;"></image>
					<text :style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n('MyExportLog')}}</text>
				</view>
			</view>
		</view>
		<view class="dcp-nav2">
			<view class="dcp-nav-title ">
				{{i18n('QuickaApplication')}}
			</view>
			<view class="my-serviceItem2">
				<view v-for="(item,index) in application" class="serviceItem2" @click="naviGateTo(item)">
					<image :src="getUrl2(index)"
						style="display: block; width: 80upx;height: 80upx;margin: 20upx auto 0upx auto;;vertical-align: middle;">
					</image>
					<text :style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n(item.lable)}}</text>
				</view>
			</view>
		</view>
		<view class="dcp-nav2">
			<view class="dcp-nav-title ">
				{{i18n('OtherServices')}}
			</view>
			<view class="my-serviceItem2">
				<view v-for="(item,index) in otherService" class="serviceItem2" @click="naviGateTo(item)">
					<image :src="getUrl2(index+3)"
						style="display: block; width: 80upx;height: 80upx;margin: 20upx auto 0upx auto;;vertical-align: middle;">
					</image>
					<text :style="$i18n.locale=='zh'?'font-size:28upx':'font-size:24upx'">{{i18n(item.lable)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isAdmin: false,
				isVolunteer: false,
				isCheckLog: false,
				initData: [{
						imgSrc: '@/static/img/server/myServer/new/1.png',
						lable: 'MyApplication',
						value: '',
						path: '/pages/service/others/myApplication',
						// path:'/pages/service/others/myApplication1',
					}, {
						imgSrc: '@/static/img/server/myServer/new/2.png',
						lable: 'MyAttention',
						value: '',
						path: '/pages/service/others/myfollow',
						// path:'/pages/service/others/myApplication1'
					}, {
						imgSrc: '@/static/img/server/myServer/new/3.png',
						lable: 'MyCollection',
						value: '',
						path: '/pages/service/others/mycollection'
						// path:'/pages/service/others/myApplication1'
					}, {
						imgSrc: '@/static/img/server/myServer/new/4.png',
						lable: 'MyActivities',
						value: '',
						path: "/pages/service/others/myactivity"
						// path:'/pages/service/others/myApplication1'
					}, {
						imgSrc: '@/static/img/server/myServer/new/5.png',
						lable: 'Interactive',
						path: "/pages/service/others/communication",
						// path:'/pages/service/others/myApplication1',
						value: ''
					},
					{
						imgSrc: '@/static/img/server/myServer/new/6.png',
						lable: 'MyConsultations',
						value: '',
						path: '/pages/service/others/myadvice'
						// path:'/pages/service/others/myApplication1'
					},
					// {
					// 	imgSrc:'@/static/img/server/myServer/new/7.png',
					// 	lable:'MyResources',
					// 	// value:'/pages/service/others/myApplication1',
					// 	path:'/pages/service/others/myApplication'
					// },
				],
				application: [{
					imgSrc: '@/static/alipay.png',
					lable: 'Alliance',
					value: '/pages/service/membership/leagueApplication',
					path: '/pages/service/membership/leagueApplication'

				}, {
					imgSrc: '@/static/alipay.png',
					lable: 'MemberApply',
					value: '/pages/service/membership/index',
					path: '/pages/service/membership/index'
					// value:'/pages/service/others/myApplication1',
					// path:'/pages/service/others/myApplication1'
				}, {
					imgSrc: '@/static/alipay.png',
					lable: 'ApplicationServices',
					value: '/pages/service/membership/customServiceApplication',
					path: '/pages/service/membership/customServiceApplication'
				}],
				otherService: [{
					imgSrc: '@/static/alipay.png',
					lable: 'Help',
					// value:'/pages/service/others/myApplication1',
					value: '',
					path: '/pages/service/others/helpCenter'
					// path:'/pages/service/others/myApplication1'

				}, {
					imgSrc: '@/static/alipay.png',
					lable: 'Online',
					value: '',
					path: '/pages/service/others/onlineService'
					// path:'/pages/service/others/myApplication1'
				}, {
					imgSrc: '@/static/alipay.png',
					lable: 'Feedback',
					value: '',
					path: '/pages/service/others/myFeedback'
				}]
			};
		},

		onShow() {
			this.isAdminOrVolunteer();
		},
		computed: {

		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			isLogin() {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				if (user && token) {
					return true
				} else {
					return false
				}
			},
			isAdminOrVolunteer() {
				if (this.isLogin()) {
					this.$myRequest({
						url: '/meeting/meetingCommonQuery/isMeetingAdminByLoginAccount',
						data: {
							"loginAccount": uni.getStorageSync('loginAccount')
						}
					}).then(res => {
						this.isAdmin = res
					});

					this.$myRequest({
						url: '/meeting/meetingCommonQuery/isVolunteerByLoginAccount',
						data: {
							"loginAccount": uni.getStorageSync('loginAccount')
						}
					}).then(res => {
						this.isVolunteer = res
					});
					this.$myRequest({
						url: '/op/fileDownloadPermissions/getPermission',
						data: {
							"loginAccount": uni.getStorageSync('loginAccount')
						}
					}).then(res => {
						this.isCheckLog = res.data
					});
				}
			},
			getUrl(index) {
				// return request(data);
				return require('@/static/img/server/myServer/new/' + Number(index + 1) + '.png');
			},
			getUrl2(index) {
				// return request(data);
				return require('@/static/img/server/servers/new/' + Number(index + 1) + '.png');
			},
			Download() {
				uni.downloadFile({
					url: 'https://www.geidcp.com/api/file/pub/project/2020/10/13/5b2fc013140e44e7a74711650079276d.pdf', //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			naviGateTo(item) {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				let label = item.lable;
				// if(label === "Alliance" || label === "MemberApply" || label === "ApplicationServices") {
				if (label != "Help" && label != "Online") {
					if (user && token) {
						if (item.path) {
							uni.navigateTo({
								url: item.path
							})
						}
					} else {
						uni.setStorageSync('pathReminder', item.path)
						uni.navigateTo({
							url: '/pages/public/login'
						})
					}
				} else {

					if (item.path) {
						uni.navigateTo({
							url: item.path
						})
					}
				}
				// }else {
				// 	if(item.path){
				// 		uni.navigateTo({
				// 			url:item.path
				// 		})
				// 	}
				// }
			},
		}
	};
</script>
<style lang="scss" scoped>
	.rf-category {
		.font {
			font-size: 26upx !important;
		}

		// background-color: $color-white;
		background-color: #f3f4f6;

		/*  #ifdef  APP-PLUS  */
		margin-top: calc(20upx + var(--status-bar-height));

		/*  #endif  */
		.dcp-profile {
			background-color: #1777ff;
			height: 100px;
		}

		.mywrap {
			margin: 10upx 4% 0 0;
			padding-right: 1.5%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.serviceItems {
				width: 42%;
				padding: 0 1.5%;
				margin: 10upx 0 10upx 5%;
				display: flex;
				align-items: center;
				border: 1px solid #f3f4f6;
				background-color: #f4f9fc;
				border-radius: 20upx;
				height: 100upx;
				text-align: center;

				.icon {
					display: block;
					width: 60upx;
					height: 60upx;
					margin-right: 10upx;
				}
			}
		}

		.serviceItem,
		.serviceItem2 {
			display: inline-block;
			width: 40%;
			height: 100upx;
			border: 1px solid #f3f4f6;
			border-radius: 20upx;
			margin: 10upx 5%;
			line-height: 100upx;
			background-color: #f4f9fc;
		}

		.my-serviceItem2 {
			display: flex;
			justify-content: space-between;
			margin: 0 5%;
		}

		.my-serviceItem2-other {
			margin: 0 5%;
		}

		.serviceItem2 {
			width: 230upx;
			height: 180upx;
			border: 1px solid #f3f4f6;
			border-radius: 20upx;
			margin: 0upx 0upx 0 20upx;
			text-align: center;
		}

		.middle2,
		.middle3 {
			margin: 0upx 0 0upx 40upx;
			display: inline-block;
			vertical-align: middle;
			margin-right: 8upx;
		}

		.middle3 {
			display: block;
			margin: 0upx 0 0upx 0upx;
			margin-right: 0upx;
		}

		.dcp-boxTitle {
			height: 200upx;
			background-color: #1777ff;
			color: #fff;

			.text {
				line-height: 80upx;
				font-size: 40upx;

			}

			.floatRight {
				float: right;
				margin-right: 30upx;
			}

			.floatLeft {
				float: left;
				margin-left: 30upx;
			}
		}

		.dcp-nav,
		.dcp-nav2 {
			margin: 0 20upx;
			background-color: $color-white;
			padding-bottom: 40upx;
			// height: 590upx;
			transform: translateY(-100upx);
			border-radius: 20upx;

			.dcp-nav-title {
				line-height: 80upx;
				padding-left: 20upx;
				font-weight: 700;
			}
		}

		.dcp-nav2 {
			margin-top: 20upx;
			height: 300upx;
		}
	}
</style>
