<template>
	<view class="container">
		<Navbar title="完善客户信息" canBack></Navbar>
		<view class="usuallyCard margin-sm padding flex flex-direction">
			<view class="flex justify-between w100">
				<view class="flex align-center">
					<u-image src="/static/images/home/AI.png" mode="heightFix" width="20px" height="20px"></u-image>
					<view class="margin-left-xs">
						智能识别
					</view>
				</view>
				<view class="">
					<!-- <u-icon name="scan" size="25"></u-icon> -->
				</view>
			</view>
			<view class="">
				<!-- <u-input placeholder="请输入客户基本信息进行智能识别客户信息" border="none" ></u-input> -->
				<u--textarea v-model="aiText" placeholder="请输入客户基本信息进行智能识别客户信息" border="none"></u--textarea>
			</view>
			<view class="flex justify-end w100">
				<view class="w30" @click="handleAi">
					<u-button shape="circle" :color="aiText.length?'#EA5504':'#AAAAAA'">智能识别</u-button>
				</view>
			</view>
		</view>
		<u--form ref="uForm" labelPosition="top" :model="khxx" :rules="rules" errorType="toast">
			<view class="usuallyCard margin-sm padding">
				<view class="text-lg">
					客户信息
				</view>
				<u-form-item>
					<view class="flex align-center margin-top margin-bottom-xs">
						<view class="w50" style="font-size: 15px;">
							客户类型
						</view>
						<view class="">
							<u-radio-group v-model="khxx.khlx" activeColor="#EE2F24">
								<u-radio :customStyle="{marginRight: '20px'}" label="居民" name="居民"> </u-radio>
								<u-radio label="非居民" name="非居民"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="客户名称" required prop="khmc" labelWidth="180">
					<u-input v-model="khxx.khmc" maxlength="8" placeholder="请输入客户名称" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="客户联系电话" required prop="khlxdh" labelWidth="180">
					<u-input v-model="khxx.khlxdh" maxlength="11" placeholder="请输入客户联系电话" border="bottom"></u-input>
				</u-form-item>
<!--				<u-form-item label="客户联系姓名" required prop="khlxxm" labelWidth="180" v-if="khxx.khlx === '非居民'">-->
<!--					<u-input v-model="khxx.khlxxm" maxlength="8" placeholder="请输入客户联系姓名" border="bottom"></u-input>-->
<!--				</u-form-item>-->
				<u-form-item label="客户联系地址(省市区)" required labelWidth="180">
					<u-input v-model="khxx.khlxdzsf" disabled disabled-color="#fff" placeholder="省"
						border="bottom"></u-input>
					<u-input v-model="khxx.khlxdzs" disabled disabled-color="#fff" placeholder="市"
						border="bottom"></u-input>
					<u-input v-model="khxx.khlxdzq" disabled disabled-color="#fff" placeholder="区"
						border="bottom"></u-input>
					<u-icon name="map-fill" @click="openMap(1)"></u-icon>
				</u-form-item>
				<u-form-item label="街道" required prop="khlxdzxxdz" labelWidth="180">
					<u-input v-model="khxx.khlxdzjd" disabled disabled-color="#fff" placeholder="街道"
						border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="客户详细联系地址" required prop="khlxdzxxdz" labelWidth="180">
					<u-input v-model="khxx.khlxdzxxdz" placeholder="请输入客户详细联系地址" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="客户身份证号" required prop="khsfzh"  labelWidth="180">
					<u-input v-model="khxx.khsfzh" maxlength="18" placeholder="请输入客户身份证号" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="企业统一社会信用代码" labelWidth="180" v-if="khxx.khlx === '非居民'">
					<u-input v-model="khxx.qytyshxydm" maxlength="18" placeholder="请输入企业统一社会信用代码"
						border="bottom"></u-input>
				</u-form-item>
			</view>

