<template>
	<view class="create_customer">

		<view class="fllow_form" style="margin: 30rpx 0;">
			<input type="text" v-model="name"  placeholder-style="font-size:30rpx;color: #999;" placeholder="输入客户名称"/>
			<view class="form_right theme">
				<image style="width: 40rpx;height: 40rpx;
				margin: 0 20rpx 0 30rpx;" :src="BASE_IMG_URL+'chachong.png'" mode="scaleToFill"></image>
				<view @click="checkName" style="color:#008EFF;">查重</view>
			</view>
		</view>
		<!-- 基础信息 -->
		<view class="info_head">基础信息</view>
		<view class="fllow_form">
			<view>上级公司</view>
			<view class="form_right" @click="changeParent">
				<view>{{parentName ? parentName : '点击选择'}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="fllow_form">
			<view>地理位置</view>
			<view class="form_right" @click="detailAddClick">
				<view class="dizhidingwei" style="display: -webkit-box;
					width: 450rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;">{{address_dingwei ? address_dingwei : '点击选择'}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="fllow_form">
			<view>地理位置</view>
			<view class="form_right" @click="show = true">
				<view :class="address_dingwei ? 'valueActive' : '' ">{{address_dingwei ? address_dingwei : '点击选择'}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="fllow_form_text">
			<view style="flex-shrink: 0;"><text>*</text>详细地址</view>
			<view class="form_right">
				<textarea 
					class="detailText"
					:class="address_detail ? 'valueActive' : '' " 
					v-model="address_detail" 
					placeholder="填写详细地址" 
					placeholder-style="font-size:30rpx;color: #999;" 
				/>
			</view>
		</view>
		<form-item v-for="(item,index) in listForm" :key="index" :objInfo="item" @changeData="changeData"></form-item>
		
		<view id="btn" class="btn_g bg-blue button-hover round" @click="subSave">
			保存
		</view>
		
		<!-- 位置选择 -->
		<u-select 
			v-model="show" 
			mode="mutil-column-auto" 
			value-name="code" 
			label-name="name" 
			child-name="children" 
			:list="addressList"
			 @confirm="confirm"
		></u-select>
		
		<!-- 选择客户 -->
		<select-customer ref="customerChild" @getCustomerinfo="sureSelect"></select-customer>
	</view>
</template>

<script>
	import formItem from '@/components/form/formitem.vue'
	import {pageJumps} from "./createCust_page_jumps.js";
	import { netSelect, netPrevCustomer, netCheckName, netKehuDetail, netEditKehu } from '@/api/kehu.js' 
	import { netSetForm } from '@/api/index.js'
	import { checkPhone } from '@/util/util.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	const citysJSON = require('@/util/address.js');
	import selectCustomer from '@/components/selectCustomer.vue'
	export default {
		mixins:[pageJumps],
		components:{
			formItem,
			selectCustomer
		},
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				id:'',
				checked: true,
				linkManChecked: true,
				name:'',   //客户名称
				subname:'',  //助理名称
				industry:'',   //客户行业
				level:'',   //客户星级
				source:'',  //客户来源
				follow:'',    //跟进状态
				address_dingwei:'',   //地址定位
				address_detail:'',   //详细地址
				lng:'',  //经度
				lat:'',  //纬度
				parent_id:'',  //上级公司
				parentList:[],
				plist:[],
				parentName:'',
				
				industryList:[],  //所属行业
				industryindex:null,
				followList:[],   //客户状态 列表
				followIndex:null,
				sourceList:[],   //客户来源
				sourceIndex:null,
				scaleList:[],  //企业规模
				scaleIndex:null,
				
				info:{},
				listForm:[],  //客户信息
				//地址
				addressList:[],
				show:false
			}
		},
		onLoad(options) {
			this.addressList = citysJSON.citys
			this.id = options.id
			//获取  客户 信息
			this.getKehuInfo()
			this.getSelectlist()
		},
		onShow() {
			
		},
		onHide() {
			
		},
		methods: {
			confirm(e) {
				this.address_dingwei = e[0].label+e[1].label+e[2].label
			},
			//获取 客户 信息
			getKehuInfo() {
				netKehuDetail({id:this.id}).then(res=>{
					res = res.data
					this.info = res
					this.name = res.name
					this.location = res.location
					this.address_detail = res.address_detail
					this.address_dingwei = res.address
					this.lng = res.lng
					this.lat = res.lat
					this.parent_id = res.parent_id
					//上级
					this.getPrevCoustomer()
					//获取附加信息 form
					this.getForm()
				})
			},
			getPrevCoustomer() {
				netPrevCustomer().then(res=>{
					this.parentList = res.data
					this.handleData(res.data)
					this.handleParent()
				})
			},
			getForm() {
				netSetForm({type:'customer'}).then(res=>{
					res = res.data.data
					let arr = []
					res.forEach((ele,index)=>{
						ele.value = this.info[ele.id]
						if(ele.id != 'name'){
							arr.push(ele)
						}
					})
					this.listForm = arr
				})
			},
			handleData(data) {
				let arr = []
				data.forEach(ele=>{
					arr.push(ele.name)
				})
				this.plist = arr
			},
			handleParent() {
				let id = this.parent_id
				this.parentList.forEach((ele,index)=>{
					if(ele.id == id){
						this.parentName = ele.name
					}
				})
			},
			changeData(name,value,obj) {
				let arr = this.listForm
				arr.forEach((ele,index)=>{
					if(ele.id == obj.id){
						ele.value = value
						this.$set(this.listForm,index,ele)
					}
				})
			},
			//获取  select
			getSelectlist() {
				netSelect().then(res=>{
					this.industryList = res.data['行业']
					this.followList = res.data['客户状态']
					this.sourceList = res.data['客户来源']
					this.scaleList = res.data['企业规模']
					this.roleList = res.data['联系人角色']
					this.tyieldList = res.data['天地盖产量']
					this.pyieldList = res.data['皮壳产量']
					this.numberList = res.data['员工人数']
				})
			},
			//姓名查重
			checkName() {
				let name = this.name
				console.log(name)
				if(!name){
					uni.showToast({
					    title: '请填写客户姓名',
						icon:'none',
					    duration: 2000
					})
					return
				}
				netCheckName({name}).then(res=>{
					uni.showToast({
					    title: res.msg,
						icon:'none',
					    duration: 2000
					})
					
				})
			},
			
			//位置
			changeLocation(e) {
				this.location = e.detail.value[0]+'/'+e.detail.value[1]+'/'+e.detail.value[2]
			},
			//改变上级
			changeParent() {
				this.$refs.customerChild.init()
			},
			sureSelect(obj) {
				this.parentName = obj.name
				this.parent_id = obj.id
			},
			//是否创建  跟进任务
			change() {
				this.is_event = !this.is_event
			},
			//跟进时间
			changeFollowTime(e) {
				this.event_start_time = e.detail.value
			},
			//任务提醒
			changeRemind(e) {
				this.remindIndex = e.detail.value
				this.remindtype = this.remindList[e.detail.value]
			},
			// 详细地址
			detailAddClick() {
				uni.chooseLocation({
					success: res => {
						 this.lat = res.latitude
						 this.lng = res.longitude
						 this.address_detail = res.name
						 this.address_dingwei = res.address
					},
					fail: err => {
					    console.log(err);
						if(err.errMsg == 'chooseLocation:fail auth deny'){
							uni.showToast({
								title:'请允许使用位置信息',
								icon:'none'
							})
						}
					}
				})
			},
			//完成
			subSave() {
				let {
					name,   //客户名称
					
					location,   //所在地区
					address_dingwei,
					address_detail,   //详细地址
					lng,  //经度
					lat,  //纬度
					parent_id,  //上级公司
				} = this
				if(!name){
					uni.showToast({
					    title: '请填写客户名称',
						icon:'none',
					    duration: 2000
					})
					return
				}
				let params = this.checkCommonForm(this.listForm)
				if(!params){
					return
				}
				params = Object.assign({},params,{id:this.id,name,location,address_detail,lng,lat,parent_id,address:address_dingwei})
				console.log(params)
				netEditKehu(params).then(res=>{
					uni.showToast({
					    title: res.msg,
						icon:'none',
					    duration: 2000
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fllow_form_text{
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding: 30rpx 40rpx;
		color: #999;
		font-size: 32rpx;
		.theme {
			color: #5ca9fe;
		}
		text {
			color: #f00;
			margin-left: 10rpx;
		}
		.detailText{
			width:85%;
			background:#f8f8f8;
			border-radius: 10rpx;
			height:120rpx;
			padding:10rpx;
			margin:20rpx auto 0;
		}
	}
.create_customer {
	font-size: 28rpx;
	.info_head {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #999;
		padding-left: 24rpx;
	}
	.mar_top {
		margin-top: 30rpx;
	}
	.fllow_form {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 40rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding: 20rpx 30rpx;
		color:#999;
		font-size:32rpx;
		.form_right {
			display: flex;
			color: #999;
			text-align: right;
			align-items: center;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 28rpx 5rpx 0 0;
			}
		}
		.theme {
			color: #5ca9fe;
		}
		text {
			color: #f00;
			margin-left: 10rpx;
		}
		.form_input {
			input {
				line-height: 40rpx;
				text-align: right;
				margin-right: 10rpx;
			}
		}
	}
	.fllow_area {
		background-color: #fff;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			line-height: 100rpx;
			text {
				color: #f00;
			}
		}
		textarea {
			width: 100%;
			height: 300rpx;
		}
	}
}
#btn {
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		width: 500rpx;
		height: 88rpx;
		background: $uni-text-color;
		border-radius: 29rpx;
		margin: 30rpx auto;
	}
</style>
