<template>
	<view class="drawPage">
		<uni-menubar :title="`客户画像`" />
		<view class="pure_top blue"></view>
		<view v-if="custItem.uid">
			<tm-sheet>
				<view class="flexBox">
					<view class="flexLeft">
						<tm-avatar :round="5" titl :size="180" :src="custItem.avatar">
						</tm-avatar>
					</view>
					<view class="flexright">
						<view class="custName mb-15">
							<view class="custLeft"><text
									style="font-size: 34rpx; font-weight:bolder">{{custItem.nickname}} <text
										v-if="custItem.realname">({{custItem.realname}})</text> </text>
								<!-- <tm-button size="xs" theme="green">线上客户</tm-button> -->
							</view>
							<view style="font-size: 28rpx;color: #2196F3;" @click="editDetail">
								<tm-icons color="blue" :size="30" name="icon-edit"></tm-icons>
								<text>编辑</text>

							</view>
						</view>
						<view class="mt-10 expain">
							<tm-icons class="mx-10" name="icon-phone" color="blue"></tm-icons>
							:{{custItem.mobile?custItem.mobile:'无'}}
						</view>
						<view class="mt-10 expain">
							<tm-icons class="mx-10" name="icon-calendar-alt" color="blue"></tm-icons>
							:{{custItem.company?custItem.company:'无'}}
						</view>
						<view class="mt-10 expain">
							<tm-icons class="mx-10" name="icon-weixin" color="blue"></tm-icons>
							:{{custItem.wxh?custItem.wxh:'无'}}
						</view>
						<view class="mt-10 expain">
							<tm-icons class="mx-10" name="icon-aliwangwang" color="blue"></tm-icons>
							:{{custItem.content  || '无'}}
						</view>
					</view>
				</view>
			</tm-sheet>
			<tm-sheet :padding="[0,0]">
				<view>
					<tm-tabs color="blue" @change="tabChange" v-model="activeIndex" :list="['访客分析','访问记录','访问统计']"></tm-tabs>
				</view>
				<view v-if="activeIndex === 1" class="pt-30" style="background-color: #fafafa;">
					<tm-translate animation-name="fadeDown">
						<tm-pullBottom disabled @refresh="listScroll" :height="750" disabled :bottomY="10">
							<tm-timeline :list="timeList"></tm-timeline>
						</tm-pullBottom>
						<view style="height: 50rpx;"></view>
					</tm-translate>
				</view>
				<view v-else-if="activeIndex === 0">
					<view class="listBody">
						<view class="listRow">
							<view class="listLeft">7天活跃度</view>
							<view class="listRight text-blue">{{listData.active_count}}次</view>
						</view>
						<view class="listRow">
							<view class="listLeft">最近访问时间</view>
							<view class="listRight text-blue">{{listData.last_time}}</view>
						</view>
						<view class="listRow">
							<view class="listLeft">分享次数</view>
							<view class="listRight text-blue">{{listData.share_count}}次</view>
						</view>
						<view class="listRow">
							<view class="listLeft">拨打电话次数</view>
							<view class="listRight text-blue">{{listData.phone_count}}次</view>
						</view>
						<view class="listRow">
							<view class="listLeft">总计访问次数</view>
							<view class="listRight text-blue">{{listData.view_count}}次</view>
						</view>
						<view class="listTitle">访问次数排行</view>
						<view class="listRow">
							<view class="listLeft">名片</view>
							<view class="listRight text-blue">{{listData.ranking}}名</view>
						</view>
					</view>
				</view>
				<view v-else-if="activeIndex === 2">
					<view class="pieBox">
						<view class="listTitle">
							年统计
						</view>
						<view>
							<qiun-data-charts canvas2d type="pie" :opts="opts" :chartData="yearInit" />
						</view>
						<view class="listTitle">
							月统计
						</view>
						<view>
							<qiun-data-charts canvas2d type="pie" :opts="opts" :chartData="monthInit" />
						</view>
						<view class="listTitle">
							周统计
						</view>
						<view>
							<qiun-data-charts canvas2d type="pie" :opts="opts" :chartData="weekInit" />
						</view>
					</view>
					<view style="height: 50rpx;"></view>
				</view>
			</tm-sheet>
			<uni-suspension />
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action">
					<tm-button @click="phoneClick" icon="icon-phone-fill" font-color="blue" theme="white" block>打电话
					</tm-button>
				</view>
				<view class="action">
					<tm-button @click="wxClick" icon="icon-aliwangwang" font-color="white" theme="blue" block>去聊天
					</tm-button>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</view>

		<tm-dialog v-model="dialogShow" :content="dialogContent" @confirm="editDetail"></tm-dialog>
	</view>
