<template>
	<div class="home-page">
		<ModalHaveTitle class="base-info" :title="'顾问基本信息'">
			<BaseInfoList :list="serviceInfo"></BaseInfoList>
			<NavButton :text="'复制活动链接'" @click-btn="copyLink" class="copy-link"></NavButton>
		</ModalHaveTitle>

		<div class="home-menu">
			<span
				v-for="(item, index) in homeMenu"
				:key="index" class="menu-item"
				:class="{actived: item.text === curMenu}"
				@click="changeMenu(item.text)">{{item.text}}</span>
		</div>

		<OrderList v-if="curMenu === '订单信息'" :uid="userUid"></OrderList>
		<Exchange v-if="curMenu === '退换货'" :uid="userUid"></Exchange>
		<Coupon v-if="curMenu === '优惠券'"></Coupon>
		<UserInfo v-if="curMenu === '用户信息'" :wechatUid="serviceInfo.wechatUid.value" :userCode="userCode" @get-user-uid="getUserUid"></UserInfo>
		<Tip :text="tipCont" :hasClose="tipClose" :show="tipShow" @change-tip-status="changeTipStatus"></Tip>
	</div>
</template>

<script>
import BaseInfoList from './components/base-info-list';
import OrderList from './components/order-list';
import Exchange from './components/exchange';
import Coupon from './components/coupon';
import UserInfo from './components/user-info';
import NavButton from './components/nav-button';
import ModalHaveTitle from './components/modal-have-title';
import Tip from './components/tip';
import Clipboard from 'clipboard';
import homeModel from '../../models/home';

export default {
	name: 'Home',
	data() {
		return {
			homeMenu: [
				{text: '用户信息'},
				{text: '订单信息'},
				{text: '退换货'},
				{text: '优惠券'}
			],
			curMenu: '用户信息',
			serviceInfo: {
				wechatCode: {label: '微信号', value: ''},
				wechatNickName: {label: '微信昵称', value: ''},
				wechatMobile: {label: '微信手机号', value: ''},
				machineCode: {label: '机器码', value: ''},
				yohoMobile: {label: '有货账号', value: ''},
				wechatUid: {label: '有货UID', value: ''},
				groupName: {label: '所属分组', value: ''},
				staffName: {label: '运营人员', value: ''}
			},
			tipCont: '复制成功',
			tipShow: false,
			tipClose: false,
			wechatCode: this.queryString().operator,
			userCode: this.queryString().friend,
			shareCode: '',
			userUid: ''
		};
	},
	mounted() {
		homeModel.getWechatConsultant({wechatCode: this.wechatCode}).then(ret => {
            if (ret && ret.code === 200) {
				let data = ret.data || {};

				Object.keys(data).forEach((item, key) => {
					this.serviceInfo[item].value = data[item];
				});

				this.getWechatShareCode(data.wechatUid || '');
            }
        });
	},
	methods: {
		queryString() {
			let vars = [], hash;
			let hashes = window.location.search.slice(1).split('&');

			for (let i = 0; i < hashes.length; i++) {
				hash = hashes[i].split('=');
				vars.push(hash[0]);
				vars[hash[0]] = hash[1];
			}
			return vars;
		},
		getWechatShareCode(wechatUid) {
			wechatUid = 500031262;

			homeModel.getWechatShareCode({
				uid: wechatUid
			}).then(ret => {
				console.log(ret)
			});
		},
		changeMenu(item) {
			this.curMenu = item;
		},
		copyLink() {
			let that = this;
			let clipboard = new Clipboard('.copy-link', {
				text: function() {
					return this.shareCode;
				}
			});

			clipboard.on('success', function(e) {
				that.copyDialog();
				e.clearSelection();
			});

			clipboard.on('error', function() {
				that.copyErrDialog();
			});
		},
		copyDialog() {
			this.tipShow = true;
		},
		copyErrDialog() {
			this.tipShow = true;
			this.tipCont = '复制失败，请手动复制"XXXX"';
			this.tipClose = true;
		},
		changeTipStatus(item) {
			this.tipShow = item;
		},
		getUserUid(uid) {
			console.log(uid)
			this.userUid = uid;
		}
	},
	components: {
		BaseInfoList,
		OrderList,
		Exchange,
		Coupon,
		UserInfo,
		NavButton,
		ModalHaveTitle,
		Tip
	}
};
</script>

<style lang="scss">
html, body {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	background: #f6f6f6;
	font-family: helvetica,Arial,"\9ED1\4F53",sans-serif;
}

* {
    -webkit-tap-highlight-color: transparent;
}

a {
	color: #000;
	text-decoration: none;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.red {
	color: #d8021a;
}

.home-page {
	max-width: 794px;
	width: 100%;
	margin: 0 auto;
}

.base-info {
	.copy-link-btn {
		width: 100%;
		margin: 0 auto;
		background: #000;
		color: #fff;
		text-align: center;
		border: none;
		outline: none;
		margin: 0 auto;
		display: block;
		height: 24px;
		line-height: 24px;
		border-radius: 5px;
	}

	.info-list {
		height: auto;
		overflow: hidden;

		li {
			width: 50%;
			float: left;
			height: 24px;
			line-height: 24px;
		}
	}
}

.home-menu {
	display: flex;
	justify-content: space-evenly;
	margin-top: 20px;
	background: #fff;
	height: 61px;
	line-height: 52px;
	border-bottom: 1px solid #EAEBEB;
	box-sizing: border-box;

	.menu-item {
		padding: 5px;
		border-radius: 5px;
		font-family: PingFang-SC-Regular;
		font-size: 16px;
		cursor: pointer;
		color: #979797;

		&.actived {
			color: #000;
			font-family: PingFang-SC-Medium;
		}
	}
}
</style>