<template>
	<view>
		<u-navbar title="设备信息" title-color="#101010"></u-navbar>
		<!-- 下拉框 -->
		<view class="dropdown">
			<view class="dropdown-item">
				
				<view class="text">
					{{device}} 
				</view>
				<!-- <view class="item-icon">
					<u-icon name="arrow-down" color="#999999" v-if="show1==false"></u-icon>
					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
				</view> -->
			</view>
			<view class="dropdown-item" @click="show2=true">
				<view class="text">
					{{company}} 
				</view>
				<view class="icon">
					<u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
				</view>
			</view>
		</view>

		<u-select v-model="show1" mode="single-column" :list="deviceList" @confirm="deviceChange"></u-select>

		<u-select v-model="show2" mode="single-column" :list="companyList" @confirm="companyChange"></u-select>

		<!-- 设备信息 -->
		<view class="infos-content">
			<view class="item" v-for="(item,index) in materList" :key="index"
				@click="gotoUrl('/pages/equipmentInformation/equipmentDetails?id='+item.id)">
				<view class="item-icon" v-if="item.classify == '1'">
					<image class="img" src="@/assets/img/energy1.svg" mode=""></image>
				</view>
				<view class="item-icon" v-if="item.classify == '2'">
					<image class="img" src="@/assets/img/transformer2.svg" mode=""></image>
				</view>
				<view class="item-name">
					<view class="name1">
						{{item.name}}
					</view>
					<view class="name2">
						{{item.deviceTypeN}}
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#acacac" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-divider :isnone="materList.length==0" nonetext="暂无记录" border-color="#CFD2D5"></u-divider>
			
		<!-- 底部 -->
		<view class="bottom" v-if="type == '1'">
			<button class="scan" @click="getScanCode()">
				<image class="img" src="@/assets/img/riLine-qr-scan-2-line.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 {
				companyId: '',
				deviceType: '1',
				pageIndex: 1,
				recordsTotal: 0,
				materList: [],
				type: '', //绑定权限
				device: '变压器智能监控及巡检仪',
				company: '全部公司',
				show1: false, // 设备选择
				show2: false, // 状态选择
				deviceList: [],
				companyList: [],
				isRefresh: false
			}
		},
		onLoad() {
			WxJsApi.getWxConfig([ 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
			
		},
		onReady() {
			this.getMaterList();
			this.getfindByOpenId();
			// this.getDeviceList();
			this.getCompanyInfoList();
		},
		onReachBottom() {
			if (this.materList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			//扫码识别
			getScanCode() {
				this.getScanCode1()
				// var code="JPDJ01-0001"
				// this.getScanCode2(code)
			},
			getScanCode1() {
				WxJsApi.scanQRCode(1,null,["qrCode","barCode"]).then(res => {
					console.log("scanQRCode1------" + res)
					if (res) {
						this.getScanCode2(res)
					}
				}).catch(error => {
		
				})
			},
			getScanCode2(code) {
				console.log("scanQRCode2------" + code)
				if(code){
					if(code.indexOf(",")>-1){
						var sz= code.split(",")
						if(sz.length==2){
							uni.navigateTo({
								url: '/pages/equipmentInformation/equipmentDetails?meterNo='+sz[1]
							})
						}
					}else{
						uni.navigateTo({
							url: '/pages/equipmentInformation/equipmentDetails?meterNo='+code
						})
					}
				}
			},
			// 设备查询
			companyChange(e) {
				// console.log(e);
				this.companyId = e[0].value;
				this.company = e[0].label;
				
				this.getMaterList(true);
			},
			// 设备查询
			deviceChange(e) {
				// console.log(e);
				this.deviceType = e[0].value;
				this.device = e[0].label;
				
				this.getMaterList(true);
			},
			//查询公司list
			getCompanyInfoList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceCompanyList().then((response) => {
					uni.hideLoading();
					var list = [];
					list = response.data.companyInfoList.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					});
					list.unshift({
						label: '全部公司',
						value: ''
					})
					
					this.companyList = list;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//查询设备list
			getDeviceList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.findByName({
					name: '设备类型'
				}).then((res) => {
					uni.hideLoading();
					var list = [];
					list = res.data.map(item => {
						return {
							label: item.name,
							value: item.value
						}
					})
					list.unshift({
						label: '全部设备',
						value: ''
					})
					this.deviceList = list;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getMaterList();
			},
			//设备信息list
			getMaterList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.materList = [];
					this.pageIndex = 1;
				}
				API_electricityMeter.materList({
					pageIndex: this.pageIndex,
					pageSize: 10,
					companyId: this.companyId,
					deviceType: this.deviceType
				}).then((res) => {
					uni.hideLoading();
					this.materList = [
						...this.materList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).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>
	page {
		padding-bottom: 100px;
	}

	// 下拉框
	.dropdown {
		background-color: #fff;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		padding: 18rpx 46rpx;
		display: flex;
		border-bottom: 1px solid rgba(245, 245, 245, 1);

		.dropdown-item {
			width: 50%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				max-width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	// 设备信息
	.infos-content {
		background-color: #fff;
		margin-top: 24rpx;

		.item {
			padding: 24rpx 32rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(245, 245, 245, 1);

			.item-icon {
				width: 72rpx;
				height: 72rpx;
				border-radius: 4px;
				background-color: rgba(219, 234, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item-name {
				margin-left: 30rpx;
				name1 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.name2 {
					color: rgba(119, 119, 119, 1);

				}
			}

			.more {
				margin-left: auto;
			}
		}
	}


	// 底部
	.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>