<template>
	<view class="divListBody">
		<view style="margin-bottom: 15rpx;">
			<uni-row>
				<uni-col :span="16">
					<bikeCodeScan :codeValue="scancode" @scan-change="getscanCode"></bikeCodeScan>
				</uni-col>
				<uni-col :span="8" >
					<button type="primary" size="mini" @click="addData" style="line-height: 65rpx;">添加车辆</button>
				</uni-col>
			</uni-row>
		</view>
		<view class="divHead">
			<label >车辆列表</label>
		</view>
		<view>
			<uni-card v-for="(item,index) in arrData">
				<uni-row>
					<uni-col :span="colspan[0]">
						<label class="divRowTitle">车辆编号:</label>
					</uni-col>
					<uni-col :span="colspan[1]">
						<view class="divRowValue">
							<label class="fontBlue">{{item.bikeCode}}</label>
							<label style="padding-left: 10px;">{{item.state}}</label>
							<label style="float: right;font-size:2rem;" @click="delData(index)">
								<uni-icons type="closeempty" color="black"></uni-icons>
							</label>
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="colspan[0]">
						<label class="divRowTitle">中控编号:</label>
					</uni-col>
					<uni-col :span="colspan[1]">
						<label class="divRowValue">{{item.ecuCode}}</label>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="colspan[0]">
						<label class="divRowTitle">定位时间:</label>
					</uni-col>
					<uni-col :span="colspan[1]">
						<label class="divRowValue">{{item.positionAt}}</label>
					</uni-col>
				</uni-row>

			</uni-card>
		</view>
		<!-- <view style="position: absolute;bottom: 10px; width: 100%;padding:0px 15px;">
			<div class="b-btn-blue" style="text-align: center;" @click="unbind">确定解绑</div>
		</view> -->
	</view>
	<view class="nav-panel">
		<c-uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import * as tools from "@/utils/tools.js";
	export default {
		data() {
			return {
				colspan: [6, 17],
				scancode:"",
				arrData: [],
				navButtonGroup:[{
					text: '确定解绑',
					backgroundColor: '#0078D4',
					color: '#fff',
					disable: false
				}]
			}
		},
		methods:{
			//二维码
			getscanCode(res){
				this.scancode=res;
			},
			//添加中控
			addData(){
				const{scancode,arrData}=this;
				if(scancode==""){
					tools.showModelMessage("请填写车辆编号或扫车辆二维码！");
					return;
				}
				api.callEbikeInfo("getBikeINfoData?bikeCode="+scancode).then((res)=>{
					const{data,message}=res;
					if(data){
						arrData.splice(0,0,data);
						this.scancode="";
					}
					else{
						tools.showModelMessage(message);
					}
				});
			},
			delData(index){
				this.arrData.splice(index,1);
			},
			//解绑
			unbind(){ 
				const{arrData}=this;
				if(!arrData||arrData.length==0){
					tools.showModelMessage("请添加车辆！");
					return;
				}
				tools.showModelMessage("确认解绑中控？",null,true).then(res=>{
					const params=arrData.map(item=>{
						return item.bikeId
					})
					api.callEbikeInfo("untieEcu",params).then((res)=>{
						const{data,message}=res;
						if(data){
							this.arrData=[];
							this.scancode="";
						}
						else{
							tools.showModelMessage(message);
						}
					});
				});
				
			},
			navButtonClick(e){
				const index = e.index;
				if(index == 0){
					this.unbind();
				}
			}
		}

	}
</script>

<style>
	@import url("ecuunbind.css");
</style>