<template>
	<view>
		<u-navbar title="设备详情" title-color="#101010">
			<!-- <view class="slot" style="color: #1677FF;" slot="right" @click="bindShow2=true">
				修改
			</view> -->
		</u-navbar>
		<view class="background">

			<view class="details">
				<view class="headline">
					{{meterDetail.name}}
				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="item-title">
							设备类型
						</view>
						<view class="item-value2">
							{{meterDetail.deviceTypeN}}
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							设备编号
						</view>
						<view class="item-value">
							{{meterDetail.deviceNo}}
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							设备地址
						</view>
						<view class="item-value">
							{{meterDetail.installationAddress}}
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							地址简称
						</view>
						<view class="item-value">
							{{meterDetail.installationAddressSimple}}
						</view>
					</view>
				</view>

				<view class="infos">
					<view class="infos-item">
						<view class="item-title">
							产权单位
						</view>
						<view class="item-value">
							{{meterDetail.companyFullName}}
						</view>
					</view>
					<!-- <view class="infos-item">
						<view class="item-title">
							产权单位简称
						</view>
						<view class="item-value">
							{{meterDetail.companyName}}
						</view>
					</view> -->
					<!-- <view class="infos-item">
						<view class="item-title">
							产权单位联系人
						</view>
						<view class="item-value">
							未填写
						</view>
					</view> -->
				</view>

				<view class="infos">
					<view class="infos-item">
						<view class="item-title">
							使用单位
						</view>
						<view class="item-value">
							{{meterDetail.customer}}
						</view>
					</view>
					<!-- <view class="infos-item">
						<view class="item-title">
							使用单位简称
						</view>
						<view class="item-value">
							荆鹏软件
						</view>
					</view> -->
					<!-- <view class="infos-item">
						<view class="item-title">
							使用单位联系人
						</view>
						<view class="item-value">
							未填写
						</view>
					</view> -->

				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="item-title">
							启用时间
						</view>
						<view class="item-value">
							{{meterDetail.enablingTime}}
						</view>
					</view>
					<!-- <view class="infos-item">
						<view class="item-title">
							备注
						</view>
						<view class="item-value">
							自有
						</view>
					</view> -->


				</view>
			</view>

		</view>
		<!-- 确认弹窗 -->
		<view class="modal">
			<u-modal v-model="bindShow" :show-title="false" :show-cancel-button="true" @confirm="submit"
				cancel-text="暂不绑定" :confirm-text="confirmText" @cancel="cancel">
				<view class="headline">
					请确认您要绑定的账户信息
				</view>
				<view class="infos">
					<view class="item">
						<view class="title">
							设备名称
						</view>
						<view class="value">
							<u-input v-model="findByMeter.name" :border="true"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							设备地址
						</view>
						<view class="value">
							<u-input v-model="findByMeter.installationAddress" type="textarea" :border="true"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							地址简称
						</view>
						<view class="value">
							<u-input v-model="findByMeter.installationAddressSimple" :border="true"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							电表编号
						</view>
						<view class="value">
							{{findByMeter.deviceNo}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							设备类型
						</view>
						<view class="value">
							{{findByMeter.deviceTypeN}}
						</view>
					</view>
				</view>
			</u-modal>
		</view>

		<!-- 账户信息弹窗 -->
		<view class="modal">
			<u-modal v-model="bindShow2" :show-title="false" :show-cancel-button="true" @confirm="submitUpdate" cancel-text="取消"
				confirm-text="修改">
				<view class="headline">
					电表信息
				</view>
				<view class="infos">
					<view class="item">
						<view class="title">
							设备名称
						</view>
						<view class="value">
							<u-input v-model="updateByMeter.name" :border="true"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							设备地址
						</view>
						<view class="value">
							<u-input v-model="updateByMeter.address" type="textarea" :border="true"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							地址简称
						</view>
						<view class="value">
							<u-input v-model="updateByMeter.addressSimple" :border="true"></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							电表编号
						</view>
						<view class="value">
							{{meterDetail.deviceNo}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							设备类型
						</view>
						<view class="value">
							{{meterDetail.deviceTypeN}}
						</view>
					</view>
				</view>
			</u-modal>
		</view>

		<!-- 底部 -->
		<view class="bottom" v-if="type == '1'">
			<button class="scan" @click="getScanCode()">
				<image class="img" src="@/assets/img/riLine-link-unlink.svg" mode=""></image>
				换绑电表
			</button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
	import * as WxJsApi from '@/apis/utils/wxJsApi.js'

	export default {
		data() {
			return {
				updateByMeter: {
					id: '',
					name: '',
					address: '',
					addressSimple: '',
				},
				newMaterId: '',
				oldMeterId: '',
				meterDetail: {},
				materId: '',
				bindShow: false,
				bindShow2: false,
				meterNo: '',
				findByMeter: {},
				type: '', //绑定权限
				change: false,
				cancelText: '暂不绑定',
				confirmText: '确认绑定'
			}
		},
		onLoad(op) {
			WxJsApi.getWxConfig(['scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})

			if (op.id) {
				this.materId = op.id;
				this.getMeterDetails(this.materId);
				this.getfindByOpenId();
			}
			if (op.meterNo) {
				this.meterNo = op.meterNo
				this.getFindByMeterNo(this.meterNo);
			}
		},
		methods: {
			//修改
			getUpdateMeter(obj) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.updateMeter(obj).then((response) => {
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						icon: "success"
					})
					this.getMeterDetails(obj.id);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submitUpdate() {
				this.getUpdateMeter(this.updateByMeter);
			},
			//扫码识别
			getScanCode() {
				this.getScanCode1()
				// var code="pc-1021"
				// this.getScanCode2(code)
			},
			getScanCode1() {
				WxJsApi.scanQRCode(1, null, ["qrCode", "barCode"]).then(res => {
					//("scanQRCode------" + res)
					if (res) {
						this.getScanCode2(res)
					}
				}).catch(error => {

				})
			},
			getScanCode2(code) {
				this.change = true;
				this.cancelText = '暂不换绑';
				this.confirmText = '确认换绑';
				if (code) {
					if (code.indexOf(",") > -1) {
						var sz = code.split(",")
						if (sz.length == 2) {
							this.getFindByMeterNo(sz[1]);
						}
					} else {
						this.getFindByMeterNo(code);
					}
				}
			},
			submit() {
				var sz=['name','installationAddress','installationAddressSimple']
				var sz2=['name','address','addressSimple']
				
				var bl=false;
				var obj={
					id:this.updateByMeter.id
				};
				for(var i in sz){
					var key=sz[i]
					var key2=sz2[i]
					// console.log(key,this.updateByMeter[key2],this.findByMeter[key])
					if(this.updateByMeter[key2]!=this.findByMeter[key]){
						bl=true;
					}
					obj[key2]=this.findByMeter[key]
				}
				
				if (this.change) {
					this.getCharngeMeter();
				} else {
					this.getBindMeter();
				}
				if(bl) {
					this.getUpdateMeter(obj);
				}
			},
			//绑定
			getBindMeter() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.bindMeter({
					meterNo: this.meterNo
				}).then((response) => {
					uni.hideLoading()
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; //上一个页面
					uni.navigateBack({
						success: function() {
							beforePage.$vm.getMaterList(true);
						}
					})
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						showCancel: false,
						content: error,
						title: "提示"
					})
				})
			},
			//换绑
			getCharngeMeter() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.charngeMeter({
					meterNo: this.meterNo,
					oldMeterId: this.oldMeterId
				}).then((response) => {
					uni.hideLoading()
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; //上一个页面
					uni.navigateBack({
						success: function() {
							beforePage.$vm.getMaterList(true);
						}
					})
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						showCancel: false,
						content: error,
						title: "提示"
					})
				})
			},
			cancel() {
				this.bindShow = false;
				if (!this.change) {
					uni.navigateBack();
				}
			},
			//能源中心扫电表码
			getFindByMeterNo(meterNo) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.findByMeterNo({
					meterNo: meterNo
				}).then((response) => {
					uni.hideLoading()
					// console.log(response)
					this.bindShow = true;
					this.findByMeter = response.data.meter;
					this.updateByMeter.id = response.data.meter.id;
					this.updateByMeter.name = response.data.meter.name;
					this.updateByMeter.address = response.data.meter.installationAddress;
					this.updateByMeter.addressSimple = response.data.meter.installationAddressSimple;

					if (!this.change) {
						this.materId = response.data.meter.id;
						this.getMeterDetails(this.materId);
					} else {
						this.meterNo = meterNo;
						this.newMaterId = response.data.meter.id;
						this.oldMeterId = this.materId;
					}
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						showCancel: false,
						content: error,
						title: "提示"
					})
				})
			},
			getMeterDetails(meterId) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.meterDetails({
					meterId: meterId
				}).then((res) => {
					uni.hideLoading();
					this.meterDetail = res.data.meter;
					this.updateByMeter.id = res.data.meter.id;
					this.updateByMeter.name = res.data.meter.name;
					this.updateByMeter.address = res.data.meter.installationAddress;
					this.updateByMeter.addressSimple = res.data.meter.installationAddressSimple;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//绑定权限
			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.type = response.data.companyInfo.type;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		height: 400rpx;
		padding-top: 32rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);

		// 用电记录
		.details {

			background-color: #fff;
			border-radius: 8px;
			padding: 32rpx;
			margin: 0rpx 32rpx;

			.headline {
				color: rgb(16, 16, 16);
				font-size: 40rpx;
				text-align: center;
				margin-bottom: 40rpx;
				font-weight: bold;
			}

			.infos {
				padding-top: 40rpx;
				border-top: 1px solid rgba(241, 241, 241, 1);

				.infos-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.item-title {
						color: rgba(51, 51, 51, 1);
					}

					.item-value {
						color: rgba(16, 16, 16, 1);

					}

					.item-value2 {
						color: #1677FF;
					}
				}
			}
		}



	}



	.modal {
		.headline {
			text-align: center;
			background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(20, 73, 159, 1) 100%);
			color: #fff;
			height: 144rpx;
			line-height: 144rpx;
			font-size: 36rpx;

		}

		.infos {
			padding: 40rpx 48rpx 26rpx;

			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.title {
					color: rgba(119, 119, 119, 1);
					font-size: 32rpx;
					width: 138rpx;
				}

				.value {
					color: #333333;
					font-size: 32rpx;

					width: 388rpx;
					margin-left: 16rpx;
				}
			}

		}

	}

	// 底部
	.bottom {
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid rgba(232, 232, 232, 1);
		padding: 24rpx 32rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.scan {
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			background: linear-gradient(-88.46deg, rgba(34, 109, 198, 1) 2.59%, rgba(9, 158, 237, 1) 97.02%);

			.img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>