<template>
	<view>
		<view style="position: fixed;z-index: 1;left: 0;top: 0;right: 0;">
			<uni-nav-bar v-if="isMobieDevice" style="width: 100%" backgroundColor="trtransparent" :statusBar="true"
				color="#fff" :border="false">
				<template #left>
					<view @click="switchLanguage">
						<view class="btn" style="font-size: 30rpx;color: white;">
							{{$t('index.language')}}
						</view>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="container" style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;">
			<view class="title-box">
				<view class="mine-top-bg"> </view>

				<view class="mine-header">
					<image class="picture" mode="aspectFill" :src="web('icon_header.png')"></image>
					<view class="mine-info">
						<block v-if="userName">
							<text class="name">{{userName}}</text>
							<!-- <view class="identity">{{$t('index.merchant-center')}}</view> -->
							<view class="identity">{{ userType }}</view>
						</block>
						<block v-else>
							<button class="btn" style="border: 1px solid #fff;" :plain="true" @click="toLogin"
								hover-class="none">{{$t('index.login')}}</button>
						</block>
					</view>
				</view>
			</view>
			<view class="list-box" style="margin-top: 20rpx;">
				<uni-list>
					<view class="lit-item-bg" v-for="(item,index) in list" :key="index">
						<uni-list-item :border="false" style="width: 100%;" :thumb="web(item.icon)"
							@click="jumpDetail(item.path)" link>
							<template #body>
								<view
									style="color: #222;font-size: 30rpx; font-weight: 500;height: 30px;line-height: 30px;">
									{{$t(item.text)}}
								</view>
							</template>
						</uni-list-item>
					</view>
				</uni-list>
			</view>

			<view class="list-box" v-if="isShowChangePlat">
				<uni-list>
					<uni-list-item :title="$t('index.platform-switch')"
						thumb="http://manage.51svalue.com/group1/M00/00/7A/CgAAEWOYIGKAQYBIAAAK-rw5NlE129.png"
						@click="jumpDetail('/pages/mine/changePlat')" link />
				</uni-list>
			</view>
			<view class="logout-box" v-if="userName">
				<button class="logout" @click="logout">{{$t('index.logout')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		customerWxToken,
		getUserInfo,
		getBuyerList,
		logout,
		findPlatformCodeByMobile
	} from '@/config/api.js'

	import {
		web
	} from '@/utils/util.js'

	export default {
		data() {
			return {
				userName: '',
				userType: '',
				dealtNumber: '0',
				isMobieDevice: getApp().globalData.isMobieDevice,
				isShowChangePlat: false,
				list: [{
						icon: 'icon_todo.png',
						text: 'index.todo-my',
						path: '/pages/dealt/index'
					},
					// {
					// 	icon: 'icon_locate.png',
					// 	text: 'index.address-manage',
					// 	path: '/pages/address/index'
					// },
					// {
					// 	icon: 'icon_invoice.png',
					// 	text: 'index.invoice-manage',
					// 	path: '/pages/invoice/index'
					// },
					{
						icon: 'icon_enterprise.png',
						text: 'index.company-info',
						path: '/pages/information/index'
					},
					// {
					// 	icon: 'icon_note.png',
					// 	text: 'index.notice',
					// 	path: '/pages/deliveryList/index'
					// },
					// {
					// 	icon: 'icon_collect.png',
					// 	text: 'index.my-collect',
					// 	path: '/pages/collect/collect'
					// },
					// {
					// 	icon: 'coupon.png',
					// 	text: 'index.coupon-get',
					// 	path: '/pages/coupon/coupon'
					// }
				]
			}
		},

		methods: {
			web(name) {
				return web(name)
			},
			switchLanguage() {
				let language = uni.getStorageSync('locate')
				if (language != "zh-Hans") {
					this.$i18n.locale = "zh-Hans"
					uni.setLocale('zh-Hans')
					uni.setStorageSync('locate', 'zh-Hans')

					let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
					this.userType = userInfo.userCurrentPlatName
				} else {
					this.$i18n.locale = "en"
					uni.setLocale('en')
					uni.setStorageSync('locate', 'en')
					let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
					this.userType = userInfo.userCurrentPlat
					// if(userInfo.userCurrentPlatName === '运营平台') this.userType = 'operator'
					// if(userInfo.userCurrentPlatName === '卖家中心') this.userType = 'seller'
					// if(userInfo.userCurrentPlatName === '供应商') this.userType = 'supplier'
				}
			},
			async onGetPhoneNumber(e) {
				if (!e.detail.code) { //用户决绝授权  
					//拒绝授权后弹出一些提示
					uni.showModal({
						content: '获取手机号失败！',
						showCancel: false
					})
				} else { //允许授权
					let data = await customerWxToken({
						code: this.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					})
					if (data.success) {
						let res = JSON.parse(data.content.token)
						uni.setStorageSync('token', res.token)
						let info = await getUserInfo({
							params: {
								token: res.token
							}
						})
						const customerName = info.content.userInfo.customerName
						let userInfo = {
							customerCode: info.content.userInfo.customerCode,
							customerName
						}
						this.userName = customerName
						uni.setStorageSync('userInfo', JSON.stringify(userInfo))
						this.getDealtNumber()
					}
				}
			},
			loginSuccess() {
				this.getDealtNumber()
			},
			jumpDetail(url) {
				if (url == '/pages/dealt/index') {
					uni.switchTab({
						url
					})
				}
				this.mixinCheckLogin().then(() => {
					uni.navigateTo({
						url
					})
				}).catch(err => {
					this.toLogin()
				})
			},
			toLogin() {
				uni.navigateTo({
					url: `/pages/login/index?url=${encodeURIComponent(JSON.stringify('/pages/mine/index'))}`
				});
			},
			getDealtNumber() {
				getBuyerList({}, {
					params: {
						page: 1,
						rows: 1
					},
					custom: {
						load: false
					}
				}).then(({
					content
				}) => {
					this.dealtNumber = content.totalElements || '0'
				})
			},
			logout() {
				let _this = this;
				uni.showModal({
					title: this.$t('index.notice-tip'),
					content: this.$t('index.msg-ogout'),
					success: function(res) {
						if (res.confirm) {
							_this.logoutMethod()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			logoutMethod() {
				logout({
					params: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.success) {
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						Object.assign(this.$data, this.$options.data())
						setTimeout(() => {
							uni.showToast({
								title: res.content
							});
						}, 30)
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.content,
								icon: 'none'
							});
						}, 30)
					}
				})
			},
		},
		async onShow() {
			if (uni.getStorageSync('token')) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				let language = uni.getStorageSync('locate')
				this.userName = userInfo.customerName
				if(language === 'en') {
					if(userInfo.userCurrentPlatName === '运营平台') this.userType = 'operator'
					if(userInfo.userCurrentPlatName === '卖家中心') this.userType = 'seller'
					if(userInfo.userCurrentPlatName === '供应商') this.userType = 'supplier'
				} else {
					this.userType = userInfo.userCurrentPlatName
				}
				let platRes = await findPlatformCodeByMobile({
					mobile: userInfo.loginName
				})
				// this.isShowChangePlat = platRes.content.length > 1
				this.getDealtNumber()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-top-bg {
		position: absolute;
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient(135deg, #132A50 0%, #3C5579 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.title-box {
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 474rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

		/deep/ .uni-nav-bar-text {
			font-size: 16px;
		}

		.mine-header {
			margin-left: 50rpx;
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 100rpx;


			.picture {
				z-index: 1;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.mine-info {
				margin-left: 40rpx;
				z-index: 1;

				.name {
					margin-top: 10rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					z-index: 1;
				}

				.identity {
					margin-top: 30rpx;
					flex: none;
					padding: 0 35rpx;
					height: 60rpx;
					line-height: 60rpx;
					border: 1rpx solid #fff;
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #D5E2F3;
					text-align: center;
					z-index: 1;
				}

				.btn {
					margin-top: 20rpx;
					padding: 0;
					width: 200rpx;
					font-size: 16px;
					color: #fff;
					border: none;
				}
			}
		}
	}

	.list-box {

		padding: 0 30rpx;
		background-color: #FFFFFF;

		.lit-item-bg {
			display: flex;
			height: 128rpx;
			align-items: center;
			border-bottom: 1px solid #F2F2F2;
		}
	}

	.logout-box {

		margin-top: 40rpx;

		.logout {
			height: 96rpx;
			line-height: 96rpx;
			background-color: #fff;
			font-size: 15px;
			font-weight: 500;
			color: #222;

			&::after {
				border-radius: 0;
				border: 0;
			}
		}
	}
</style>