<template>
	<view class="">
		<u--form ref="uForm" labelPosition="top" :model="khxx" :rules="rules" errorType="toast">
			<view class="usuallyCard margin-sm padding flex flex-direction" v-if="openType !== 0">
				<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>
			<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" :disabled="!openType">
								<u-radio :customStyle="{marginRight: '20px'}" v-for="(item, index) in radiolist"
									:key="index" :label="item.name" :name="item.name" @change="radioChange">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="客户名称" prop="khmc" labelWidth="180">
					<u-input v-model="khxx.khmc" maxlength="8" placeholder="请输入客户名称" :disabled="!openType"
						disabled-color="#fff" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="客户联系电话" prop="khlxdh" labelWidth="180">
					<u-input v-model="khxx.khlxdh" maxlength="11" placeholder="请输入客户联系电话" :disabled="!openType"
						disabled-color="#fff" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="客户联系地址(省市区)" prop="area" labelWidth="180"
					v-show="openType === 1 || openType === 2">
					<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"></u-icon>
				</u-form-item>
				<u-form-item label="街道" prop="stree" labelWidth="180" v-show="openType === 1 || openType === 2">
					<u-input v-model="khxx.khlxdzjd" disabled disabled-color="#fff" placeholder="街道"
						border="bottom"></u-input>
				</u-form-item>

				<u-form-item label="客户详细联系地址" prop="khlxdzxxdz" labelWidth="180"
					v-show="openType === 1 || openType === 2">
					<u-input v-model="khxx.khlxdzxxdz" :disabled="!openType" disabled-color="#fff"
						placeholder="请输入客户详细联系地址" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="客户身份证号" labelWidth="180">
					<u-input v-model="khxx.khsfzh" maxlength="18" placeholder="请输入客户身份证号" :disabled="!openType"
						disabled-color="#fff" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="企业统一社会信用代码" maxlength="18" labelWidth="180" v-if="khxx.khlx === '非居民'">
					<u-input v-model="khxx.qytyshxydm" placeholder="请输入企业统一社会信用代码" :disabled="!openType"
						disabled-color="#fff" border="bottom"></u-input>
				</u-form-item>
			</view>
			<view class="usuallyCard margin-sm padding" v-if="!openType">
				<view class="text-lg margin-bottom">
					用气信息
				</view>
				<u-form-item label="收货人" labelWidth="180">
					<u-input v-model="khxx.shr" placeholder="请输入用气地址" :disabled="!openType" disabled-color="#fff"
						border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="收货人联系电话" labelWidth="180">
					<u-input v-model="khxx.shrdh" placeholder="请输入用气地址" :disabled="!openType" disabled-color="#fff"
						border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="收货地址" labelWidth="180">
					<u-input v-model="khxx.shrdz" placeholder="请输入用气地址" :disabled="!openType" disabled-color="#fff"
						border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="末次安装时间" labelWidth="180">
					<u-input v-model="khxx.mcazsj" placeholder="末次安装时间" :disabled="!openType" disabled-color="#fff"
						border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="备注" labelWidth="180">
					<u-input v-model="khxx.bz" placeholder="备注信息" :disabled="!openType" disabled-color="#fff"
						border="bottom"></u-input>
				</u-form-item>
			</view>
		</u--form>
		<u-datetime-picker ref="datetimePicker" :show="dateShow" v-model="value1" mode="date" @cancel="dateShow = false"
			:formatter="formatter" @confirm="handleConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		name: "step1",
		components: {},
		props: {
			openType: {
				type: Number,
				default: 0
			},
			ddid: {
				type: String,
				default: ""
			}
		},
		watch: {
			// khxxData:{
			// 	handler(){
			// 		this.khxx = {...this.khxxData}
			// 		console.log("当前客户信息111111",this.khxx);
			// 	},
			// 	immediate: true,
			// 	deep:true
			// }
		},
		data() {
			return {
				radiolist: [{
						name: '居民',
						disabled: false
					},
					{
						name: '非居民',
						disabled: false
					},
				],
				khxx: {
					khlx: "", //客户类型 必填
					khmc: "", //客户名称 必填
					khlxdh: "", //客户联系电话 必填
					khsfzh: "", //客户身份证号
					khlxdzsf: "", //省
					khlxdzs: "", //市
					khlxdzq: "", //区
					khlxdzjd: "", //街道
					khlxdzxxdz: "", //客户联系地址
					qytyshxydm: "", //企业统一社会信用代码
					yqdz: "", //用气地址
					mcazsj: "", //末次安装时间
					bz: "", //备注
					jd: "",
					wd: "",
					shr: null,
					shrdh: null,
					shrdz: null
				},
				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']
					},
				},
				dateShow: false,
				value1: Number(new Date()),
				aiText: "", //ai识别文本
			};
		},
		mounted() {
			console.log("mounted", this.openType);
			this.$refs.datetimePicker.setFormatter(this.formatter);
			//获取定位
			this.getLocal();
			// 根据订单id自动查询会员信息 type类型为0
			if (this.openType === 0) {
				this.getOrderByid();
			}
		},
		methods: {
			getLocal() {
				console.log("执行定位");
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						// that.khxx.jd = res.longitude;
						// that.khxx.wd = res.latitude;
					}
				});
			},
			async getOrderByid() {
				let query = {
					oracleId: this.ddid
				}
				this.$api.orderApi.getOrderByid(query).then(res => {
					console.log("订单id查询会员信息", res);
					if (res.code === 200) {
						let data = res.value;
						console.log('data------------->', data);
						this.khxx.khlx = data.fHylx;
						this.khxx.khmc = data.fHymc;
						this.khxx.khlxxm = data.fHymc;
						this.khxx.khlxdh = data.fHydh;
						this.khxx.khsfzh = data.fSfzh;
						this.khxx.shr = data.fShlxr;
						this.khxx.shrdh = data.fShlxrdh;
						this.khxx.shrdz = data.fShsf + ' ' + data.fShs + ' ' + data.fShq + ' ' + data.fShjd +
							' ' + data.fShxxdz
						this.khxx.qytyshxydm = data.fShtysbm || "";
						this.khxx.mcazsj = data.mcazsj || "-";
						this.khxx.bz = data.fMjly;

						this.khxx.jd = data.fShdzjd;
						this.khxx.wd = data.fShdzwd;

						console.log("填充会员信息", this.khxx);
					}
				})
			},
			openMap() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						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);
							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();
							console.log("街道", street);
							that.$set(that.khxx, 'khlxdzjd', that.$streetOrNot(street) ? street : extractedText || "");
							// that.$set(that.khxx, 'khlxdzxxdz', geocodes.formatted_address);
						} else {
							uni.$u.toast('地址解析失败')
						}
					},
					fail(err) {
						console.log(err, "获取位置失败信息")
						uni.$u.toast(err);
					}
				})
			},
			radioChange() {},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			async handleAi() {
				let that = this;
				console.log("待识别内容2", this.aiText);
				if (!this.aiText) {
					uni.$u.toast('请输入内容');
					return;
				}
				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.khlx = data.fHylx;
						this.khxx.khmc = 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 || "";
						setTimeout(() => {
							that.$modal.closeLoading();
						}, 500)
					} else {
						uni.$u.toast('未查询到用户信息');
						console.log();
					}
				})
			},
			handleConfirm(e) {
				this.dateShow = false;
				console.log("选择日期", e);
				let timestamp = e.value;
				let time = uni.$u.timeFormat(timestamp, 'yyyy年mm月dd号');
				this.khxx.mcazsj = time;
				console.log("格式化日期", this.khxx.mcazsj);
			},
			validate() {
				let that = this;
				console.log('校验', JSON.parse(JSON.stringify(this.khxx)));
				if (!this.khxx.khlx) {
					uni.$u.toast('请先选择客户类型');
					return;
				}
				return new Promise((resolve, reject) => {
					that.$refs.uForm.validate().then(valid => {
						// uni.$u.toast('校验通过')
						resolve(true);
					}).catch(errors => {
						// uni.$u.toast('校验失败')
						resolve(false);
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>