<template>
	<view class="linkman">
		<u-collapse :item-style="itemStyle" :head-style='headstyle'>
			<u-collapse-item :title="item.head" v-for="(item, index) in list" :key="index" accordion >
				<template slot="title" class="title" >
						<view style="width:680rpx;display: flex;justify-content: space-between;box-sizing: border-box;padding-left:30rpx">
							<span>{{item.name ? item.name : '--'}}</span>
							<view style="display: flex;justify-content: flex-end;align-items: center;" @tap.stop="ToCall(item)">
								<image style="width: 41rpx;height: 41rpx;margin-right:15rpx"
									:src="BASE_IMG_URL+'call.png'"  mode="scaleToFill"></image>
								<span>{{item.mobile ? item.mobile : '--'}}</span>
							</view>
						</view>
				</template>
				<view class="info_main" @tap.stop="contactDetail(item.id)">
					<view class="i_top">
						<view>角色：{{item.role ? item.role : '--'}}</view>
						<view>部门职务：{{item.post ? item.post : '--'}}</view>
					</view>
					<view class="i_center" @tap.stop.prevent>
						<view>尊称：{{item.subname ? item.subname : '--' }}</view>
						<image @tap.stop="toEditInfo(item)" v-if="type == 1" style="width: 36rpx;height: 36rpx;"
							:src="BASE_IMG_URL+'edit.png'"  mode="scaleToFill"></image>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		<view style="height: 200rpx;"></view>
		<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		<!-- 创建用户图标 -->
		<view class="icon_creat" v-if="type == 1" @click="createLinkmamClick">
			<image :src="BASE_IMG_URL+'1.png'"  mode="scaleToFill"></image>
		</view>

	</view>
	</view>
</template>

<script>
	import {
		netContactList
	} from '@/api/kehu.js'
	import {
		dateTimePicker
	} from '@/util/dateTimePicker.js'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	export default {
		data() {
			return {
				page: 1,
				totalPage: 1,
				limit: 10,
				name: '',
				list: [],
				kehuid: '',
				index: -1,
				BASE_IMG_URL: BASE_IMG_URL,
				type: 1, //1普通客户  2公海客户
				headstyle:{
					display: 'flex',
					justifyContent: 'space-between',
					background: '#fff'
				},
				itemStyle:{
					background: '#fff'
				},
			}
		},
		onLoad(options) {
			this.kehuid = options.id,
			this.type = options.type
		},
		onShow() {
			//获取 联系人 列表
			this.page = 1
			this.list = []
			this.getContactList()
		},
		methods: {
			//详情
			contactDetail(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/contact/contactDetail?id=' + id+'&type='+this.type
				})
			},
			getContactList() {
				let params = {
					page: this.page,
					limit: this.limit,
					name: this.name,
					customer_id: this.kehuid
				}
				netContactList(params).then(res => {
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			searchName(e) {
				this.name = e.detail
				this.list = []
				this.page = 1
				this.getContactList()
			},
			//拨打电话
			ToCall(item) {
				// #ifdef MP-ALIPAY
				dd.showCallMenu({
				    phoneNumber: item.mobile, 
				    code: '+86'
				})
				// #endif
				// #ifndef MP-ALIPAY || APP-PLUS
				uni.makePhoneCall({
					phoneNumber: item.mobile
				})
				// #endif
				// #ifdef APP-PLUS
				plus.device.dial(item.mobile, true);
				// #endif
			},
			// 新建联系人
			createLinkmamClick() {
				uni.navigateTo({
					url: '/pagesA/crm/linkman/newLinkman/newLinkman?id='+this.kehuid
				})
			},
			//编辑信息
			toEditInfo(item) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/contact/editInfo?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.icon_creat {
		position: fixed;
		bottom: 180rpx;
		right: 80rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}

	.title {
		font-size: 32rpx;
		color: #333;
	}

	.i_top {
		padding: 0 80rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.i_center {
		display: flex;
		justify-content: space-between;
		padding-left: 80rpx;
		margin-bottom: 20rpx;

		image {
			margin-right: 40rpx;
		}
	}

	.i_bottom {
		padding-left: 80rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}
	#btn {
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		width: 500rpx;
		height: 88rpx;
		background: $uni-text-color;
		border-radius: 29rpx;
	}
</style>
