<template>
	<app-layout :haveBackground="false">
		<image style="height: 396rpx;width: 100%;position: absolute;top: 0;left: 0;z-index: -1;"
			src="https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20211209/0adfeb029f95892255541fd43cb70358.png"
			mode=""></image>
		<app-nav-bar v-if="true" :fixed="true" :title="mall.name" color="#000" :hasMallSetting="2" background-color="">
		</app-nav-bar>
		<app-user-center-top :top-style="5" :member-pic-url="userCenter.member_pic_url"
			:is_icon_super_vip="is_icon_super_vip" user-name-color="#222" :isRealname="false"></app-user-center-top>

		<app-my-income></app-my-income>

		<view class="app-my-service" v-if="userCenter.is_menu_status == 1 || true">
			<!-- <view class="title" v-if="userCenter.menu_title">{{userCenter.menu_title}}</view> -->
			<view class="list" :class="[listStyle]">
				<!--  #ifdef MP -->
				<view class="item" v-for="(item, index) in temporaryMenu" :key="index">
					<app-jump-button v-if="item.name!='退出销售端'" form :url="item.link_url" :open_type="item.open_type" :item="item"
						:number="userInfo.service_phone" :arrangement="'row'">
						<view style="width: 100%" class="item-container dir-left-nowrap cross-center">
							<view class="box-grow-0">
								<image :src="item.icon_url" class="icon"></image>
							</view>
							<view class="box-grow-1 main-between" style="max-width: 100%">
								<view class="name">{{item.name}}</view>
								<view class="num" v-if="item.num">
									{{item.num===1?Number(userInfo.salesperson_info.already_verify_num) + Number(userInfo.salesperson_info.not_verify_num):''}}
									{{item.num===2?userInfo.salesperson_info.estate_num:''}}
								</view>
								<view class="dto" v-if="item.dto">
									<view class="red" v-if="userInfo.salesperson_info.unread_message_num!='0'"></view>
								</view>
							</view>
							<view class="box-grow-0">
								<image src="https://t17.9026.com/web/statics/image/index/arrow-right-bgwrite.png"
									class="arrow"></image>
								<!-- <image src="https://t17.9026.com/web/statics/image/index/arrow-right-bgwrite.png" class="arrow"></image> -->
							</view>
						</view>
					</app-jump-button>
					<view v-else style="width: 100%" class="item-container dir-left-nowrap cross-center" @click="logout">
						<view class="box-grow-0">
							<image :src="item.icon_url" class="icon"></image>
						</view>
						<view class="box-grow-1 main-between" style="max-width: 100%">
							<view class="name">{{item.name}}</view>
							<view class="num" v-if="item.num">
								{{item.num===1?Number(userInfo.salesperson_info.already_verify_num) + Number(userInfo.salesperson_info.not_verify_num):''}}
								{{item.num===2?userInfo.salesperson_info.estate_num:''}}
							</view>
							<view class="dto" v-if="item.dto">
								<view class="red"></view>
							</view>
						</view>
						<view class="box-grow-0">
							<image src="https://t17.9026.com/web/statics/image/index/arrow-right-bgwrite.png"
								class="arrow"></image>
							<!-- <image src="https://t17.9026.com/web/statics/image/index/arrow-right-bgwrite.png" class="arrow"></image> -->
						</view>
					</view>
				</view>
				<!--  #endif -->
				<!--  #ifdef H5 -->
				<block v-for="(item, index) in temporaryMenu" :key="index">
					<view class="item" v-if="item.open_type !== 'app'">
						<app-jump-button form :url="item.link_url" :open_type="item.open_type" :item="item"
							:arrangement="`${userCenter.menu_style === '1' ? 'row' : userCenter.menu_style === '2' ? 'column' : ''}`">
							<view style="width: 100%" class="item-container" :class="[
                                  userCenter.menu_style=='1'?'dir-left-nowrap cross-center':'',
                                  userCenter.menu_style=='2'?'dir-top-nowrap cross-center':'',
                              ]">
								<view class="box-grow-0">
									<image :src="item.icon_url" class="icon"></image>
								</view>
								<view class="box-grow-1" style="max-width: 100%">
									<view class="name">{{item.name}}</view>
									<view class="num" v-if="item.num">
										{{item.num===1?Number(userInfo.salesperson_info.already_verify_num) + Number(userInfo.salesperson_info.not_verify_num):''}}
										{{item.num===2?userInfo.salesperson_info.estate_num:''}}
									</view>
									<view class="dto" v-if="item.dto">
										<view class="red"></view>
									</view>
								</view>
								<view class="box-grow-0" v-if="userCenter.menu_style=='1'">
									<image src="https://t17.9026.com/web/statics/image/index/arrow-right.png"
										class="arrow"></image>
								</view>
							</view>
						</app-jump-button>
					</view>
					<view v-else :id="item.id" class="item"></view>
				</block>

				<!--  #endif -->
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view v-if="userInfo && isShowSetting" class="bd-setting dir-left-nowrap main-between cross-center"
			@click="routerGo">
			<view>设置</view>
			<image src="https://shop.9026.com/web/statics/image/mall/static/icon/arrow-right.png" class="bd-arrow">
			</image>
		</view>
		<!-- #endif -->

		<app-copyright v-if="copyright && copyright.status == '1'" background-color="transparent" :link="copyrightLink"
			:pic-url="copyright.pic_url" :text="copyright.description"></app-copyright>

		<template>
			<view class="safe-area-inset-bottom">
				<view :style="{height: '110rpx'}" class="nav-margin "
					:class="haveBackground ? 'app-layout-background' : ''"></view>
			</view>
			<app-tab-bar :page-count="0"></app-tab-bar>
		</template>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex';
	import AppUserCenterTop from '../../components/page-component/app-user-center-top/app-user-center-top.vue';
	import AppCopyright from '../../components/page-component/app-copyright/app-copyright.vue';
	import AppNavBar from '@/components/page-component/index/app-nav-bar.vue';
	import AppTabBar from '@/components/basic-component/app-tab-bar/app-tab-bar.vue';
	import AppMyIncome from '../sale/components/app-my-income.vue';


	export default {
		name: 'user-center',
		components: {
			AppCopyright,
			AppUserCenterTop,
			AppNavBar,
			AppMyIncome,

			AppTabBar
		},
		data() {
			return {
				timer:'',
				temporaryMenu: [{
						icon_url: "https://t17.9026.com/web/statics/image/index/order-icon.png",
						key: "",
						link_url: "/pages/sale/mySaleOrder",
						name: "我的订单",
						open_type: "navigate",
					},
					{
						icon_url: "https://t17.9026.com/web/statics/image/index/kehu.png",
						key: "",
						link_url: "/pages/sale/cusmter/list",
						name: "我的客户",
						open_type: "navigate",
						num: 1,
					},
					{
						icon_url: "https://t17.9026.com/web/statics/image/index/lp.png",
						key: "",
						link_url: "/pages/sale/properties/properties",
						name: "我负责的楼盘",
						open_type: "navigate",
						num: 2,
					},
					{
						icon_url: "https://t17.9026.com/web/statics/image/index/xx.png",
						key: "",
						link_url: "/pages/sale/news/news",
						name: "我的消息",
						open_type: "navigate",
						dto:1
					},
					{
						icon_url: "https://t17.9026.com/web/statics/image/index/kf.png",
						key: "",
						link_url: "",
						name: "联系客服",
						open_type: "tel",
					},
					{
						icon_url: "https://t17.9026.com/web/statics/image/sale/sale_home.png",
						key: "",
						link_url: "/pages/index/index",
						name: "用户端",
						open_type: "reLaunch",
					},
					{
						icon_url: "https://t17.9026.com/web/statics/image/sale/sale_home.png",
						key: "",
						link_url: "",
						name: "退出销售端",
						open_type: "",
					}
				]
			}
		},
		computed: {
			...mapState({
				copyright: state => state.mallConfig.copyright,
				userInfo: state => state.user.info,
				is_icon_super_vip: function(state) {
					return state.mallConfig.mall.setting.is_icon_super_vip;
				},
				foot_bar: function(state) {
					let val = this.$utils.deepClone(state.userCenter.data.foot_bar)
					if (val) {
						val.splice(1, 0, {
							icon_url: '',
							name: '我的优惠券'
						})
						return val;
					} else {
						return state.userCenter.data.foot_bar
					}
				},
				account_bar_status: function() {
					return this.userCenter.account_bar ? this.userCenter.account_bar.status : 0;
				},
				info: state => state.user.info
				// #ifdef H5
				isWechat: function() {
					return this.$jwx.isWechat();
				},
				menus: function() {
					let menus = this.userCenter.menus;
					menus.forEach(item => {
						if (item.open_type === 'app') {
							item.id = this.$utils.guid('user-center');
							let username = this.$utils.getUrlParamApp(item.link_url, 'username');
							let path = this.$utils.getUrlParamApp(item.link_url, 'path');
							let strImg = ``;
							let size = uni.upx2px(50) + 'px';
							let style = `
                                <style>
                                .app-button-row {
                                    height: 100%;
                                    width: 100%;
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: center;
                                    align-items: center;
                                }

                                .app-button-column {
                                    height: 100%;
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                }
                                .box-grow-0 {
                                  min-width: 0;
                                  -webkit-box-flex: 0;
                                  -webkit-flex-grow: 0;
                                  -ms-flex-positive: 0;
                                  flex-grow: 0;
                                  -webkit-flex-shrink: 0;
                                  -ms-flex-negative: 0;
                                  flex-shrink: 0;
                                }

                                .box-grow-1 {
                                  min-width: 0;
                                  -webkit-box-flex: 1;
                                  -webkit-flex-grow: 1;
                                  -ms-flex-positive: 1;
                                  flex-grow: 1;
                                  -webkit-flex-shrink: 1;
                                  -ms-flex-negative: 1;
                                  flex-shrink: 1;
                                }

                                    .name {
                                        color: #666666;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .dir-left-nowrap {
                                      display: -webkit-box;
                                      display: -webkit-flex;
                                      display: flex;
                                      -webkit-flex-direction: row;
                                      flex-direction: row;
                                      flex-wrap: nowrap;
                                    }

                                .dir-top-nowrap {
                                  display: -webkit-box;
                                  display: -webkit-flex;
                                  display: flex;
                                  -webkit-box-orient: vertical;
                                  -webkit-flex-direction: column;
                                  flex-direction: column;
                                  flex-wrap: nowrap;
                                }

                                .cross-center {
                                  display: -webkit-box;
                                  display: -webkit-flex;
                                  display: flex;
                                  -webkit-align-items: center;
                                  align-items: center;
                                }
							</style>`;
							let classStr = '';
							let font = '';
							let padding = '';
							let arrow = require(
								"https://shop.9026.com/web/statics/image/mall/static/icon/arrow-right.png"
							);
							if (true) {
								let margin = uni.upx2px(16);
								strImg =
									`<img src="${item.icon_url}" width="${size}" height="${size}" style="margin-right: ${margin}px"/>`;
								font = '17px';
								padding = 0;
							} else if (this.userCenter.menu_style == 2) {
								let margin = uni.upx2px(28);
								strImg =
									`<img src="${item.icon_url}" width="${size}" height="${size}" style="margin-bottom: ${margin}px"/>`;
								classStr = 'name';
								font = uni.upx2px(24) + 'px';
								padding = `0px` + ' ' + uni.upx2px(12) + 'px';
							}

							let str =
								`<div class="box-grow-0">${strImg}</div>
                                        <div class="box-grow-1" style="max-width: 100%;"><div style="padding:${padding};font-size: ${font}" class="${classStr}">${item.name}</div></div>`;
							if (true) {
								let width = uni.upx2px(12);
								let height = uni.upx2px(22);
								str += ` <div class="box-grow-0">
                                    <img src="${arrow}" width="${width}px" height="${height}px"/>
                                </div>`
							}
							let div = ``;
							let div1 = '';
							if (true) {
								let padding1 = uni.upx2px(20) + 'px';
								let padding2 = uni.upx2px(32) + 'px';
								div1 =
									`<div style="width: 100%;padding: ${padding1} ${padding2}" class="dir-left-nowrap cross-center">${str}</div>`
							} else {
								let padding = uni.upx2px(24) + 'px';
								div1 =
									`<div style="width: 100%;padding: ${padding} 0" class="dir-top-nowrap cross-center">${str}</div>`
							}
							if (true) {
								div = `<div class="app-button-row">${div1}</div>`
							} else {
								div = `<div class="app-button-column">${div1}</div>`
							}
							style += div;
							this.$utils.createWxOpenLaunchWeapp(item.id, username, path, style);
						}
					});
					return menus;
				}
				// #endif
			}),
			copyrightLink() {
				if (!this.copyright) return {};
				let {
					open_type,
					new_link_url,
					params
				} = this.copyright.link;
				return {
					openType: open_type,
					url: new_link_url,
					params: params ? params : []
				};
			},
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			}),
			...mapGetters('userCenter', {
				userCenter: 'userCenter'
			}),
			listStyle() {
				// if (this.userCenter.menu_style == 1) return 'row';
				// if (this.userCenter.menu_style == 2) return 'grid dir-left-wrap';
				return 'row';
			},
			// #ifdef H5
			isShowSetting: function() {
				return this.$storage.getStorageSync('platform') !== 'wechat';
			}
			// #endif
		},
		onLoad() {
			this.$commonLoad.onload();
			// #ifdef H5
			this.$jwx.config();
			// #endif
		},
		async onShow() {
			this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
				uni.redirectTo({
					url: `/pages/user-center/user-center`
				});
			})
			this.refresh()
			this.$nextTick().then(() => {
				this.$store.dispatch('userCenter/data');
				this.$store.dispatch('user/isEnterSales', true);
			});
		},
		methods: {
			...mapActions('user', ['refresh']),
			// #ifdef H5
			routerGo() {
				uni.navigateTo({
					url: '/pages/registered/setting'
				});
			},
			// #endif
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定退出销售端？',
					success: (res) => {
						if (res.confirm) {
							this.$request({
								url: this.$api.sale.logout,
								method: 'post'
							}).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '退出成功',
										icon: 'none'
									})
									this.timer=setTimeout(()=>{
										uni.reLaunch({
											url:'/pages/index/index',
										})
									},1500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		onUnload() {
			clearTimeout(this.timer)
		}
	}
</script>

<style scoped lang="scss">
	.nav-margin {
		width: #{750rpx};
	}

	.app-my-service {
		// width: #{702rpx};
		border-radius: #{16rpx};
		// margin: #{24rpx} auto;
		box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
		background: #fff;

		.title {
			padding: #{32rpx} #{32rpx} #{16rpx};
		}

		.list {
			.item {
				.icon {
					width: #{36rpx};
					height: #{36rpx};
					display: block;
				}

				.arrow {
					width: 42rpx;
					height: 42rpx;
				}

				.num {
					font-size: 28rpx;
					color: #999999;
					margin-right: 32rpx;
				}
				.dto{
					margin-right: 33rpx;
					.red{
						margin-top: 10rpx;
						width: 16rpx;
						height: 16rpx;
						background: #FB122B;
						border: 2rpx solid #FFFFFF;
						border-radius: 50%;
					}
				}
			}
		}

		.list.row {
			.item-container {
				padding: #{30rpx} #{39rpx};
			}

			.icon {
				margin-right: #{16rpx};
			}
		}

		.list.grid {
			.item {
				width: 25%;

				.icon {
					margin-bottom: #{28rpx};
				}

				.name {
					padding: 0 #{12rpx};
					font-size: $uni-font-size-weak-one;
					color: $uni-general-color-one;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item-container {
				padding: #{24rpx} 0;
			}
		}
	}

	.u-foot-box {
		position: relative;
		height: 104upx;
	}

	.u-icon {
		margin-top: 44upx;
		width: 40upx;
		height: 40upx;
		margin-right: 17upx;
	}

	.u-foot-item {
		font-size: #{26rpx};
		color: #666666;
		padding-top: #{14rpx};
		width: 50%;
	}

	.u-foot-info {
		text-align: center;
	}

	.u-foot-num {
		font-size: 32upx;
		margin-bottom: 10upx;
	}

	.u-line {
		height: 40upx;
		width: 2upx;
		background-color: #666666;
		position: absolute;
		top: 45upx;
		left: 50%;
		margin-left: -2upx;
	}

	// #ifdef H5
	.bd-setting {
		width: 702upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 16upx;
		padding: 0 33upx;
		background: #ffffff;
		margin: 24upx auto;
		box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
		font-size: 32upx;
		color: #353535;
	}

	.bd-arrow {
		width: #{12rpx};
		height: #{22rpx};
	}

	// #endif
</style>
