<template>
	<view class="upper">
		<view class="specific-date df aic jcsb">
			<!-- <div class="df aic specific-time"><span>2023.09.12-2023.10.12</span> -->
			<!-- <u-icon name="arrow-down"></u-icon> -->
			<!-- </div>
			 -->
			 <div></div>
			<div class="df aic New-visit" @click="xinzbf">
				<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
				<span>新增拜访</span>
			</div>
		</view>
		<view class="">
			
			<view class="Weighing" v-if="listobj.length==0">
				<image
					:src="$util.img('upload/weapp/pageSalesman/customer/kongshuju.png')"
				></image>
				还没有拜访记录
				
			</view>
			<view class="" v-for="(item,index) in listobj" :key="index">
				<view class="formwork">
					<div class="formwork-name">创建时间:{{item.create_time | time}}</div>
					<div class="formwork-information df aic">
						<div class="formwork-contacts">
							店铺：{{item.store_name}}
						</div>
					</div>
					<div class="formwork-information df aic">
						<div class="formwork-contacts">
							联系人：{{item.name}}
						</div>
						<!-- <div class="contact-information">联系方式：{{item.mobile}}</div> -->
					</div>
					
					<div class="formwork-information df aic">
						<div class="formwork-contacts">联系方式：{{item.tel}}</div>
					</div>
					<div class="xuixan"></div>
					<div class="next-time">{{item.content}}</div>
					<div class="img df">
						<div class="df secoku" v-for="(a,b) in settwo(item.images)" :key="b">
							<div><image :src="$util.img(a)" mode=""></image></div>
							<!-- <div v-if="imgtwo"><image class="imgs" :src="$util.img(imgtwo)" mode=""></image></div> -->
						</div>
					</div>
				</view>
			</view>
		</view>
		
	
	
		
		
		<u-overlay :show="show">
			<view class="afterbody">
				<div class="New-visit df aic jcsb">
					<div></div>
					<div>新增拜访</div>
					<image @click="show=false" :src="$util.img(`/upload/weapp/pageSalesman/cancel.png`)" mode=""></image>
				</div>
				<div class="df aic connection-name">
					<div>客户名称：</div>
					<input disabled v-model="value2" type="text" placeholder-class="placeholder" placeholder="请输入">
				</div>
				<div class="df aic connection-name">
					<div>店铺名称：</div>
					<input  v-model="store_name" type="text" placeholder-class="placeholder" placeholder="请输入">
				</div>
				<div class="df aic connection-name">
					<div>联&#8194;系&#8194;人：</div>
					<input  v-model="name" type="text" placeholder-class="placeholder" placeholder="请输入">
				</div>
				<div class="df aic connection-name">
					<div>联系方式：</div>
					<input  v-model="tel" type="text" placeholder-class="placeholder" placeholder="请输入">
				</div>
				<div class="Visit-record df">
					<span>拜访记录：</span>
					<textarea v-model="daily" name="" id="" cols="30" rows="10" placeholder="请输入拜访总结"></textarea>
					<div class="it-img" v-if="img">
						<image :src="$util.img(img)" mode=""></image>
					</div>
					<div class="it-imgtwo" v-if="imgtwoa">
						<image :src="$util.img(imgtwoa)" mode=""></image>
					</div>
					<div class="Visit-img df aic jcsa" v-if="list.length<2" :style="img?'left: 295rpx;':''">
						<div @click="upload()"><image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/plussign.png`)" mode=""></image></div>
					</div>
				</div>
				<div class="df btn">
					<div class="btn1 df aic jcsa"  @click="show = false">保存草稿</div>
					<div class="btn2 df aic jcsa" @click="accomplish">完成记录</div>
				</div>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	const timesfm = require('@/common/js/map/message.js')
	export default {
		data(){
			return {
				value2:"",
				show: false,
				value1: '',
				msg:this.msgabcadc,//状态
				img:'',
				imgtwo:'',
				list:[],//图片数组
				daily:'',
				listobj:[],
				imgone:'',
				imgtwoa:'',
				nickname:'',
				store_name:'',
				name:'',
				tel:''
			}
		},
		props:{
			msgabcadc:Array,
		},
		created(){
			let _this=this
			this.$api.sendRequest({
				url: '/api/salasman/visitLogList',
				data:{
					member_id:this.msg.msg
				},
				success: res => {
					console.log(res.data.list,'客户拜访list');
					// console.log(res.data.list[0].images.split(","),'list0');
					_this.listobj=res.data.list
					
				},
			});
			// setTimeout(() => {
			// 	if(_this.listobj.length>0){
			// 		console.log(_this.listobj[0].images.split(","),'666');
			// 		_this.imgone=_this.listobj[0].images.split(",")[0]
			// 		_this.imgtwo=_this.listobj[0].images.split(",")[1]
			// 	}
				
			// }, 200);
			this.$api.sendRequest({
				url:'/api/salasman/getMemberInfo',
				data:{
					member_id:this.msg.msg
				},
				success:res=>{
					// console.log(res.data,'客户详情');
					// this.nickname=res.data.nickname
					this.value2=res.data.nickname
				}
			})
		},
		methods:{
				upload(type,size=1){
					this.$util.upload(size,{
						 path:'otherImage'
					},res=>{
						this.list.push(res)
						console.log(res);
						if(this.list[0]){
							this.img=this.list[0][0]
						}
						if(this.list[1]){
							this.imgtwoa=this.list[1][0]
						}
						
					})
				},
				accomplish(){
					// if(this.list[0]){
					// 	console.log(this.list[]);
					// }
					// console.log(this.list.flat());
					if(this.store_name.length==0){
						this.$util.showToast({
							title: '请填写店铺名称'
						});
						return
					}
					if(this.name.length==0){
						this.$util.showToast({
							title: '请填写联系人'
						});
						return
					}
					if(this.tel.length==0){
						this.$util.showToast({
							title: '请填写联系方式'
						});
						return
					}
					if(this.daily.length==0){
						this.$util.showToast({
							title: '请输入拜访记录'
						});
						return
					}
					if(this.list.length==0){
						this.$util.showToast({
							title: '请上传图片'
						});
						return
					}
					let _this=this
					this.$api.sendRequest({
						url: '/api/salasman/visitLogAdd',
						data:{
							member_id:this.msg.msg,
							member_name:this.value2,
							content:this.daily,
							images:this.list.flat(),
							store_name:this.store_name,
							name:this.name,
							tel:this.tel
						},
						success: res => {
							this.$util.showToast({
								title: '提交成功'
							});
							this.show=false
							this.img=''
							this.imgtwoa=''
							this.list=[]
							this.$api.sendRequest({
								url: '/api/salasman/visitLogList',
								data:{
									member_id:this.msg.msg
								},
								success: res => {
									console.log(res.data.list,'客户拜访list');
									// console.log(res.data.list[0].images.split(","),'list0');
									_this.listobj=res.data.list
									
								},
							});
						},
						
					});
				},
				xinzbf(){
					this.show=true
				},
				settwo(num){
					// console.log(num,'num');
					let a=[]
					if(num.length!=0){
						 a=num.split(",")
					}
					return a
					// _this.imgone=_this.listobj[0].images.split(",")[0]
					// _this.imgtwo=_this.listobj[0].images.split(",")[1]
				}
		},
		filters:{
			time(num){
				return timesfm(num*1000)
			},
			
		}
		
	}
</script>

<style lang="scss">
	::v-deep{
		.u-textarea__field{
			width: 534rpx !important;
			height: 244rpx !important;
			background: #F6F6F6 !important;
			border-radius: 8rpx !important;
		}
		.u-textarea{
			// box-sizing: border-box;
			padding: 0rpx;
			flex: 0;
		}
	}
	
		.secoku:nth-child(2){
				margin-left: 24rpx !important;
		}
	
		 
	
	.Weighing{
	
		color: #ccc;
		font-size: 40rpx;
		position: fixed;
		top: 300rpx;
		left: 50%;
		top: 30%;
		transform: translate(-50%);
		text-align: center;
		image{
			width: 400rpx;
			height: 400rpx;
		}
	}
	.upper{
		padding: 32rpx 24rpx;
		.specific-date{
			.specific-time{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 34rpx;
				span{
					margin-right: 12rpx;
				}
			}
			.New-visit{
				width: 176rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				border: 2rpx solid #E6E6E6;
				image{
					width: 20rpx;
					height: 20rpx;
					margin: 0 10rpx 0 26rpx;
				}
				span{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 34rpx;
				}
			}
		}
		.formwork{
			width: 702rpx;
			// height: 500rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			.formwork-name{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
			}
			.formwork-information{
				margin-top: 24rpx;
				.formwork-contacts{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 40rpx;
				}
				.contact-information{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 40rpx;
					margin-left: 50rpx;
				}
			}
		}
		.Detailed-address{
			margin-top: 24rpx;
			.address{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}
			.Detailed{
				width: 486rpx;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}
		}
		.xuixan{
			width: 638rpx;
			height: 2rpx;
			background: #F2F2F2;
			border-radius: 16rpx;
			margin: 28rpx 0;
		}
		.next-time{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}
		.img{
			margin-top: 24rpx;
			image{
				width: 108rpx;
				height: 110rpx;
				
			}
			.imgs{
				margin-left: 24rpx;
			}
		}
		.afterbody{
			width: 750rpx;
			// height: 668rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			padding: 32rpx;
			box-sizing: border-box;
			.New-visit{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.connection-name{
				margin-top: 56rpx;
				div{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #585858;
					line-height: 40rpx;
					margin-right: 12rpx;
				}
				input{
					width: 534rpx;
					height: 70rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					padding: 0 22rpx;
					box-sizing: border-box;
				}
				.placeholder{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}
			.Visit-record{
				margin-top: 32rpx;
				position: relative;
				textarea{
					width: 534rpx;
					height: 244rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
				}
				.Visit-img{
					position: absolute;
					top: 144rpx;
					left: 174rpx;
					width: 80rpx;
					height: 80rpx;
					background: #EFEFEF;
					border-radius: 16rpx;
					image{
						width: 24rpx;
						height: 24rpx;
					}
				}
				.it-img{
					position: absolute;
					top: 144rpx;
					left: 174rpx;
					width: 80rpx;
					height: 80rpx;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
				.it-imgtwo{
					position: absolute;
					top: 144rpx;
					left: 295rpx;
					width: 80rpx;
					height: 80rpx;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
				span{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #585858;
					line-height: 40rpx;
					margin-right: 12rpx;
				}
				
			}
			.btn{
				margin-top: 58rpx;
				.btn1{
					width: 206rpx;
					height: 72rpx;
					border-radius: 40rpx;
					border: 2rpx solid #E8E8E8;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 154rpx;
					margin-right: 32rpx;
				}
				.btn2{
					width: 206rpx;
					height: 72rpx;
					background: #21BBF3;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}
	}
</style>