<template>
	<view class="radarIndex">
		<uni-menubar title="AI雷达" />
		<tm-tabs @change='tabClick' color="bg-gradient-blue-accent" v-model="activeIndex" range-key="name"
			:list="[{name:'客户轨迹',id:0},{name:'名片分析',id:1},{name:'文章分析',id:2}]">
		</tm-tabs>

		<view>
			<tm-translate animation-name="fadeLeft">
				<tm-pullBottom :height="1200" disabled :bottomY="10" @refresh="listScroll" :loading="loading">
					<tm-sheet :padding="[20,20]" class="mt-40" v-for="(item,index) in custList" :key="index" @click="custDetail(item)">
						<view class="flexBox">
							<view class="flexLeft">
								<tm-avatar :size="150"
									:src="item.avatar">
								</tm-avatar>
							</view>
							<view class="flexright">
								<view class="custName mb-15">
									<view class="custLeft"><text>{{item.nickname}}</text>
										<!-- <tm-button size="xs" theme="green">线上客户</tm-button> -->
									</view>
									<view  style="font-size: 22rpx;color: #2196F3;">访问{{item.count}}次</view>
								</view>
								<view style="font-size: 26rpx;color:#9E9E9E" >
									{{item.label}}
								</view>
								<view class="custName mt-15">
									<view style="font-size: 26rpx;color: #bdbdbd;">
									访问时间: {{item.create_time}}
									</view>
<!-- 									<view>
										<tm-button size="s" theme="blue">线上客户</tm-button>
									</view> -->
								</view>
							</view>
						</view>
					</tm-sheet>
				</tm-pullBottom>
			</tm-translate>
		</view>
		<!-- 		<view v-else>
			<tm-empty label="还没有数据"></tm-empty>
		</view> -->
		<uni-tabBar />
		<uni-suspension />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				params: {
					page: 1,
					name: ""
				},
				custList: [],
				loading: false,
			}
		},
		created() {
			this.getCustList()
		},
		methods: {
			custDetail(item){
				uni.navigateTo({
					url:"/subpages/pages/radar/drawPage?id="+item.uid
				})
			},
			// 去聊天
			goChat(item) {
				uni.navigateTo({
					url: "/subpages/pages/card/cardChat?t_uid=" + item.uid + '&name=' + item.nickname +
						'&card_id=' + item.card_id
				})
			},
			searchClick() {
				this.params.page = 1
				this.getCustList()
			},
			listScroll() {
				this.loading = true
				this.params.page++
				this.$tm.request.post('card/track', this.params).then(res => {
					this.loading = false
					res.data.forEach(val => {
						this.custList.push(val)
					})
				})
			},
			getCustList() {
				this.$tm.request.post('card/track', this.params).then(res => {
					this.custList = res.data
				})
			},
			tabClick(e) {
				this.activeIndex = e
				uni.redirectTo({
					url: "/subpages/pages/card/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flexBox {
		display: flex;
		justify-content: space-between;


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

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

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