<template>
	<div class="deviceManage">
		<headNav :title="'设备管理'"></headNav>

		<div class="deviceCard">
			<div class="btn" v-if="getStatus == 0"><span class="color1">未启用</span></div>
			<div class="btn" v-else-if="getStatus == 1"><span class="color2">在线</span></div>
			<div class="btn" v-else-if="getStatus == 2"><span class="color3">离线</span></div>
			<div class="img">
				<van-image :src="require('@/assets/device.png')" width="80%" height="7rem"></van-image>
			</div>
		</div>

		<div class="deviceInfo">
			<div class="infoItem">
				<div class="label">设备名称</div>
				<div class="df aic" @click="() => { !isBind && (showPop = true) }">
					<div class="content mr5">{{ getDeviceName }}</div>
					<van-icon name="arrow" v-if="!isBind"></van-icon>
				</div>
			</div>
			<div class="infoItem">
				<div class="label">唯一标识</div>
				<van-popover
				  trigger="click"
				  placement="bottom-end"
				  theme="dark"
				  v-model="showDetail"
				>
				   <div style="padding: 10px; font-size: 14px;">
				   	 {{ getDeviceCode }}
				   </div>
				  <template #reference>
				    <div class="content_code">{{ getDeviceCode }}</div>
				  </template>
				</van-popover>
			</div>
		</div>

		<div class="BindBtn">
			<van-button v-if="!isBind" type="info" @click="bindDevice">绑定</van-button>
			<van-button v-else type="info" plain @click="bindDevice">解除绑定</van-button>
		</div>

		<!-- 设备选择弹窗 -->
		<van-popup v-model="showPop" position="bottom" :style="{ height: '40%' }">
			<van-picker
			  title="标题"
			  show-toolbar
			  :columns="columns"
			  @confirm="onConfirm"
			  @cancel="showPop = false"
			/>
		</van-popup>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import { get, post, put } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';

export default {
	name: 'deviceManage',
	components: {
		headNav,
		'v-mask': mask_overLay
	},
	data() {
		return {
			showPop: false,
			showOverLay: false,
			showDetail: false,
			deviceList: '',
			choosedDevice: '',
			tipMsg: '加载中',
			columns: '',
			chooseIndex: 0,
			isBind: false,
		};
	},
	mounted() {
		this.init();
	},
	computed: {
		// 设备名字
		getDeviceName() {
			if (this.deviceList) {
				return this.deviceList[this.chooseIndex].deviceName;
			}
		},
		// 设备识别码
		getDeviceCode() {
			if (this.deviceList) {
				return this.deviceList[this.chooseIndex].uniqueIdentification;
			}
		},
		getStatus() {
			if (this.deviceList) {
				if (this.deviceList[this.chooseIndex].deviceState == '0') {
					return 0;
				} else if (this.deviceList[this.chooseIndex].deviceState == '1') {
					return 1;
				} else {
					return 2;
				}
			}
		}
	},
	methods: {
		// 初始化
		async init() {
			this.columns = [];
			this.showOverLay = true;
			this.isBind = false;
			
			const res = await this.getDeviceListApi();
			
			this.showOverLay = false;
			this.deviceList = res.data;
			
			res.data.map((item, index) => {
				this.columns.push(item.deviceName);
				
				if (item.activationState == '1') {
					this.chooseIndex = index;
					this.isBind = true;
				}
			});
			
			this.choosedDevice = this.columns[0];
		},
		
		// 绑定设备
		async bindDevice() {
			const res = await this.bindDeviceApi(this.deviceList[this.chooseIndex].id);
			
			if (res.code == '0') {
				this.$notify({
					message: res.msg,
					type: 'success'
				});
			} else {
				this.$notify({
					message: res.msg,
					type: 'danger'
				});
			}
			
			this.init();
		},

		// 获取设备列表
		async getDeviceListApi() {
			return get('/v1/api/enforceDevice/enforceDeviceTabInfo?limit=999&page=1');
			// return get(`/v2/api/device?page=1&size=10&sort=create_time%20desc`);
		},

		// 绑定设备
		async bindDeviceApi(id) {
			return get('/v1/api/enforceDevice/bindDevice?id=' + id);
		},
				
		// 选择一个设备
		onConfirm(val, index) {
			this.chooseIndex = index;
			this.showPop = false;
		},
	}
};
</script>

<style lang="scss" scoped>
.deviceManage {
	font-size: 14px;

	.deviceCard {
		height: 345px;
		background-color: #fff;
		margin: 10px 15px;
		margin-top: 65px;
		border: 1px solid #e1e1e1;
		border-radius: 5px;

		.btn {
			display: flex;
			justify-content: flex-end;
			
			.color1 {
				background-color: #0066ff;
			}
			
			.color2 {
				background-color: #00ad00;
			}
			
			.color3 {
				background-color: #f30;
			}

			span {
				margin: 10px 15px 0 0;
				color: #fff;
				font-size: 10px;
				padding: 4px 20px;
				border-radius: 15px;
			}
		}
		


		.img {
			display: flex;
			justify-content: center;
			margin-top: 15px;
			height: 100%;
			
			img {
				height: 320px !important;
			}
		}
	}

	.deviceInfo {
		background-color: #fff;
		margin: 10px 15px;
		border: 1px solid #e1e1e1;
		border-radius: 5px;

		.infoItem {
			padding: 10px 15px;
			display: flex;
			justify-content: space-between;

			.label {
				color: #9f9f9f;
			}

			.content {
				color: #595959;
			}
			
			.content_code {
				width: 120px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&:first-child {
				border-bottom: 1px solid #efefef;
			}
		}
	}

	.BindBtn {
		position: absolute;
		bottom: 0;
		display: flex;
		width: 100%;

		button {
			flex: 1;
			margin: 10px 15px;
		}
	}
}
</style>
