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

		<div class="deviceCard">
			<div class="btn" v-if="choosedDevice">
				<template v-if="choosedDevice.bind_status">
					<template v-if="choosedDevice.bind_status == 'ACTIVE'">
						<span v-if="choosedDevice.device_status == 'ONLINE'" class="color2">在线</span>
						<span v-else class="color3">离线</span>
					</template>
					<span v-else class="color1">未激活</span>
				</template>
				<div class="btn" v-else>
					<span class="color4">未启用</span>
				</div>
			</div>
			<div class="btn" v-else>
				<span class="color4">未启用</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">{{ choosedDevice ? choosedDevice.device_name : '请选择' }}</div>
					<van-icon name="arrow" v-if="!isBind"></van-icon>
				</div>
			</div>
			<div class="infoItem">
				<div class="label">唯一标识</div>
				<div class="deviceNumber">{{ choosedDevice ? choosedDevice.device_index_code : '' }}</div>
			</div>
		</div>

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

		<!-- 设备选择弹窗 -->
		<van-popup v-model="showPop" position="bottom" :style="{ height: '40%' }">
			<van-picker
			  title="选择设备"
			  show-toolbar
			  :columns="deviceList"
			  value-key="device_name"
			  @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, put } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';
import { getInfo } from '@/utils/auth';
import { notEmpty } from '@/utils/tool';
import { Dialog } from 'vant';

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.choosedDevice) {
				return this.choosedDevice.device_name;
			}
		},
		// 设备识别码
		getDeviceCode() {
			if (this.choosedDevice) {
				return this.choosedDevice.device_number;
			}
		},
		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;
				}
			}
		}
	},
	computed: {
		userId() {
			const info = getInfo();
			return info ? info.uid : null;
		}
	},
	methods: {
		async init() {
			this.columns = [];
			this.showOverLay = true;
			this.isBind = false;
			
			const res = await get(`/v2/api/device?page=1&size=10000&sort=create_time%20desc`);
			if (res.data.length > 0 && this.userId) {
				for (let index = 0; index < res.data.length; index++) {
					const item = res.data[index];
					if (item.use_person_id == this.userId) {
						this.chooseIndex = index;
						this.isBind = true;
						this.choosedDevice = item;
						break;
					}
					else if (notEmpty(item.use_person_id)) {
						item.disabled = true;
					}
				}
			}
			this.deviceList = res.data;
			this.showOverLay = false;
		},
		async bindDevice() {
			if (this.choosedDevice) {
				const vm = this;
				Dialog.confirm({
					title: '提示',
					message: `是否确定绑定设备[${this.choosedDevice.device_name}]？`,
				})
				.then(() => {
					put(`/v2/api/device/${this.choosedDevice.id}/bind`).then(res => {
						vm.$notify({
							message: '绑定成功',
							type: 'success'
						});
						vm.init();
					}).catch(err => {
						vm.$notify({
							message: '绑定失败',
							type: 'danger'
						});
					});
				})
				.catch(() => {
					// on cancel
				});
			}
			else {
				this.$notify({
					message: '请选择设备',
					type: 'danger'
				});
			}
		},
		unbindDevice() {
			const vm = this;
			Dialog.confirm({
				title: '提示',
				message: `是否确定解绑设备[${this.choosedDevice.device_name}]？`,
			})
			.then(() => {
				put(`/v2/api/device/${this.choosedDevice.id}/un-bind`).then(res => {
					vm.$notify({
						message: '解绑成功',
						type: 'success'
					});
					vm.choosedDevice = null;
					vm.init();
				}).catch(err => {
					vm.$notify({
						message: '解绑失败',
						type: 'danger'
					});
				});
			})
			.catch(() => {
				// on cancel
			});
		},
		onConfirm(val, index) {
			this.chooseIndex = index;
			this.choosedDevice = val;
			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;
			}
			
			.color4 {
				background-color: #888;
			}

			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;
			}
			.deviceNumber {
				padding-top: 3px;
				font-size: 10px;
			}
			.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>
