<template>
	<view class="group_company">
		<view class="group_head">
			<view class="client">
				{{(info.name) ? info.name : '--'}}
			</view>
			<view class="nickname" v-if="info.contacts">
				{{(info.contacts) ? info.contacts.name : '--'}}<text>
					|</text>{{(info.contacts) ? info.contacts.mobile : '--'}}
			</view>
			<view class="state" v-if="info.follow">
				{{info.follow ? info.follow : '--'}}<text style="padding: 0 30rpx;"> |</text>
				<u-rate :count="5" v-model="info.level" disabled active-color="#FFD049" inactive-color="#b2b2b2" :size="34" :gutter="10"></u-rate>
			</view>
			<view class="time" v-if="info.next_time">
				下次跟进时间：{{info.next_time ? info.next_time : '--'}}
			</view>
			<view class="site" v-if="info.address">
				{{(info.address) ? info.address : '--'}}
			</view>
			<view class="roll">
				<scroll-view scroll-x="true" class="scrollView" lower-threshold="50" enable-flex>
					<view class="scrolllist">
						<view class="scrollView_item" @click="toTeam">
							<view class="scroll_top">
								{{info.teamCount?info.teamCount:0}}
							</view>
							<view class="scroll_foot">
								团队
							</view>
						</view>
						<view class="scrollView_item" @click="toBusiness">
							<view class="scroll_top">
								{{info.bussinessCount?info.bussinessCount:0}}
							</view>
							<view class="scroll_foot">
								商机
							</view>
						</view>
						<view class="scrollView_item" @click="contact(info.id)">
							<view class="scroll_top">
								{{info.contactsCount?info.contactsCount:0}}
							</view>
							<view class="scroll_foot">
								联系人
							</view>
						</view>
						<view class="scrollView_item" @click="subord(info.id)">
							<view class="scroll_top">
								{{info.companyCount?info.companyCount:0}}
							</view>
							<view class="scroll_foot">
								子公司
							</view>
						</view>
						<view class="scrollView_item" @click="signList(info.id)">
							<view class="scroll_top">
								{{info.signCount?info.signCount:0}}
							</view>
							<view class="scroll_foot">
								签到记录
							</view>
						</view>
						<view class="scrollView_item" @click="Contract(info.id)">
							<view class="scroll_top">
								{{info.contractCount?info.contractCount:0}}
							</view>
							<view class="scroll_foot">
								合同
							</view>
						</view>
						<view class="scrollView_item" @click="cost(info.id)">
							<view class="scroll_top">
								{{info.consumeCount?info.consumeCount:0}}
							</view>
							<view class="scroll_foot">
								费用
							</view>
						</view>
						<view class="scrollView_item" @click="payment(info.id)">
							<view class="scroll_top">
								{{info.receivalbleCount?info.receivalbleCount:0}}
							</view>
							<view class="scroll_foot">
								回款记录
							</view>
						</view>
						<view class="scrollView_item" @click="accessory(info.id)">
							<view class="scroll_top">
								{{info.fileCount?info.fileCount:0}}
							</view>
							<view class="scroll_foot">
								附件
							</view>
						</view>
						<view class="scrollView_item" @click="operation(info.id)">
							<view class="scroll_top">
								{{info.operateCount?info.operateCount:0}}
							</view>
							<view class="scroll_foot">
								操作记录
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 标签栏 -->
		<view class="group_tab">
			<u-tabs name="cate_name" :list="list" :is-scroll="false" active-color="#008EFF" :current="current"
				@change="change"></u-tabs>
			<view class="processing_title" v-if="current == 0">
				<customer-dynamic v-if="info && info.id" :isSeas="Number(type)" :kehuid="info.id" :type="1"></customer-dynamic>
			</view>
			<view class="processing_title" v-if="current == 1">
				<info-detail v-if="info && info.id" :info="info"></info-detail>
			</view>
		</view>
		<view style="height:100rpx"></view>
		<!-- 底部导航栏 -->
		<view class="bottom_nav" v-if="type == 1 && info.operation == 'update'">
			<view class="bottom_item" @click="followClick">
				<image :src="BASE_IMG_URL+'tj.png'" class="botimg"></image>
				<view>跟进</view>
			</view>
			<view class="bottom_item" @click="telClick">
				<image :src="BASE_IMG_URL+'dh.png'" class="botimg"></image>
				<view>拨打电话</view>
			</view>
			<view class="bottom_item" @click="moreClick">
				<image :src="BASE_IMG_URL+'morebtn.png'" class="botimg"></image>
				<view>更多操作</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="pull_head">更多操作</view>
			<view class="pull_con">	
				<view class="pull_item" @click="transferClueClick(info.id)">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">转移客户</view>
				</view>
				<view class="pull_item" @click="removeSeas">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">移入公海</view>
				</view>
				<view class="pull_item" v-if="info && info.is_collect == 0" @click="Tofocus">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">重点关注</view>
				</view>
				<view class="pull_item" v-if="info && info.is_collect == 1" @click="ToRemovefocus">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">取消关注</view>
				</view>
				<view class="pull_item" @click="mapLocation">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">地图定位</view>
				</view>
				<view class="pull_item" @click="editClueClick(info.id)">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">编辑客户</view>
				</view>
				<view class="pull_item" @click="toSigntrip(info.id)">
					<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">出差签到</view>
				</view>
			</view>
		</u-popup>
		<u-action-sheet
			:list="telActions" 
			v-model="telShow"
			:cancel-btn = "true"
			@click="selectPhone"
		></u-action-sheet>
	</view>
