<template>
	<view class="page">
		<u-navbar title="设备管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="tap">
			<!-- <view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
				投放中设备
			</view>
			<view class="tap_cont" :class="curtitidx==1?'act1':''"  @click="changeidx(1)">
				仓库中设备
			</view> -->

		</view>
		<view class="" style="background: #FFFFFF;width: 750rpx;padding-bottom: 36rpx;">
			
			<view class="top_box" style="margin-top: 20rpx;">
				<!-- <view class="left_text" @click="show=true">
					{{tit}}  <view class="iconfont icon-xiangxia1"></view>
				</view> -->
				<view class="sear_ipt">
					<input type="text"
						 v-model="searchKeyword"
						 placeholder="请输入SN码"
						 class="input"
						 placeholder-style="color:#C7CDD3"
						 @input="search()">
				</view>
			</view>
		
		</view>
		<view class="stause_box">
			<view class="stause_li" @click="show=true">
				{{tit}}
				<view class="iconfont icon-xiangxia1"></view>
			</view>
			<view class="stause_li" style="margin-left: 50rpx;" @click="showdsc=true">
				{{sctit}}
				<view class="iconfont icon-xiangxia1"></view>
			</view>
		</view>

		<view class="info_card" style="margin-top: 20rpx;" v-for="(item,index) in filteredList" :key="index"  @click.stop="todetail(item)">
			<view class="info_tit" style="margin-left: 36rpx;">
				<view class="tit_right" :style="{ color: getStatusColors(item) }" style="margin-left: 0rpx;margin-right: 20rpx;">
				
					<view class="yuan" :style="{ background: getStatusColors(item) }"></view>
					{{statuss(item)}}
				</view>
				<view class="tit_left" v-if="stepindex==1" >
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uTuWiPEViwzaPPHAgjdN" mode=""
						v-if="!isSelected(item.sn)" @click.stop="selectItem(item.sn)"></image>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uGY25CNyW7Vz0LJcOYtS" mode=""
						v-if="isSelected(item.sn)" @click.stop="deselectItem(item.sn)"></image>

				</view>
				<span v-if="item.vehicleNum">	车牌号：{{item.vehicleNum}}</span>
				<span v-if="!item.vehicleNum">	车牌号：--</span>
				
				<view class="tit_right" :style="{ color: getStatusColor(item) }">

					<view class="yuan" :style="{ background: getStatusColor(item) }"></view>
					{{status(item)}}
				</view>
			</view>
			<view class="lines"></view>
			<view class="cont">


				<view class="info_li">
					<view class="half_infoli">
						MAC：
						<span v-if="item.mac">	{{item.mac}}</span>
						<span v-if="!item.mac">	--</span>
					</view>
					<view class="half_infoli">
						电量：
						<span v-if="item.remainingPower">	{{item.remainingPower}}%</span>
						<span v-else>	--</span>
					</view>
				</view>
				<view class="info_li">
					<view class="half_infoli">
						SN：
						<span v-if="item.sn">	{{item.sn}}</span>
						<span v-else>	--</span>
					</view>
					<view class="half_infoli">
						型号：
						<span v-if="item.model">	{{item.model}}</span>
						<span v-else>	--</span>
					</view>
				</view>
			</view>
		</view>


		<view class="bot_box">
			<view class="step1" v-if="stepindex ==0">
				<view class="step1_left">
					设备总数：<span>{{filteredList.length}}</span>
				</view>
				<view class="right_box" @click="stepindex=1">
					批量操作
				</view>
			</view>
			<view class="step2">
				<view class="top">
					<view class="top_left" @click="selectAll">
						<image
							:src="isAllSelected ? 'https://lxnapi.ccttiot.com/bike/img/static/uGY25CNyW7Vz0LJcOYtS' : 'https://lxnapi.ccttiot.com/bike/img/static/uTuWiPEViwzaPPHAgjdN'"
							mode=""></image>
						{{ isAllSelected ? '取消全选' : '全选' }}
					</view>
					<view class="top_right">
						已选设备：{{selectedItems.length}}
					</view>
				</view>
				<view class="bot_btn">
					<view class="btn" @click="closestep()">
						取消
					</view>
					<!-- 	<view class="btn">
						返仓
					</view> -->
					<view class="btn" @click="ban()">
						车辆禁用
					</view>
					<view class="btn" @click="pick()">
						车辆解禁
					</view>
					<view class="btn" @click="gohome()">
						车辆回仓
					</view>
					<view class="btn" @click="livehome()">
						车辆出仓
					</view>
					
	
				</view>
			</view>
		</view>
		<view class="bottom" style="width: 100%;height: 300rpx;">

		</view>
		<u-select v-model="show" :list="list" title='设备状态' @confirm="confirm"></u-select>
		<u-select v-model="showdsc" :list="lists" title='剩余电量' @confirm="confirms"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curtitidx: 0,
				bgc: {
					backgroundColor: "#fff",
				},
				showdsc: false,
				sctit: '从高到低',
				scidx: 'desc',
				show: false,
				lists: [{
						value: 'desc',
						label: '从高到低'
					},
					{
						value: 'asc',
						label: '从低到高'
					},
				],
				list: [{
						value: '',
						label: '全部'
					},
					{
						value: '0',
						label: '未上架'
					},
					{
						value: '1',
						label: '待租'
					},
					{
						value: '2',
						label: '预约中'
					},
					{
						value: '3',
						label: '骑行中'
					},
					{
						value: '4',
						label: '临时锁车'
					},
					{
						value: '8',
						label: '下线'
					}

				],
				tit: '全部',
				typeidx: '',
				deviceList: [],
				stepindex: 0,
				selectedItems: [],
				searchKeyword:'',
				filteredList:[],
				areaId: 0,
				

			}
		},

		onLoad() {
			if(uni.getStorageSync('adminAreaid')){
				this.areaId = uni.getStorageSync('adminAreaid')
					this.getDevice()
			}
		
		},
		computed: {
			isAllSelected() {
				if (this.selectedItems.length == this.deviceList.length) {
					return true
				} else {
					return false
				}

			},
		
		},

		methods: {
			search(){
				 if (this.searchKeyword!='') {
				        this.filteredList = this.deviceList.filter(device =>
				          device.sn.includes(this.searchKeyword)
				        );
				      } else {
				        this.filteredList = this.deviceList;
				      }
			},
			todetail(item){
				uni.navigateTo({
					url:'/pages_admin/order/device_detail?id='+item.sn
				})
			},
			ban() {
				let data = {
					disableType: 'disable',
					sns: this.selectedItems.join(',')
				}
				this.$u.post(`/appVerify/device/disable?sns=` + data.sns + '&disableType=disable').then((res) => {
					if (res.code == 200) {
						this.closestep()
						this.getDevice()
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			pick() {
				let data = {
					disableType: 'enable',
					sns: this.selectedItems.join(',')
				}
				this.$u.post(`/appVerify/device/disable?sns=` + data.sns + '&disableType=enable').then((res) => {
					if (res.code == 200) {
						this.closestep()
						this.getDevice()


					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			gohome(){
				let data = {
					disableType: 'inStash',
					sns: this.selectedItems.join(',')
				}
				this.$u.post(`/appVerify/device/disable?sns=` + data.sns + '&disableType=enable').then((res) => {
					if (res.code == 200) {
						this.closestep()
						this.getDevice()
				
				
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			livehome(){
				let data = {
					disableType: 'outStash',
					sns: this.selectedItems.join(',')
				}
				this.$u.post(`/appVerify/device/disable?sns=` + data.sns + '&disableType=enable').then((res) => {
					if (res.code == 200) {
						this.closestep()
						this.getDevice()
				
				
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			confirms(e) {

				this.scidx = e[0].value
				this.sctit = e[0].label
				this.getDevice()
			},
			getStatusColor(item) {
				// if (item.onlineStatus == 0) {
				// 	// 离线状态为红色
				// 	return 'red';
				// } else 
				if (item.status == 0 || item.status == 8) {
					// 下线和未上架状态为灰色
					return 'gray';
				} else {
					// 其他状态为蓝色
					// return 'blue';
				}
			},
			getStatusColors(item) {
				if (item.onlineStatus == 0) {
					// 离线状态为红色
					return 'red';
				}
			},
			closestep() {
				this.selectedItems = []
				this.stepindex = 0
			},
			isSelected(sn) {
				return this.selectedItems.includes(sn);
			},
			selectItem(sn) {
				this.selectedItems.push(sn);
				// 更新 isAllSelected

				console.log(this.selectedItems, '选择');
			},
			deselectItem(sn) {
				this.selectedItems = this.selectedItems.filter(item => item !== sn);
				// 更新 isAllSelected

				console.log(this.selectedItems, '删除');
			},

			selectAll() {
				if (this.selectedItems.length === this.deviceList.length) {
					// All items are already selected, so deselect all
					this.selectedItems = [];
				} else {
					// Select all items
					this.selectedItems = this.deviceList.map(item => item.sn);
				}
			},
			status(item) {
				if (item.status == 0) {
					return '仓库中'
				} else if (item.status == 1) {
					return '待租'
				} else if (item.status == 2) {
					return '预约中'
				} else if (item.status == 3) {
					return '骑行中'
				} else if (item.status == 4) {
					return '临时锁车中'
				} else if (item.status == 7) {
					return '未绑定'
				} else if (item.status == 8) {
					return '禁用中'
				}
			},
			statuss(item) {
				if (item.onlineStatus == 0) {
					return '离线'
				}else{
						return '在线'
				}
			},
			getDevice() {
				let data = {
					powerStart: '',
					powerEnd: '',
					sort: this.scidx,
					status: this.typeidx,
					areaId: this.areaId
					
				}

				this.selectedItems = [];
				this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
					if (res.code == 200) {
						this.deviceList = res.data
						  this.filteredList = this.deviceList;

					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			confirm(e) {
				// console.log(e,'eeeeeeeeee');
				this.typeidx = e[0].value
				this.tit = e[0].label
				this.getDevice()
				// console.log(e);
				// this.mode = e[0].label
				// this.gettype()
			},
			changeidx(idx) {
				this.curtitidx = idx
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.page {
		width: 750rpx;
		.top_box {
			
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			padding: 28rpx 30rpx;
			// padding: 20rpx 0;
			
			margin: 0 auto;
			width: 672rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		
			.left_text {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				width: 25%;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
				.icon-xiangxia1{
					font-size: 26rpx;
				}
			}
		
			.timebox {
				width: 75%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-left: 34rpx;
		
				.left_time {
					text-align: center;
					margin-right: 6rpx;
					height: 50rpx;
					width: 45%;
					border: 2rpx solid #ccc;
					border-radius: 12rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #979797;
				}
		
				.right_time {
					text-align: center;
					margin-left: 6rpx;
					height: 50rpx;
					width: 45%;
					border: 2rpx solid #ccc;
					border-radius: 12rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #979797;
				}
			}
		}
		.info_card {
			background: #FFFFFF;

			.info_tit {
				display: flex;
				flex-wrap: nowrap;
				padding: 22rpx 28rpx;

				.tit_left {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;

					image {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.tit_right {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: auto;
					font-weight: 400;
					font-size: 28rpx;
					color: #4C97E7;

					.yuan {
						margin-right: 12rpx;
						margin-top: 6rpx;
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background: #4C97E7;
					}
				}
			}

			.lines {
				width: 750rpx;
				height: 1rpx;
				border: 1rpx solid #E6E8EB;
			}

			.cont {
				padding: 26rpx 28rpx;

				.info_li {
					display: flex;
					flex-wrap: nowrap;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;

					span {
						color: #3D3D3D;
					}

					line-height: 48rpx;

					.half_infoli {
						display: flex;
						flex-wrap: nowrap;
						width: 50%;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
						white-space: nowrap;
						/* 禁止换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						span {
							color: #3D3D3D;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
						}

						.input {
							width: 30%;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.bot_box {
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 232rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);

			.step2 {
				padding: 42rpx 32rpx;
				display: flex;
				flex-wrap: wrap;
				// align-items: center;
				// flex-wrap: nowrap;
				width: 100%;
				height: 100%;

				.top {
					width: 100%;
					display: flex;

					.top_left {
						display: flex;
						flex-wrap: nowrap;
						font-weight: 400;
						font-size: 36rpx;
						color: #3D3D3D;

						image {
							width: 46rpx;
							height: 46rpx;
						}
					}

					.top_right {
						font-weight: 400;
						font-size: 36rpx;
						color: #3D3D3D;
						margin-left: auto;
					}
				}

				.bot_btn {

					display: flex;
					flex-wrap: wrap;

					width: 750rpx;

					background: #fff;
					// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);

					.btn:nth-child(4n) {
						margin-right: 0;
					}

					.btn {
						margin-right: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 164rpx;
						height: 66rpx;
						background: #E2F2FF;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #4C97E7;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
			}

			.step1 {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				width: 100%;
				height: 100%;

				.step1_left {
					font-weight: 400;
					font-size: 36rpx;
					color: #3D3D3D;

					span {
						color: #4C97E7;
					}
				}

				.right_box {
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 244rpx;
					height: 66rpx;
					background: #4C97E7;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #4C97E7;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.stause_box {
			background: #fff;
			padding: 44rpx 30rpx;
			display: flex;
			flex-wrap: nowrap;

			.stause_li {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;

				.icon-xiangxia1 {
					margin-left: 6rpx;
					font-size: 20rpx;
				}
			}
		}

		.tap {
			padding-top: 24rpx;
			width: 750rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			background: #fff;

			.tap_cont {
				text-align: center;
				padding-bottom: 15rpx;
				width: 200rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				border-bottom: 6rpx solid #fff;
			}

			.act1 {
				border-bottom: 6rpx solid #4C97E7;
				color: #4C97E7;
			}
		}
	}
</style>