<template>
	<view class="new_linkman">
		<view class="top_required">
			只展示<span style="color:#f00">必填</span>字段<switch :checked="isRequired" color="#008EFF" @change="changeRequired" />
		</view>
		<view class="linktab">
			<view class="info_head">基础信息</view>
			<view class="link_right">
				<view class="linkbtn" :class="countryType == 1 ? 'linkbtnactive' : '' " @click="changeCountry(1)">国内
				</view>
				<view class="linkbtn" :class="countryType == 2 ? 'linkbtnactive' : ''" @click="changeCountry(2)">国外
				</view>
			</view>
		</view>
		<form-item v-for="(item,index) in listForm" :key="index" :isNotRequired="isRequired" :objInfo="item" @changeData="changeBaseData">
		</form-item>
		<view class="fllow_form">
			<view><text>*</text>关联门店 </view>
			<view class="form_right" @click="changeKehu">
				<view :class="relationName ? 'valueActive' : '' ">{{relationName ? relationName : '点击选择'}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<view id="btn" class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(toSave)">
			保存
		</view>
		<view class="botsec"></view>
		<!-- 选择客户 -->
		<select-customer ref="customerChild" @getCustomerinfo="sureSelect"></select-customer>
	</view>
</template>

<script>
	import formItem from '@/components/form/formitem.vue'
	import {
		netSetForm
	} from '@/api/index.js'
	import {
		checkPhone
	} from '@/util/util.js'
	import {
		netPrevCustomer,
		netSelect,
		netAddLianxiren
	} from '@/api/kehu.js'
	import selectCustomer from '@/components/selectCustomer.vue'
	export default {
		data() {
			return {
				noClick: true, //防止  重复点击
				name: '', //联系人姓名
				relation_id: '', //客户名称
				relationName: '',
				kehuIndex: '',
				kehuList: [],
				kehu: [],
				subname: '', //简称或尊称
				role: '', //角色
				roleList: [],
				roleIndex: '',
				post: '', //职务
				birthday: '', //生日
				mobile: '', //手机号
				telephone: '', //电话座机
				wechat: '', //微信号
				email: '', //电子邮箱
				qq: '', //qq
				address: '', //省市区
				address_detail: '', //详细地址
				remarks: '', //备注信息

				create_staff_id: '', //创建人id
				owner_staff_id: '', //负责人id
				next_time: '', //下次联系时间

				baseForm: [],
				listForm: [],
				countryType: 1, //1国内   2国外
				checked: false,
				isRequired:false,  //是否只展示必填字段
			}
		},
		components: {
			formItem,
			selectCustomer
		},
		onLoad(options) {
			if (options.id) {
				this.relation_id = options.id
			}
			//客户名称
			this.getKehulist()
			//获取 选择数据
			this.getSelect()

			this.listForm = []
			this.getForm()
		},
		onShow() {

		},
		methods: {
			//切换是否只展示必填字段
			changeRequired(e) {
				this.isRequired = e.detail.value
			},
			getForm() {
				netSetForm({
					type: 'contacts'
				}).then(res => {
					res = res.data.data
					res.forEach(ele=>{
						ele.value = ele.value?ele.value:''
					})
					this.listForm = res
					this.changeCountry(this.countryType)
				})
			},
			changeCountry(type) {
				this.countryType = type
				let arr = this.listForm
				if (type == 1) {
					//国内
					arr.forEach((ele, index) => {
						if (ele.id == 'mobile') {
							ele.config.required = true
						}
						if (ele.id == 'email') {
							ele.config.required = false
						}
					})
				} else {
					//国外
					arr.forEach((ele, index) => {
						if (ele.id == 'mobile') {
							ele.config.required = true
						}
						if (ele.id == 'email') {
							ele.config.required = true
						}
					})
				}
				this.listForm = arr
			},
			changeBaseData(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)
					}
				})
			},
			getSelect() {
				netSelect().then(res => {
					this.roleList = res.data['联系人角色']
				})
			},
			getKehulist() {
				netPrevCustomer().then(res => {
					this.kehu = res.data
					this.handleKehu(res.data)
				})
			},
			handleKehu(data) {
				let arr = []
				data.forEach(ele => {
					arr.push(ele.name)
				})
				this.kehuList = arr
				if (this.relation_id) {
					this.setDefaultKehu()
				}
			},
			setDefaultKehu() {
				let id = this.relation_id
				this.kehu.forEach((ele, index) => {
					if (ele.id == id) {
						this.relationName = ele.name
						this.kehuIndex = index
					}
				})
			},
			//修改客户
			changeKehu(e) {
				this.$refs.customerChild.init()
			},
			//选中客户
			sureSelect(obj) {
				this.relation_id = obj.id
				this.relationName = obj.name
			},
			//保存
			toSave() {
				//基本信息
				let arr = []
				let contacts = this.checkCommonForm(this.listForm)
				if(!contacts){
					return
				}
				//跟进 任务
				let {
					relation_id, //客户名称
				} = this
				if (!relation_id) {
					uni.showToast({
						title: '请选择关联客户',
						icon: 'none',
						duration: 2000
					})
					return
				}
				contacts = Object.assign({}, contacts, {
					customer_id: relation_id
				})
				let params = {}
				params.contacts = contacts
				netAddLianxiren(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.valueActive {
		color: #333;
	}

	.new_linkman {
		font-size: 28rpx;

		.linktab {
			padding: 20rpx 24rpx 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background:#fff;
			border-bottom:1rpx solid #EAEAEA;
			.link_right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				background:#fff;
				.linkbtn {
					margin-right: 15rpx;
					width: 93rpx;
					height: 44rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #666;
					text-align: center;
					line-height: 42rpx;
					border: 1rpx solid #DDDDDD;
					background: #fff;
				}

				.linkbtnactive {
					background: $uni-text-color;
					border: 1rpx solid $uni-text-color;
					color: #fff;
				}
			}
		}

		.mar_top {
			margin-top: 30rpx;
		}

		.info_head {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #999;
			padding-left: 64rpx;
		}

		.fllow_form {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 30rpx 20rpx;
			color: #999;
			font-size: 32rpx;

			.form_right {
				display: flex;
				align-items: center;
				color: #999;

				:first-child {
					width: 450rpx;
					text-align: right;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
			}

			.theme {
				color: #5ca9fe;
			}

			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input {
					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;
		}
	}
</style>
