<template>
	<view>
		<!-- 顶部标签栏 -->
		<selectTemp
		:isSeas="true"
		:sortData="sortData"
		:de_type="de_type"
		:de_starttime="de_starttime"
		:de_endtime="de_endtime"
		@sortClick="sortClick"  
		@screenClick="screenClick"
		@queryData="queryData"></selectTemp>
		
		<!-- 客户信息 -->
		<view class="manage_con">
			<view class="clineInfo" v-for="(item,index) in list" :key="index" @tap.stop="toMore(item.id,2)">
				<view class="info_head">
					<view style="width: #333333; font-size: 34rpx;">{{item.name}}</view>
				</view>
				<view class="info_main">
					<view class="main_left">
						<view class="left_followUp">
							<view>下次跟进时间：{{item.next_time}}</view>
						</view>
						<view class="left_star">
							<view>客户星级：</view>
							<view>
								<u-rate :count="5" v-model="item.level" disabled active-color="#FFD049" inactive-color="#b2b2b2" :size="30" :gutter="20"></u-rate>
							</view>
						</view>
					</view>
				</view>
				<view class="info_footer" @tap.stop.prevent>
					<view class="footer_content" @tap.stop="toGroupCompany(item)">
						<image :src="BASE_IMG_URL+'tj.png'" mode="scaleToFill"></image>
						<view>领取</view>
					</view>
					<view class="footer_content" @tap.stop="telClick(item.contacts)">
						<image :src="BASE_IMG_URL+'dh.png'" mode="scaleToFill"></image>
						<view>电话</view>
					</view>	
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view>
		<u-action-sheet 
			:list="taskActions" 
			v-model="taskShow"
			:cancel-btn = "true"
			@cancel.natice="onCancel"
		></u-action-sheet>
		
		<u-action-sheet
			:list="telActions" 
			v-model="telShow"
			:cancel-btn = "true"
			@click="selectPhone"
		></u-action-sheet>
	</view>
</template>

<script>
	import selectTemp from '@/components/content/selectTemp/selectTemp.vue';
	import {customerSortDatas} from 'components/content/data/data.js';
	import { BASE_IMG_URL } from '@/util/api.js'
	import {customerPageJumps} from "../crm_page_jumps.js";
	import { netKehuList, netReceiveKehu } from '@/api/kehu.js'
	export default {
		mixins:[customerPageJumps],
		data() {
			return {
				sort: false,
				screen: false,
				date: '',
				show: false,
				sortData:customerSortDatas,
				screenData:[],
				taskShow: false,
				telShow: false,
				taskActions: [
					{name:'普通任务',color:'#008EFF'},
					{name:'跟进任务',color:'#008EFF'}
				],
				telActions: [],
				queryObj:{},
				page:1,
				totalPage:1,
				limit:10,
				list:[],
				//默认 筛选条件
				de_type:null,
				de_starttime:'',
				de_endtime:'',
				de_flag:false,
				BASE_IMG_URL:BASE_IMG_URL,
				count: 5,
				value: 2
			}
		},
		components: {
			selectTemp,
		},
		onLoad (options) {
			console.log(options)
			if(options.type){
				this.de_type = options.type
				this.de_starttime = options.startTime
				this.de_endtime = options.endTime
			}
			this.de_flag = true
			this.list = []
			this.page = 1
			this.totalPage = 1
			//获取客户 列表
			this.getList()
		},
		onShow() {
			
		},
		onReachBottom() {
			if(this.page >= this.totalPage){
				return
			}
			this.page ++
			this.getList()
		},
		methods: {
			queryData(params) {
				this.queryObj = params
				this.list = []
				this.page = 1
				this.getList()
			},
			getList() {
				let params = {
					is_seas: 1,
					page:this.page,
					limit: this.limit,
					...this.queryObj
				}
				netKehuList(params).then(res=>{
					res = res.data
					this.list = this.list.concat(res.data)
					this.page = res.current_page
					this.totalPage = res.last_page
				})
			},
			sortClick(data) {
				this.sort = data;
				this.screen = false;
			},
			screenClick(data) {
				this.screen = data;
				this.sort = false;
			},
			switchover(value){
				this.screenData = value;
				
			},
			// 任务
			taskClick() {
				this.taskShow = true;
			},
			// 电话
			telClick(item) {
				if(item){
					this.telShow = true;
					this.telActions[0] = {
						text:item.name+item.mobile, 
						color:'#008EFF',
						mobile:item.mobile
					}
				}else{
					uni.showToast({
						title:'暂无联系方式',
						icon:'none'
					})
					this.telActions = []
				}
			},
			selectPhone(e) {
				// #ifdef MP-ALIPAY
				dd.showCallMenu({
				    phoneNumber: this.telActions[0].mobile, 
				    code: '+86'
				})
				// #endif
				// #ifndef MP-ALIPAY || APP-PLUS
				uni.makePhoneCall({
					phoneNumber: this.telActions[0].mobile
				})
				// #endif
				// #ifdef APP-PLUS
				plus.device.dial(this.telActions[0].mobile, true);
				// #endif
			},
			onCancel() {
				this.taskShow = false;
				this.telShow = false;
			},
			//领取
			toGroupCompany(item) {
				uni.showModal({
					title:'是否确定领取公池客户',
					content:'领取后长时间未跟进，客户将自动转为公共客户',
					success:(res)=>{
						if(res.confirm){
							netReceiveKehu({customer_id:item.id}).then(res=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
								setTimeout(()=>{
									this.list = []
									this.page = 1
									this.getList()
								},2000)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.clineInfo {
		background-color: #fff;
		padding: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
		.info_head {
			display: flex;
			justify-content: space-between;
			:first-child {
				font-size: 28rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.info_main {
			border-bottom: 1px solid #ededed;
			.main_left {
				.left_followUp {
					display: flex;
					font-size: 30rpx;
					color: #666;
					margin: 20rpx 0;
				}
				.left_star {
					display: flex;
					padding-bottom: 20rpx;
					font-size: 30rpx;
					color: #666;
					background-size: 15rpx 15rpx;
				}
			}
		}

	.info_footer {
		display: flex;
		justify-content: space-around;
		padding-top: 24rpx;
		.footer_content {
			line-height: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 15rpx;
			}
			.icon-iconmore-copy,
			.icon-follow {
				font-size: 22rpx;
			}
	
			.icon-follow,
			.icon-task,
			.icon-tel {
				margin-right: 5rpx;
			}
	
			.icon-iconmore-copy {
				margin-left: 5rpx;
				margin-top: 2rpx;
			}
		}
	}
	}

	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 100rpx;
		right: 100rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>
