<template>
	<view>
		<!-- 顶部标签栏 -->
		<selectTemp 
			:sortData="sortData" 
			:de_staffid="de_staffid" 
			:de_starttime="de_starttime" 
			:de_endtime="de_endtime"
			:cusStatus="cusStatus"
			 @screenClick="screenClick"
			 @queryData="queryData"
			 @changeSearchData="changeSearchData"
			 @resetForm="resetForm"
			 :searchForm="searchForm"
		>
		</selectTemp>
		<view class="tab_list">
			<view class="tabli" :class="de_type == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">全部</view>
			<view class="tabli" :class="de_type == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">我的客户</view>
			<view class="tabli" :class="de_type == 2 ? 'tabliactive' : ''" @click="changeFirTab(2)">下属的客户</view>
			<view class="tabli" :class="de_type == 3 ? 'tabliactive' : ''" @click="changeFirTab(3)">我参与的客户</view>
		</view>
		
		<!-- 客户信息 -->
		<view class="manage_con">
			<view class="clineInfo" v-for="(item,index) in list" :key="index" @click.stop="toMore(item.id,1)">
				<view class="info_head">
					<view>{{item.name}}</view>
				</view>
				<view class="info_main">
					<view >
						<view class="main_left">
							<view class="left_top" v-if="item.contacts" style="margin-top: 20rpx;color: #666;font-size: 30rpx;">
								{{item.contacts ? item.contacts.name : '--'}}
							</view>
							<view class="left_followUp" style="margin-top: 20rpx;color: #666;font-size: 30rpx;">
								<view>下次跟进时间：</view>
								<view>{{item.next_time ? 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="10"></u-rate>
								</view>
							</view>
							<view class="left_foot" v-if="item.follow">
								<view class="l_box">
									<span>{{item.follow}}</span>
								</view>
							</view>
						</view>
					</view>
					<view class="main_right" v-if="item.owner_staff">
						<image :src="item.owner_staff ? item.owner_staff.img : BASE_IMG_URL+'headImg.png'"  mode="scaleToFill">
						</image>
						<view>{{item.owner_staff?item.owner_staff.name:''}}</view>
					</view>
				</view>
				<view class="info_footer" @click.stop.prevent>
					<view class="footer_content" @click.stop="followClick(item.id,1)">
						<image :src="BASE_IMG_URL+'tj.png'"  mode="scaleToFill"></image>
						<view>跟进</view>
					</view>
					<view class="footer_content" @click.stop="linkmanClick(item.id)">
						<image :src="BASE_IMG_URL+'rq.png'"  mode="scaleToFill"></image>
						<view>联系人</view>
					</view>
					<view class="footer_content" @click.stop="telClick(item)">
						<image :src="BASE_IMG_URL+'dh.png'"  mode="scaleToFill"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view>
		<!-- 创建用户图标 -->
		<view class="icon_creat" @click="createClineClick">
			<image :src="BASE_IMG_URL+'1.png'" mode="scaleToFill"></image>
		</view>
		<!-- 选择联系人 -->
		<select-link ref="linkChild" @linkInfo="linkInfo"></select-link>
		<u-action-sheet
			:list="taskActions" 
			v-model="taskShow"
			:cancel-btn = "true"
			@cancel.natice="onCancel"
		></u-action-sheet>
		<!-- 底部导航 -->
		<uniTabbar z-index="10" v-if="tipNumber || tipNumber==0" :tipNumber="tipNumber"></uniTabbar>
	</view>
</template>

<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import selectTemp from '@/components/content/selectTemp/selectTemp.vue';
	import selectLink from '@/components/selectLink.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,
		netContactList
	} from '@/api/kehu.js'
	import {
		netAgentList
	} from '@/api/clues.js'
	export default {
		mixins: [customerPageJumps],
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				sort: false,
				screen: false,
				date: '',
				show: false,
				sortData: customerSortDatas,
				screenData: [],
				taskShow: false,
				telShow: false,
				description: '',
				taskActions: [{
						name: '普通任务',
						color: '#008EFF'
					},
					{
						name: '跟进任务',
						color: '#008EFF'
					}
				],
				queryObj: {},
				page: 1,
				totalPage: 1,
				limit: 10,
				list: [],
				//默认 筛选条件
				de_type: 0,   //0全部   1我的   2下属负责的
				de_starttime: '',
				de_endtime: '',
				cusStatus:'',  //0：未成交  1：已成交
				de_staffid: null,
				tipNumber: null,
				isAdd:true,
				searchForm:[]
			}
		},
		components: {
			selectTemp,
			uniTabbar,
			selectLink
		},
		onLoad(options) {
			if (options.type) {
				let t = options.type
				this.de_type = t == 0 ? 1 : t == 1 ? 0 : null
				this.de_starttime = options.startTime
				this.de_endtime = options.endTime
				this.de_staffid = options.staffid
			}
			if(options.status){
				this.de_type = options.status
				this.de_starttime = options.stime
				this.de_endtime = options.etime
			}
			if(options.cusStatus) {
				this.cusStatus = String(options.cusStatus)
				this.de_starttime = options.stime
				this.de_endtime = options.etime
			}
			//获取 客户搜索表单
			this.handleSearchForm('customer',(data)=>{
				this.searchForm = data
			})
		},
		onShow() {
			this.getTip()
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			changeSearchData(type,key,value){
				let arr = this.searchForm
				arr.forEach((ele,index)=>{
					if(ele.field == type){
						ele[key] = value
						this.$set(this.searchForm, index, ele)
					}
				})
			},
			resetForm() {
				this.searchForm = this.handleResetSearch(this.searchForm)
			},
			changeFirTab(type) {
				this.de_type = type
				this.init()
			},
			init() {
				this.list = []
				this.page = 1
				//获取客户 列表
				this.getList()
			},
			getTip() {
				netAgentList().then(res => {
					uni.setStorageSync('token', res.data.userinfo.token)
					uni.setStorageSync('roleType', res.data.userinfo.role_type)
					uni.setStorageSync('rules', res.data.userinfo.rules)
					this.tipNumber = res.data.total
					this.init()
				})
			},
			queryData(params) {
				this.queryObj = params
				this.init()
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					createtime: (this.de_starttime && this.de_endtime) ? (this.de_starttime + ',' + this.de_endtime) : '',
					type: this.de_type,
					staff_id: this.de_staffid,
					contract_status: this.cusStatus,
					...this.queryObj,
					...this.handleSureSearch(this.searchForm)
				}
				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) {
				this.$refs.linkChild.init(item.id)
			},
			linkInfo(obj) {
				// #ifdef MP-ALIPAY
				dd.showCallMenu({
				    phoneNumber: obj.mobile, 
				    code: '+86'
				})
				// #endif
				// #ifndef MP-ALIPAY || APP-PLUS
				uni.makePhoneCall({
					phoneNumber: obj.mobile
				})
				// #endif
				// #ifdef APP-PLUS
				plus.device.dial(obj.mobile, true);
				// #endif
			},
			selectPhone(e) {
				uni.makePhoneCall({
					phoneNumber: e.detail.phone
				})
			},
			onCancel() {
				this.taskShow = false;
				this.telShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.tab_list{
		width:750rpx;
		height:80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background:#fff;
		margin-bottom:24rpx;
		.tabli{
			font-size:24rpx;
			color:#333;
			line-height: 75rpx;
			text-align: center;
			border-bottom:4rpx solid #fff;
		}
		.tabliactive{
			border-bottom:4rpx solid $uni-text-color;
		}
	}
	.clineInfo {
		background-color: #fff;
		padding: 30rpx 45rpx;
		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: 34rpx;
				font-weight: 700;
				color: #333;
			}
		}

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

			.main_left {
				.left_followUp {
					display: flex;
					padding-bottom: 30rpx;
					font-size: 30rpx;
					color: #666;
				}

				.left_star {
					font-size: 30rpx;
					color: #666;
					display: flex;
					padding-bottom: 30rpx;
				}

				.left_foot {
					padding-bottom: 20rpx;

					.l_box {
						margin-right: 35rpx;
						float: left;

						span {
							background: $uni-text-color-opcity;
							padding: 5rpx 12rpx;
							font-size: 26rpx;
							color: $uni-text-color;
							border-radius: 5rpx;
						}
					}
				}
			}

			.main_right {
				text-align: center;
				padding: 20rpx 15rpx 0 0;

				image {
					border-radius: 50%;
					width: 129rpx;
					height: 129rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.info_footer {
			display: flex;
			justify-content: space-around;
			padding-top: 30rpx;
			height: 80rpx;
			border-top: 1px solid #ededed;
			margin-top: 20rpx;

			.footer_content {
				// width: 25%;
				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: 180rpx;
		right: 80rpx;

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