</template>

<script>
	import qiunDataCharts from '@/subpages/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				dialogShow: false,
				dialogContent: "",
				custItem: {},
				custData: {
					uid: '',
					page: 1
				},
				timeList: [],
				defautDeal: [],
				activeIndex: 0,
				listData: {},
				echartsData: {},
				yearInit: {},
				monthInit: {},
				weekInit: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		computed: {
			userInfo() {
				return this.$tm.vx.state().user.userInfo || {}
			},
		},
		onLoad(option) {
			if (option.id) {
				this.custData.uid = option.id
				this.getCustDetail()
			}
		},
		created() {
			uni.$on('refresh', this.getCustDetail);
		},
		methods: {
			phoneClick() {
				if (this.custItem.mobile) {
					uni.makePhoneCall({
						phoneNumber: this.custItem.mobile
					});
				} else {
					this.dialogShow = true
					this.dialogContent = "客户还没有电话号码,是否去完善信息?"
				}
			},
			wxClick() {
				let {
					uid,
					nickname
				} = this.custItem
				uni.navigateTo({
					url: "/subpages/pages/card/cardChat?t_uid=" + uid + '&name=' + nickname + '&card_id=' + this
						.userInfo.card_id
				})
			},
			editDetail() {
				let jsonItem = JSON.stringify(this.custItem)
				uni.navigateTo({
					url: '/subpages/pages/card/editDetail?item=' + jsonItem
				})
			},
			tabChange(e) {
				this.activeIndex = e
			},
			listScroll() {
				this.custData.page++
				this.$tm.request.post('card/trackdatadetail', this.custData).then(res => {
					if (res.data.length > 0) {
						res.data.list.forEach(val => {
							let obj = {
								color: "blue",
								borderColor: 'blue'
							}
							obj.content = val.label
							obj.title = val.nickname
							obj.time = val.create_time
							this.timeList.push(obj)
						})
					}

				})
			},
			// 客户信息
			getCustDetail() {
				this.$tm.request.post('card/trackdatadetail', this.custData).then(res => {
					this.custItem = res.data.user
					this.listData = res.data.data
					this.echartsData = res.data.pie
					this.monthInit = {
						series: [{
							data: this.echartsData.month
						}]
					};
					this.weekInit = {
						series: [{
							data: this.echartsData.week
						}]
					};
					this.yearInit = {
						series: [{
							data: this.echartsData.year
						}]
					};
					res.data.list.forEach(val => {
						let obj = {
							color: "blue",
							borderColor: 'blue'
						}
						obj.content = val.label
						obj.title = val.nickname
						obj.time = val.create_time
						this.timeList.push(obj)
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.footBtn {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.pieBox {
		padding: 50rpx;

		.listTitle {
			font-size: 34rpx;
			margin-bottom: 50rpx;
			font-weight: bolder;
		}
	}

	.listBody {
		background-color: #fff;
		padding: 50rpx;

		.listRow {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.listTitle {
			font-size: 34rpx;
			margin-bottom: 50rpx;
			font-weight: bolder;
		}
	}

	.flexBox {
		display: flex;
		justify-content: space-between;

		.flexright {
			flex: 1;
			margin-left: 20rpx;

			.expain {
				font-size: 26rpx;
				color: #2196F3;
			}

			.custName {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.custLeft {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