</template>

<script>
	import customerDynamic from 'components/content/customerDynamic/customerDynamic.vue';
	import infoDetail from 'components/content/infoDetail/infoDetail.vue';
	import {
		moreCompany
	} from 'components/content/data/data.js';
	import {
		pageJumps
	} from "./group_page_jumps.js";
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	import {
		netKehuDetail,
		netRemoveSeas,
		netReceiveKehu,
		netKeyCollect,
		netRemoveColect,
	} from '@/api/kehu.js'
	import {
		netRelationBusiness
	} from '@/api/index.js'
	export default {
		mixins: [pageJumps],
		data() {
			return {
				BASE_IMG_URL: BASE_IMG_URL,
				show: false,
				taskShow: true,
				statusShow: false,
				// overShow: false,
				moreCompany: [],
				telShow: false,
				telActions: [],
				telname: '',
				id: '', //客户id
				info: {},
				type: 1, //1普通客户  2公海客户
				customer_id: '',
				relation_id: '',
				current: 0,
				list: [{
						name: '跟进记录',
						status: 0
					},
					{
						name: '基本信息',
						status: 1
					},
				],
			}
		},
		onLoad(options) {
			this.id = options.id
			this.moreCompany = moreCompany
			this.type = options.type
		},
		onShow() {
			this.getInfo()
		},
		components: {
			customerDynamic,
			infoDetail,
		},
		methods: {
			//添加跟进
			followClick() {
				uni.navigateTo({
					url: '/pagesA/crm/customerManagement/newFllow/newFllow?id='+this.id+'&type=1'
				})
			},
			change(index) {
				this.current = index;
			},
			tabs_change(e) {
				this.current = e;
				this.mescroll.resetUpScroll();
			},
			//附件跳转
			accessory(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/attachment/attachment?id=' + id + '&types=2' + '&type=' + this.type
				})
			},
			//点击 附件  查看
			lookDetail(item) {
				if (item.types.indexOf('image') != -1) {
					uni.previewImage({
						urls: [item.file_path]
					})
				} else {
					uni.downloadFile({
						url: item.file_path,
						success: (res) => {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: (res) => console.log('成功打开文档')
							})
						},
						fail: (err) => {
							console.log(err, 'shibai')
						}
					})
				}
			},
			//新增合同
			addContract(id) {
				uni.navigateTo({
					url: '/pagesA/crm/contract/contract?id=' + id
				})
			},
			//团队
			toTeam() {
				uni.navigateTo({
					url:'/pagesA/circulate/index?id='+this.info.id
				})
			},
			//联系人
			contact(id) {
				uni.navigateTo({
					url: '/pagesA/crm/linkman/linkman?id=' + this.id + '&type=' + this.type
				})
			},
			//子公司
			subord(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/subsidiary/subsidiary?id=' + id + '&type=' + this.type
				})
			},
			//签到记录
			signList(id) {
				uni.navigateTo({
					url: '/pagesA/signin/record/record?id=' + id + '&type=' + this.type
				})
			},
			//合同
			Contract(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/pact/pact?id=' + id + '&type=' + this.type
				})
			},
			//费用
			cost(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/chargelist/chargelist?id=' + id + '&type=' + this.type
				})
			},
			//回款记录
			payment(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/payment/payment?id=' + id + '&type=' + this.type
				})
			},
			//操作记录
			operation(id) {
				uni.navigateTo({
					url: '/pagesB/contract/operation?id=' + id + '&relation_type=1'
				})
			},
			//获取客户信息
			getInfo() {
				this.info = {}
				netKehuDetail({
					id: this.id
				}).then(res => {
					this.info = res.data
					uni.setNavigationBarTitle({
						title: res.data.name
					})
					if (res.data.contacts) {
						this.telname = res.data.contacts.name
						this.telActions = [
							{
								text:res.data.contacts.name+res.data.contacts.mobile,
								color:'#008EFF',
								mobile:res.data.contacts.mobile
							}
						]
					}
				})
			},
			moreClick() {
				this.show = true
			},
			//移入公海
			removeSeas() {
				this.show = false
				uni.showModal({
					title: '提示',
					content: '确认要将当前客户移到公海吗?',
					success: (res) => {
						if (res.confirm) {
							let params = {
								id: this.info.id
							}
							netRemoveSeas(params).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(() => {
									uni.setStorageSync('isJamp',true)
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							})
						}
					}
				})
			},
			//重点关注
			Tofocus() {
				let params = {
					customer_id: this.info.id
				}
				netKeyCollect(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.show = false
					setTimeout(() => {
						this.getInfo()
					}, 1000)
				})
			},
			//取消重点关注
			ToRemovefocus() {
				let params = {
					customer_id: this.info.id
				}
				netRemoveColect(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.show = false
					setTimeout(() => {
						this.getInfo()
					}, 1000)
				})
			},
			//拨打电话
			selectPhone(e) {
				// #ifdef MP-ALIPAY
				dd.showCallMenu({
				    phoneNumber: this.telActions[e].mobile, 
				    code: '+86'
				})
				// #endif
				// #ifndef APP-PLUS || MP-ALIPAY
				uni.makePhoneCall({
					phoneNumber: this.telActions[e].mobile
				})
				// #endif
				// #ifdef APP-PLUS
				plus.device.dial(this.telActions[e].mobile, true);
				// #endif
			},
			//地图定位
			mapLocation() {
				uni.openLocation({
					latitude: Number(this.info.lat),
					longitude: Number(this.info.lng),
					name: this.info.address,
					address: this.info.address_detail,
					success: (res) => {
						console.log(res, this.info.lat, this.info.lng)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			// 任务
			taskClick() {
				this.taskShow = true;
				this.show = false;
			},
			// 取消底部弹出框
			onCancel() {
				this.taskShow = false;
				this.statusShow = false;
				this.telShow = false;
				this.show = false;
			},
			// 变更状态
			statusClick() {
				this.statusShow = true;
				this.show = false;
			},
			// 电话
			telClick() {
				this.telShow = true;
				this.show = false;
			},
			// 领取线索
			getCluesClick(id) {
				this.show = false;
				uni.showModal({
					title: '是否确定领取客户',
					content: '领取后长时间未跟进，客户将自动转为公共客户',
					cancelColor: "#9abcfb",
					confirmColor: "#9abcfb",
					success: function(ress) {
						if (ress.confirm) {
							netReceiveKehu({
								customer_id: id
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/index/groupCompany/groupCompany?id=' +
											res.data.id
									})
								}, 1000)
							})
						} else if (ress.cancel) {
							console.log('用户点击取消');

						}
					}
				})
			},
			// 删除线索
			deleteClueClick() {
				uni.showModal({
					title: '删除线索',
					content: '确定删除该条记录吗？',
					cancelColor: "#9abcfb",
					confirmColor: "#9abcfb",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 隐藏遮罩层
			onClickHide() {
				this.overShow = false;
			},
			
			//添加 出差  签到
			toSigntrip(id) {
				uni.navigateTo({
					url: '/pagesA/signin/busSign?customerid=' + id
				})
			},
			//商机
			toBusiness() {
				uni.navigateTo({
					url:'/pagesA/business/customer_business?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.pull_head {
		font-size: 34rpx;
		color: #999;
		padding: 30rpx 0;
		text-align: center;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.group_head {
		padding: 20rpx 42rpx;
		background-color: $uni-text-color;
		text-align: left;
		color: #fff;
		font-size: 30rpx;

		.client {
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}

		.nickname {
			margin-bottom: 20rpx;
			text {
				padding: 0 30rpx;
			}
		}

		.state {
			margin-bottom: 20rpx;

			text {
				
			}
		}
		.time {
			margin-bottom: 20rpx;
			text {
				padding: 0 30rpx;
			}
		}
		.site {
			margin-bottom: 20rpx;
		}
		.principal {
			margin-bottom: 20rpx;
		}
	}

	.group_tab {
		margin: 20rpx 0;
	}

	.bottom_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		text-align: center;
		color: #999;
		z-index: 2;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top:1rpx solid #f5f5f5;
		.bottom_item{
			font-size:24rpx;
			.botimg{
				width:40rpx;
				height:40rpx;
			}
		}
	}

	.pull_con {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: center;
		color: #999;
		box-sizing: border-box;
		margin-bottom:calc(env(safe-area-inset-bottom) / 2);
		.pull_item {
			width: 22%;
			margin-bottom: 90rpx;
			margin-right: 20rpx;
			:first-child {
				padding-bottom: 10rpx;
			}
			:last-child {
				padding-bottom: 50rpx;
			}
		}
	}

	.scrollView {
		margin:25rpx 0;
		.scrolllist{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.scrollView_item {
				flex-shrink: 0;
				width:145rpx;
				padding:15rpx 0;
				background: #fff;
				border-radius: 20rpx;
				text-align: center;
				margin-right: 15rpx;
				.scroll_top{
					color: $uni-text-color;
					font-size: 32rpx;
					font-weight: bold;
				}
				.scroll_foot{
					font-size: 26rpx;
					color: #333;
				}
			}
		}
	}
</style>
