<template>
	<view class="list-body">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="400rpx" leftText="算法布设"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="oplCate-info">
			<view class="uni-list-cell uni-list-cell-pd" v-for="row in dateList" :key="row.id" >
				<view>
					<view class="name">名称：{{row.name}}</view>
					<view class="name">标识:{{row.code}}</view>
					<view class="name">
						触发：
						<text v-if="row.trigger==10">监控</text>
						<text v-else-if="row.trigger==20">定位</text>
					</view>
					<view class="name">
						喇叭：
						<text v-if="row.speaker_on">已开</text>
						<text v-else>未开</text>
						<!-- <switch :checked="row.speaker_on" disabled="1"></switch> -->
					</view>
					<view class="name">
						喇叭区域：
						<text v-if="row.filter_area_level==10">办公生活区以上</text>
						<text v-else-if="row.filter_area_level==20">生产一般区以上</text>
						<text v-else-if="row.filter_area_level==30">生产重点区以上</text>
					</view>
					<button v-if="vuex_user.type=='employee'" type="primary" size="mini" @click="bindBtl(row)">批量布设</button>
					<!-- <button v-if="vuex_user.type=='employee'" type="primary" size="mini" @click="createNew(row)">新增布设</button> -->
				</view>
			</view>
		</view>
		<view id="detailWrap" v-if="detailLimited">
			<view class="workerContainer">
				<view style="font-size: 30upx;text-align: center;font-weight: 600;">新增布设</view>
				<view class="form-info">
					<view class="form-content ">
						<view class="form-item border-bottom">
							<view class="form-left">
								<text class="form-left-text">关联算法</text>
							</view>
							<view class="form-right">
								<uni-data-select v-model="formData.algo" :localdata="options">
								</uni-data-select>
							</view>
						</view>
						<view class="form-item border-bottom">
							<view class="form-left">
								<text class="form-left-text">监控相机</text>
							</view>
							<view class="form-right">
								<uni-data-select v-model="formData.vchannel" :localdata="vchanneloptions">
								</uni-data-select>
							</view>
						</view>
						<view class="form-item border-bottom">
							<view class="form-left">
								<text class="form-left-text">常开</text>
							</view>
							<view class="form-right">
								<switch :checked="formData.always_on"></switch>
							</view>
						</view>
						
					</view>
				</view>	
				<view class="btnsWrap">
					<view class="btns cancel" @click="closeWorkerDetail">取消</view>
					<view class="btns equit" @click="saveAlog">保存</view>
				</view>
			</view>
			<!-- <icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeWorkerDetail"/> -->
		</view>
	</view>
</template>
<script>
	export default {
		name: "myDateList",
		data() {
			return {	
				dateList: [],
				options:[],
				vchanneloptions:[],
				detailLimited:false,
				formData:{
					always_on:true
				}
			}
		},
	
		onShow() {
			// debugger;
			// console.log(this.vuex_perm)
			this.dateList = [];
			this.getVchannel();
			this.getDateLists();
		},
		methods: {
			//算法列表
			getDateLists(e) {
				let that = this;
				that.dateList =[];
				that.$u.api.eventCateList({page: 0})
						.then((res) => {
							that.dateList = res;
							
							let options = [];
							let obj = {};
							res.forEach(item => {
								obj = {
									value: null,
									text: ''
								};
								obj.value = item.id;
								obj.text = item.name;
								options.push(obj);
							})
							this.options = options
						});
				},
			//视频列表
			getVchannel() {
			  this.$u.api.tdevice({ type: 60, page: 0 }).then((res) => {
				  let vchannelOptions = [];
				  let obj = {};
				  res.forEach(item => {
				  	obj.value = item.id;
				  	obj.text = item.name;
				  	vchannelOptions.push(obj);
				  })
				  this.vchannelOptions = vchannelOptions
				  debugger;
				  console.log(vchannelOptions)
			  });
			},
			bindBtl(row){
				const params = `?algo=${row.id}`;
				uni.navigateTo({
					url: '/pages/my/alogadd'+params
				})
			},
			switchChange(e) {
				console.log(e,e.detail.value,'85');
				
			},
			
			createNew(){
				this.detailLimited=true;
			},
			saveAlog(){
				this.$u.api.algoCreate(this.formData).then((res) => {
					this.detailLimited=false;
				});
			},
			closeWorkerDetail(){
				this.detailLimited=false;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
	}

	.list-body {
		background-color: #f3fbff;
		padding-bottom: 20px;
		height: 100%;
		min-height:100vh;
	}

	.oplCate-info {
		width: 360px;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 5px;
		padding: 12px 16px;
		box-sizing: border-box;
		margin-top: 12px;
	}

	.oplCate-info-title {
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		border-bottom: 1upx solid #eeeeee;
		height: 70upx;
	}

	.row {
		padding: 10upx;
		margin-bottom: 20upx;
		border-bottom: 1upx solid #eeeeee;
	}

	.uni-list-cell {
		display: flex;
		padding: 10upx;
		padding: 30upx 0;
		justify-content: space-between;
		border-bottom: 1upx solid #eeeeee;
	}

	.uni-list-cell:last-child {
		border-bottom: 0;
	}

	.oplEditImg {
		width: 40rpx;
		height: 40upx;
		background-size: cover;
		background-image: url('@/static/workSpace/new_apply/update.png');
	}
	.oplAddImg {
		width: 40rpx;
		height: 40upx;
	}

	.add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		justify-content: center;
		align-items: center;
	}

	.btn {
		margin: auto;
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
		width: 70%;
	}

	.save-btn {
		height: 80rpx;
		color: #fff;
		font-size: 30upx;
		justify-content: center;
		align-items: center;
	}
	#detailWrap{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0,0,0,.3);
	}
	.workerContainer{
		background-color: #ffffff;
		width: 90%;
		margin: auto;
		position: absolute;
		top: 30%;
		left: 5%;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 20upx  20upx 100upx 20upx ;
	}
	.btnsWrap{
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 80upx;
		line-height: 80upx;
	}
	.btnsWrap>.btns{
		width: 50%;
		text-align: center;
		color: #aaaaaa;
		box-sizing: border-box;
		border-top: 1upx solid #eeeeee;
	}	
	.btnsWrap>.btns.equit{
		color:#e64340 ;
		border-left: 1upx solid #eeeeee;
	}
</style>
