<template>
	<view class="mine-view">
		<image class="header-image" mode="widthFix" :src="wodebeijingImage"></image>
		<u-navbar :is-back="false" :background="{ background: 'transparent' }" :border-bottom="false">
			<text class="title-view">我的</text>
		</u-navbar>
		<view class="header-view">
				<view class="header-left-view">
					<view class="head-image">
						<image :style="headImageStyle" :src="headImageUrl"></image>
					</view>
					<view class="header-content">
						<view class="name-view" @click="handleClickName">{{name || "点击登录"}}</view>
						<view :class="['tel-view', {'active': mobile}]" @click="$u.throttle(handleClickTel, 500)">
							<text>{{telTip}}</text>
							<u-icon class="tel-arrow-icon" name="arrow-up-fill"></u-icon>
						</view>
					</view>
				</view>
				<view class="header-right-view" @click="$u.throttle(handleClickSetting, 500)">
					<view class="setting-view">
						<image :src="shezhiImage" class="right-image-view"></image>
						<text>设置</text>
					</view>
					<view v-if="isSuperuser" class="super-button"><u-button@click="handleSuperButton">切换用户</u-button></view>
				</view>
		</view>
		<view class="mine-content">

			<view class="ware-house-view">
				<view class="ware-house-title">仓配功能</view>
				<view class="ware-house-content">
					<view v-for="(item, index) in warehouseItems" :key="index" class="ware-house-content-item" @click="handleClick(item.pathName, true)" hover-class="u-hover-class">
						<view class="ware-house-image">
							<image :src="item.icon" :style="item.imageStyle"></image>
						</view>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>

			<view class="list-view">
				<view v-for="(group, ind) in items" :key="ind" class="group-view">
				<u-cell-group :border="false">
					<view v-for="(item, index) in group" :key="index">
						<u-cell-item :value="item.value" :border-bottom="false" @click="handleClick(item.pathName, false)">
							<image slot="icon" :src="qnFile(item.icon)" :style="item.imageStyle"></image>
							<view slot="title" class="item-title">{{item.title}}</view>
							<view slot="value" class="item-value">{{value}}</view>
						</u-cell-item>
					</view>
				</u-cell-group>
				</view>
			</view>
		</view>
		<u-modal v-model="show" :content="content" show-cancel-button @confirm="logout"></u-modal>
		<view>
      <u-toast ref="uToast" />
    </view>
		<MaskTip
      :show="showMask"
      imageName="mengceng4.png"
      :imageStyle="imageStyle"
      name="order_tip"
			@click="showMask1 = true"
    />
		<MaskTip
      :show="showMask1"
      imageName="mengceng3.png"
      :imageStyle="imageStyle1"
      name="history_tip"
			:timeout="false"
    />
	</view>
</template>

