<template>
	<view class="wrap">

		<view class="user-header">
			<!-- <image
        src="/static/aidex/login/login-bg.png"
        class="logo"
      ></image> -->
			<view class="logo">

			</view>
			<view class="bg-box">
				<view class="userinfo">
					<view class="image" @click="navTo('info')">
						<image style="width: 100%" src="/static/aidex/login/bg-logo2.png"></image>
					</view>
					<view class="info" style="display: flex; justify-content: space-between">
						<view>

							<!-- <view class="username">
								<view class="username-department">
									{{ userData.deptName }}
								</view>
							</view> -->

							<!-- <view class="join-day">已加入通联新合新能源集团 1005天</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view>
				<view class="top-list">
					<!-- 账号安全 -->
					<view class="personal-list shadow">
						<view class="account-security" @click="navTo('pwd')">
							<u-icon name="bell" size="40" color="#63D9B0" style="margin-right: 20rpx;"></u-icon>
							<view class="account-contect"> {{ $t('homePage.mine.accountSec') }} </view>
							<image src="/static/aidex/images/next.png" class="next"></image>

						</view>
						<!-- <u-cell-item icon="map" :iconStyle="{ color: '#316ede' }" title="账号安全" @click="navTo('pwd')"></u-cell-item> -->
						<view class="u-line"></view>
						<!-- 关于我们 -->
						<!-- <view class="account-security" @click="navTo('about')">
							<u-icon name="info-circle" size="40" color="#889cf6" style="margin-right: 20rpx;"></u-icon>
							<view class="account-contect"> {{ $t('homePage.mine.aboutUs')}} </view>
							<image src="/static/aidex/images/next.png" class="next"></image>
						</view> -->

						<view class="u-line"></view>
						<!-- 关于我们 -->
						<view class="account-security" @click="navTo('message')">
							<u-icon name="email" size="40" color="#ffaa00" style="margin-right: 20rpx;"></u-icon>
							<view class="account-contect"> {{ $t('homePage.mine.message')}} </view>
							<image src="/static/aidex/images/next.png" class="next"></image>
						</view>
					</view>
				</view>

				<!-- 系统设置 -->
				<view class="personal-list shadow margin-top">

					<!-- 关于我们 -->
					<view class="account-security" @click="show = true">
						<u-icon name="/static/aidex/images/language.png" size="40" color="#ffaa00"
							style="margin-right: 20rpx;"></u-icon>
						<view class="account-contect"> {{ $t('homePage.mine.changeLanguage')}} </view>
						<image src="/static/aidex/images/next.png" class="next"></image>
					</view>

					<view class="u-line"></view>

					<view class="account-security" @click="navTo('setting')">

						<u-icon name="setting" size="40" color="#59a4e8" style="margin-right: 20rpx;"></u-icon>
						<view class="account-contect"> {{ $t('homePage.mine.sysSetting') }} </view>
						<image src="/static/aidex/images/next.png" class="next"></image>
					</view>
				</view>

			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="changeLanguage"></u-select>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				iconSize: 38,
				background: {
					backgroundColor: "#f5f5f5",
				},
				show: false,
				list: [{
						value: 'zh_CN',
						label: '中文'
					},
					{
						value: 'en_US',
						label: 'English'
					}
				],
			};
		},
		onLoad() {

		},
		computed: {
			userData() {
				return this.vuex_user;
			},
			avatarUrl() {
				// let url = this.vuex_user.avatarUrl || '/ctxPath/static/images/user1.jpg';
				// url = url.replace('/ctxPath/', this.vuex_config.baseUrl + '/');
				let url =
					this.vuex_config.baseUrl + this.vuex_user.avatar ||
					"/static/aidex/tabbar/my_2.png";
				url = this.replaceAll(url, "\\", "/");
				return url + "?t=" + new Date().getTime();
			},
		},
		methods: {
			changeLanguage(val){
				this.$u.vuex("vuex_language", val[0].value);
				this.$i18n.locale = val[0].value
				this.getAllDict()
				this.getStationByUser()
				this.getProvinceStation()
				uni.setTabBarItem({
				  index: 0,
				  text: this.$t('homePage.home.station'),
				})
				uni.setTabBarItem({
				  index: 1,
				  text: this.$t('homePage.home.electricityPrice'),
				})
				uni.setTabBarItem({
				  index: 2,
				  text: this.$t('homePage.home.mine'),
				})
			},
			getStationByUser() {
				this.$u.api.getStationByUser().then((res) => {
					this.$u.vuex("vuex_station", res.data)
				})
			},
			getProvinceStation() {
				this.$u.api.alarm.GetNewStationlist().then((res) => {
					this.$u.vuex("vuex_provinceStation", res.data.list)
				    this.$u.vuex("vuex_currentStation", res.data.list[0].list[0].list[0])
				})
			},
			getAllDict() {
				this.$u.api.getAllDict().then((res) => {
					const {
						data
					} = res
					const dicts = {}
					data.forEach((element) => {
						dicts[element.type] = element.list
					})
					this.$u.vuex("vuex_dicts", dicts)
				})
			},
			to(url) {
				uni.redirectTo({
					url: url,
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: `/pages/sys/user/${url}`,
				});
			},
			logout() {
				this.$u.api.logout().then((res) => {
					this.$u.toast(res.msg);
					if (res.code == "200" || res.code == "401") {
						let self = this;
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/sys/login/index",
							});
						}, 500);
					}
				});
			},
			upgrade() {
				// #ifdef APP-PLUS
				this.$u.api.upgradeCheck().then((res) => {
					if (res.result == "true") {
						uni.showModal({
							title: this.$t('homePage.mine.tip'),
							content: res.message + this.$t('homePage.mine.downUpdate'),
							showCancel: true,
							success: function(res2) {
								if (res2.confirm) {
									plus.runtime.openURL(res.data.apkUrl);
								}
							},
						});
					} else {
						this.$u.toast(res.message);
					}
				});
				// #endif
				// #ifndef APP-PLUS
				this.$u.toast(this.$t('homePage.mine.noUpdate'));
				// #endif
			},
			logout() {
				this.$u.api.logout().then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/sys/login/index",
							});
						}, 500);
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.wrap .u-cell-box .u-cell_title {
		color: #202328;
	}

	.sign-in-images {
		width: 125rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: 5px;

		uni-image {
			width: 125rpx;
			height: 50rpx;
		}
	}

	.out-box {
		width: 670rpx;
		position: absolute;
		bottom: 140rpx;
	}

	.user-header {
		width: 100%;
		height: 450rpx;

		.logo {
			width: 100%;
			height: 400rpx;
			border-radius: 0 0 50% 50%;
			background-color: #069E7A;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.bg-box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			height: 450rpx;
			width: 100%;
		}

		.userinfo {
			display: flex;
			align-items: center;
			flex-direction: column;

			.image {
				flex-shrink: 0;
				width: 60%;
        margin-top: 100rpx;
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30rpx;
				color: #fff;
				height: 106rpx;

				.username {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.username-name {
						display: inline;
						font-size: 30rpx;
						color: #2a2a2a;
						margin-right: 33rpx;
					}

					.username-department {
						z-index: 9999999;
						color: #ffffff;
						text-align: center;
						border-radius: 5rpx;
						margin-right: 45rpx;
					}

					.username-edit {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.join-day {
					display: inline;
					font-size: 22rpx;
					color: #979797;
				}
			}
		}

		.logout {
			flex-shrink: 0;
			position: absolute;
			right: 70rpx;
			top: 65rpx;

			.u-btn {
				font-size: 30rpx;
			}
		}
	}

	.list {
		margin-top: 120rpx;
		margin-left: 40rpx;
		width: 670rpx;
		height: 200rpx;

		.u-line {
			width: 630rpx;
			height: 1rpx;
			margin-left: 20rpx;

			background-color: #f5f5f5;
		}

		.shadow {
			box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
		}

		.margin-top {
			margin-top: 40rpx;
		}

		.personal-list {
			background-color: #fff;
			border-radius: 10rpx;

			.account-security {
				width: 670rpx;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 35rpx;
				padding-right: 35rpx;
				display: flex;
				border-radius: 10rpx;
				align-items: center;
				position: relative;

				.account-icon {
					width: 33rpx;
					height: 33rpx;
					margin-right: 33rpx;
				}

				.account-context {
					// width: 33rpx;
					font-size: 24rpx;
					color: #2a2a2a;
				}

				.next {
					position: absolute;
					right: 38rpx;
					width: 12rpx;
					height: 21rpx;
				}
			}
		}
	}

	.toolbar {
		padding: 0 4%;
		margin-bottom: 5rpx;
		border-radius: 0 0 100% 100%;
		background-color: #4094ff;

		.box {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 10rpx;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
			background-color: #fefefe;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// flex-flow: wrap;
				height: 120rpx;
				color: #666666;
				font-size: 30rpx;
				padding: 10rpx 10rpx;

				.icon {
					font-size: 50rpx;
				}

				.label {
					padding: 10rpx;
				}
			}

			.hover {
				background-color: #f6f6f6;
				border-radius: 15rpx;
			}
		}
	}

	.uni-input-input {
		border: 1px solid red;
	}

	.userinfo-topbox {
		padding: 10px 15px;
		color: #ffffff;

		.number {
			font-size: 20px;

			em {
				font-style: normal;
				font-size: 12px;
			}
		}
	}

	.user-order-top {
		padding: 10px 15px;
		background: #ffffff;
	}

	.user-order-box {
		padding: 10px 15px;
		background: #ffffff;
		border-bottom: 1px solid #ededed;

		.u-col {
			position: relative;
		}

		.u-badge {
			top: -8px !important;
			right: 5px !important;
			background: #ff7001;
			border: 1px solid #ffffff;
			box-sizing: content-box;
		}
	}
</style>