<!--			<view class="usuallyCard margin-sm padding">-->
<!--				<view class="text-lg">-->
<!--					收货信息-->
<!--				</view>-->
<!--				<u-form-item label="收货人姓名" required prop="shrxm" labelWidth="180">-->
<!--					<u-input v-model="khxx.shrxm" maxlength="8" placeholder="请输入客户名称" border="bottom"></u-input>-->
<!--				</u-form-item>-->
<!--				<u-form-item label="收货人电话" required prop="shrdh" labelWidth="180">-->
<!--					<u-input v-model="khxx.shrdh" maxlength="11" placeholder="请输入客户联系电话" border="bottom"></u-input>-->
<!--				</u-form-item>-->
<!--				<u-form-item label="收货人地址(省市区街道)" required labelWidth="180">-->
<!--					<u-input v-model="khxx.shrdzsf" disabled disabled-color="#fff" placeholder="省"-->
<!--						border="bottom"></u-input>-->
<!--					<u-input v-model="khxx.shrdzs" disabled disabled-color="#fff" placeholder="市"-->
<!--						border="bottom"></u-input>-->
<!--					<u-input v-model="khxx.shrdzq" disabled disabled-color="#fff" placeholder="区"-->
<!--						border="bottom"></u-input>-->
<!--					<u-input v-model="khxx.shrdzjd" disabled disabled-color="#fff" placeholder="街道"-->
<!--						border="bottom"></u-input>-->
<!--					<u-icon name="map-fill" @click="openMap(2)"></u-icon>-->
<!--					&lt;!&ndash; <u-input v-model="khxx.area" placeholder="请选择收货人省市区街道" border="bottom"></u-input> &ndash;&gt;-->
<!--				</u-form-item>-->
<!--				<u-form-item label="收货人详细地址" required prop="shrdzxxdz" labelWidth="180">-->
<!--					<u-input v-model="khxx.shrdzxxdz" placeholder="请输入收货人详细地址" border="bottom"></u-input>-->
<!--				</u-form-item>-->
<!--			</view>-->
		</u--form>
		<view class="bomBtnCss" @click="handleConfirm">
			<u-button color="#EA5504">确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				khxx: {
					hyID: "",
					khlx: "", //客户类型 必填
					khmc: "", //客户名称 必填
					khlxxm: "", //客户联系姓名（客户类型为：非居民时，此字段必填）
					khlxdh: "", //客户联系电话 必填
					khsfzh: "", //客户身份证号
					khlxdzxxdz: "", //客户联系地址
					qytyshxydm: "", //企业统一社会信用代码
					shrxm: "", //收货人姓名
					shrdh: "", //收货人电话
					shrdzsf: "", //收货人省
					shrdzs: "", //收货人市
					shrdzq: "", //收货人区
					shrdzjd: "", //收货人街道
					jd: "",
					wd: "",
				},
				aiText: "",
				rules: {
					'khmc': {
						type: 'string',
						required: true,
						message: '请填写客户姓名',
						trigger: ['blur', 'change']
					},
					'khlxxm': {
						type: 'string',
						required: true,
						message: '请填写客户联系姓名',
						trigger: ['blur', 'change']
					},
					'khlxdh': {
						type: 'string',
						required: true,
						message: '请填写客户联系电话',
						trigger: ['blur', 'change']
					},
					'khlxdzxxdz': {
						type: 'string',
						required: true,
						message: '请填写客户联系地址',
						trigger: ['blur', 'change']
					},
					'khsfzh': {
						type: 'string',
						required: true,
						message: '请填写客户身份证号',
						trigger: ['blur', 'change']
					},
					'khlxdzxxdz': {
						type: 'string',
						required: true,
						message: '请填写客户联系地址',
						trigger: ['blur', 'change']
					},
					// 收货人信息校验
					'shrxm': {
						type: 'string',
						required: true,
						message: '请填写收货人姓名',
						trigger: ['blur', 'change']
					},
					'shrdh': {
						type: 'string',
						required: true,
						message: '请填写收货人电话',
						trigger: ['blur', 'change']
					},
					'shrdzxxdz': {
						type: 'string',
						required: true,
						message: '请填写收货人详细地址',
						trigger: ['blur', 'change']
					},
				},
				openMapType: null,
			}
		},
		computed: {

		},
		onLoad(data) {
			if(data.adsData){
				let datas = JSON.parse(data.adsData)
				if (Object.keys(datas).length !== 0) {
				    this.khxx = datas;
					console.log(this.khxx);
				}
			}
		},
		methods: {
			async handleAi() {
				let that = this;
				console.log("待识别内容1", this.aiText);
				let query = {
					search: this.aiText
				}
				this.$api.orderApi.getDetailSearch(query).then(res => {
					console.log("识别结果", res);
					let {
						code,
						value
					} = res;
					if (code === 200 && value.userInfo) {
						this.$modal.showLoading('识别中...')
						console.log(value.userInfo);
						let data = value.userInfo
						// this.khxx.hyID = data.fHybh;
						this.khxx.khlx = data.fHylx;
						this.khxx.khmc = data.fXm;
						this.khxx.khlxxm = data.fXm;
						this.khxx.khlxdh = data.fSjh;
						this.khxx.khsfzh = data.fSfzh;
            this.khxx.qytyshxydm = data.fShtysbm || "";
            if (value.hydzs && value.hydzs.length > 0) {
              let mrdz = value.hydzs.find(d => d.fSfmrdz == 'y');
              this.khxx.khlxdzsf = mrdz?mrdz.fLxrsf:value.hydzs[0].fLxrsf;
              this.khxx.khlxdzs = mrdz?mrdz.fLxrs:value.hydzs[0].fLxrs;
              this.khxx.khlxdzq = mrdz?mrdz.fLxrq:value.hydzs[0].fLxrq;
              this.khxx.khlxdzjd = mrdz?mrdz.fLxrjd:value.hydzs[0].fLxrjd;
              this.khxx.khlxdzxxdz = mrdz?mrdz.fLxrxxdz:value.hydzs[0].fLxrxxdz;
              this.khxx.jd = mrdz?mrdz.fJd:value.hydzs[0].fJd;
              this.khxx.wd = mrdz?mrdz.fWd:value.hydzs[0].fWd;
            }


						// this.khxx.khlxdzsf = data.fFwszsf;
						// this.khxx.khlxdzs = data.fFwszs;
						// this.khxx.khlxdzq = data.fFwszq;
						// this.khxx.khlxdzjd = data.fFwszjd;
						// this.khxx.khlxdzxxdz = data.fFwszxqmc;
						// this.khxx.qytyshxydm = data.fShtysbm || "";
						// this.khxx.mcazsj = data.mcazsj;
						setTimeout(() => {
							that.$modal.closeLoading();
						}, 500)
					} else {
						uni.$u.toast('未查询到用户信息');
						console.log();
					}
				})
			},
			openMap(e) {
				this.openMapType = parseInt(e);
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						//划皆市区
						// let location = res.address
						// const [province, city, district, street] = location.match(/(.*?省|.*?市|.*?区|.*$)/g).map(
						// 	item => item.replace(/省|市|区/g, ''));
						// console.log(province, city, district, street);
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.khxx.jd = res.longitude;
						that.khxx.wd = res.latitude;
						// 逆地址获取
						that.loadCity(res.longitude, res.latitude, res.address, res.name)
					}
				});
			},
			loadCity(longitude, latitude, address, name) {
				let that = this;
				uni.request({
					header: {
						'Content-Type': 'application/json',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: `https://restapi.amap.com/v3/geocode/geo?output=JSON&address=${address}&location=${longitude},${latitude}&key=${this.$config.gaodeMapKey}`,
					success(res) {
						console.log("逆地址获取位置成功信息", res)
						let data = res.data;
						if (data.status === '1') {
							let geocodes = data.geocodes[0];
							console.log("取第一个地址", geocodes);
							console.log("打开地图类型", that.openMapType);
							if (that.openMapType === 1) {
								that.$set(that.khxx,'khlxdzsf',geocodes.province);
								that.$set(that.khxx,'khlxdzs',geocodes.city);
								that.$set(that.khxx,'khlxdzq',geocodes.district);
								let street = geocodes.street;
								const regex = /区(.*)$/;
								const extractedText = /区(.*)$/.exec(geocodes.formatted_address)[1].trim();
								that.$set(that.khxx, 'khlxdzjd', that.$streetOrNot(street) ? street : extractedText || "");
								// that.$set(that.khxx, 'khlxdzxxdz', geocodes.formatted_address);
								console.log('客户信息', JSON.parse(JSON.stringify(that.khxx)));
							} else {
								that.khxx.shrdzsf = geocodes.province;
								that.khxx.shrdzs = geocodes.city;
								that.khxx.shrdzq = geocodes.district;
								that.khxx.shrdzjd = address;
								// that.khxx.shrdzxxdz = `${address}${name}`;
								console.log('收货人信息', JSON.parse(JSON.stringify(that.khxx)));
							}
						}else{
							uni.$u.toast('地址解析失败')
						}
					},
					fail(err) {
						console.log(err, "获取位置失败信息")
						uni.$u.toast(err);
					}
				})
			},
			handleConfirm() {
				this.$refs.uForm.validate().then(async res => {
					uni.$emit('khxxData',this.khxx);
					this.$goBack();
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 50px;
	}

	.bomBtnCss {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		height: 50px;
		padding: 5px 10px;
	}

	/deep/.u-input {
		padding: 6px 0px !important;
	}
</style>