<script>
	import login from "@/utils/login.js";
	import MaskTip from '@/components/mask-tip/index.vue'

	const app = getApp();
	export default {
		components: {
			MaskTip
		},
		data() {
			return {
				serviceTel: '18124099271',
				// showSuperButton: false,
				show: false,
				content: '是否确认退出该账户？',
				wodebeijingImage: '',
				placeholderImage: '',
				needSettled: true, // 需要入驻
				showMask: false,
				showMask1: false,
			}
		},
		computed: {
			settled() {
				return this.vuex_token && this.vuex_settled && this.vuex_settled.record || null
			},
			avatar() {
				return this.vuex_settled && this.vuex_settled.avatar
			},
			name() {
				return (this.settled && this.settled.nickname) || (this.vuex_user && (this.vuex_user.name || this.vuex_user.loginName))
			},
			mobile() {
				return (this.settled && this.settled.mobile) || (this.vuex_user && this.vuex_user.mobile)
			},
			items() {
				return [
					[{
						pathName: 'order/index',
						title: '订单管理',
						value: '',
						icon: 'dingdanguanli.png',
						imageStyle: 'width:34rpx;height:32rpx'
					},{
						pathName: 'wallet/index',
						title: '我的钱包',
						value: '',
						icon: 'qianbao.png',
						imageStyle: 'width:34rpx;height:32rpx'
					},
					{
						pathName: 'info/index',
						title: '我的资料',
						value: '',
						icon: 'wodeziliao.png',
						imageStyle: 'width:32rpx;height:32rpx'
					},
					{
						pathName: 'portrait/index',
						title: '服务质量',
						value: '',
						icon: 'dingdanshuju.png',
						imageStyle: 'width:32rpx;height:32rpx'
					},
					{
						pathName: 'history/index',
						title: '浏览记录',
						value: '',
						icon: 'liulanjilu.png',
						imageStyle: 'width:34rpx;height:32rpx'
					},
					],
					[
					// {
					// 	pathName: 'address/index',
					// 	title: '收货地址',
					// 	value: '',
					// 	icon: 'wddizhi.png',
					// 	imageStyle: 'width:32rpx;height:32rpx'
					// },
					{
						pathName: 'customer/index',
						title: '联系客服',
						value: this.serviceTel,
						icon: 'lxkefu.png',
						imageStyle: 'width:32rpx;height:32rpx'
					}]
				]
			},
			warehouseItems() {
				return [
					{
						pathName: 'warehouse/index',
						title: '物料订单',
						value: '',
						icon: process.uniEnv.qn_base_url + 'wodepeijian.png',
						imageStyle: 'width:60rpx;height:54rpx'
					},
					{
						pathName: 'warehouse/spare',
						title: '物料库',
						value: '',
						icon: process.uniEnv.qn_base_url + 'wodebeijian.png',
						imageStyle: 'width:60rpx;height:54rpx'
					},
					{
						pathName: 'warehouse/return',
						title: '返件信息',
						value: '',
						icon: process.uniEnv.qn_base_url + 'fanjianxinxi.png',
						imageStyle: 'width:56rpx;height:54rpx'
					},
					{
						pathName: 'warehouse/records',
						title: '出库记录',
						value: '',
						icon: process.uniEnv.qn_base_url + 'churuku.png',
						imageStyle: 'width:50rpx;height:54rpx'
					},
					]
			},
			telTip() {
				return this.mobile || '绑定手机号'
			},
			headImageUrl() {
				return this.avatar || this.placeholderImage
			},
			headImageStyle() {
				return this.avatar ? 'width:112rpx; height:112rpx;border-radius:56rpx' : 'width:120rpx; height:120rpx;border-radius:60rpx'
			},
			headSize() {
				return this.avatar ? 112 : 120
			},
			shezhiImage() {
				return process.uniEnv.qn_base_url + 'shezhi.png'
			},
				liulanjilumage() {
				return process.uniEnv.qn_base_url + 'liulanjilu.png'
			},
				wodeziliaoImage() {
				return process.uniEnv.qn_base_url + 'wodeziliao.png'
			},
			isSuperuser() {
				return this.vuex_superuser
			},
			imageStyle() {
      	return  'width:602rpx; margin-top:560rpx; margin-left:28rpx'
			},
			imageStyle1() {
				return  'width:596rpx; margin-top:736rpx; margin-left:28rpx'
			}
		},
		watch: {
			vuex_token(val, oldVal) {
				if (val && !this.isSuperuser) {
					this.allowLogin()
				}
			},
		},
		onLoad() {
			app.trackPage('我的首页')
			if(this.vuex_token ) {
				if (!this.isSuperuser) {
					this.allowLogin()
				}
				
				if (!this.settled) {
					this.getData()
				}
			}
			this.wodebeijingImage = this.qnFile('wodebeijing-jb.png')
			this.placeholderImage = this.qnFile('touxiang.png')
			this.showMaskTip()
		},
		onShow() {
			// 更新是否需要入住
			if (!this.needSettled) return
			this.$u.api.getSettleBaseInfo().then((res) => {
				this.needSettled = res.data?.needSettled
			})
		},
		methods: {
			qnFile(src) {
				return process.uniEnv.qn_base_url + src
			},
			getData() {
				let self = this
				app.getBaseInfo(self);
			},
			handleClick(path, isWarehouse) {
				if(this.vuex_token) {
					// 没入驻不能进入仓配相关页面
					if (isWarehouse && this.needSettled) {
						this.$refs.uToast.show({
							title: '请先在首页入驻',
							type: 'warning',
							duration: 1500,
						})
						return
					}
					this.$u.route({
						url: 'pages/mine/' + path
					})
				} else {
					this.$u.route({url: "pages/login/index"})
				}
			},
			handleClickSetting() {
				this.$u.route({url: 'pages/mine/setting/index'})
			},
			handleClickName() {
				if(this.vuex_token && this.settled) {
					return false
				}
				this.$u.route({url: "pages/login/index"})
			},
			handleClickTel() {
				if(this.vuex_token && this.settled && this.mobile) {
					this.show = true
					return false
				}
				this.$u.route({url: "pages/login/index"})
			},
			logout() {
				login.setUserData({}, this);
				app.globalData.logout = true
			},
			async allowLogin() { // 超级用户，显示登录按钮
				let res = await this.$u.api.allowLogin()
				if (res && res.code == 200) {
					this.$u.vuex('vuex_superuser', res.data);
				}
				
			},
			handleSuperButton() {
				if(this.vuex_token) {
					this.$u.route({url: 'pages/mine/superLogin/index'})
				} else {
					this.$u.route({url: "pages/login/index"})
				}
			},
			// 显示提示蒙版
			showMaskTip() {
				this.showMask = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine-view {
		position: relative;
		height: 100vh;
		display: flex;
		background-color: #F4F5F7;
			flex-direction: column;
		.header-image {
			position: absolute;
			width: 100%;
		}


		.title-view {
			color: #FFFFFF;
			font-weight: bold;
			font-size: 40rpx;
			padding-left: 30rpx;
		}
			.header-view {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				// margin-bottom: 60rpx;
				padding: 26rpx 30rpx 60rpx 30rpx;

				.header-left-view {
					display: flex;
					align-items: center;
					.head-image {
						z-index: 1;
						width: 120rpx;
						height: 120rpx;
						background-color: #FFFFFF;
						border-radius: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					
					.header-content {
						color: #FFFFFF;
						z-index: 1;
						margin-left: 24rpx;
					
						.name-view {
							font-size: 40rpx;
							font-weight: bold;
							margin-bottom: 6rpx;
							margin-top: -4rpx;
						}
					
						.tel-view {
							background-color: #FFFFFF;
							border-radius: 26rpx;
							color: #2272FF;
							width: 180rpx;
							height: 52rpx;
							font-size: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
					
							&.active {
								color: #FFFFFF;
								border: 2rpx solid #FFFFFF;
								background-color: #2272FF;
							}
					
							.tel-arrow-icon {
								transform: rotate(90deg);
								margin-left: 6rpx;
							}
						}
					}
				}
				.header-right-view {
					z-index: 1;
					.setting-view {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						color: #FFFFFF;
						margin-right: 4rpx;
						font-size: 26rpx;
						margin-top: -24rpx;
						.right-image-view {
							width: 34rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}
					
					.super-button {
						margin-top: 20rpx;
					}
				}
			}
		.mine-content {
			height: 100%;
			overflow: auto;
			position: relative;
			padding-bottom: 30rpx;
			margin: 0rpx 30rpx;
    	border-radius: 12rpx;

			.ware-house-view {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 30rpx 30rpx 40rpx 30rpx;
				height: 240rpx;
				.ware-house-title {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-bottom: 30rpx;
				}
				.ware-house-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					.ware-house-content-item {
						color: #333333;
						font-size: 26rpx;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						.ware-house-image {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 14rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}

			.list-view {
				.group-view {
					margin-top: 20rpx;
					background-color: #FFFFFF;
					border-radius: 12rpx;
					overflow: hidden;
					.item-title {
						font-size: 32rpx;
						color: #333333;
						margin-left: 16rpx;
						line-height: 32rpx;
					}
					
					.item-value {
						font-size: 26rpx;
						color: #999999;
					}
					
					.line-view {
						height: 2rpx;
						background-color: #F4F5F7;
						margin: 30rpx;
					}
				}
			}
		}
	}
	.logout {
		padding: 20rpx;
	}
</style>
