<template>
	<view>
		<u-search placeholder="请输入摄像机名称或者编码" v-model="keyword" @change="change"></u-search>
		<view class="tagsList">
			<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
				<u-tag :text="item.type==''?'全部':item.type"  :type="item.checked?'success':'info'" :name="index" @click="radioClick(index)">
				</u-tag>
			</view>
		</view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" default-page-no="0">
			<view v-for="(item,index) in dataList" class="cameraItem">
				<u-swipe-action @click="swiperActionClick" :options="options" :index="index"
					@content-click="contentClick">
					<view>
						<view class="cameraItemLi">
							<view>设备编号：</view>
							<view>{{item.number}}</view>
						</view>
						<view class="cameraItemLi">
							<view>设备类型：</view>
							<view>{{item.type}}</view>
						</view>
						<view class="cameraItemLi">
							<view>经度：</view>
							<view v-if="item.longitude">{{item.longitude}}</view>
							<view class="unKnow" v-if="!item.longitude">空</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
		</z-paging>

	</view>
</template>

<script>
	import config from "../../libs/config/config.js"
	export default {
		data() {
			return {
				radios: [{
						checked: true,
						type:''
					},
					{
						checked: false,
						type:'变焦枪机'
					},
					{
						checked: false,
						type:'高清固定摄像机'
					},{
						checked: false,
						type:'标清固定摄像机'
					},{
						checked: false,
						type:'高清云台摄像机'
					},{
						checked: false,
						type:'标清云台摄像机'
					},{
						checked: false,
						type:'消防栓'
					},{
						checked: false,
						type:'消防炮'
					},{
						checked: false,
						type:'泡沫栓'
					},{
						checked: false,
						type:'炮栓一体'
					},{
						checked: false,
						type:'手动报警器'
					},{
						checked: false,
						type:'消防器材箱'
					},
				],
				keyword: '',
				dataList: [],
				type:'',
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
			}
		},
		onShow() {
			//this.$refs.paging.reload();
		},
		onLoad() {},
		methods: {
			contentClick(index) {
				if (this.dataList[index].isDelete) {
					uni.showToast({
						icon: "none",
						title: "当前设备已被删除"
					})
					return;
				}
				this.clickAction(this.dataList[index])
				console.log("=====================contentClick：", index)
			},
			swiperActionClick(index, index1) {
				if (this.dataList[index].isDelete) {
					uni.showToast({
						icon: "none",
						title: "当前设备已被删除"
					})
					return;
				}
				if (index1 == 0) {
					console.log("编辑")
					let url = "../addEquip/addEquip?cameara=" + JSON.stringify(this.dataList[index])
					uni.navigateTo({
						url: url
					});
				}
				if (index1 == 1) {
					console.log("删除")
					console.log(this.dataList[index])
					this.delete(index)
				}
				console.log("=============index:", index)
				console.log("=============index1:", index1)
			},
			delete(index) {
				this.$u.post(config.api + '/delete', {
					id: this.dataList[index].id
				}).then(res => {
					if (res.status = "success") {
						uni.showToast({
							icon: "none",
							title: "操作成功"
						})
						this.dataList[index].isDelete = true;
						this.$refs.paging.reload();
					}

				});
			},
			queryList(pageNo, pageSize) {

				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				this.$u.post(config.api + '/xfhrshInternet/service/selfireFacilities', {
					type: this.type,
					number: this.keyword,
					page: String(parseFloat(pageNo) + 1),
					row: String(pageSize),
				}).then(res => {
					console.log(typeof res)
					console.log(res)
					this.$refs.paging.complete(res.data);
				});
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			clickAction(item) {
				this.$store.dispatch('setCurrentEquip', {data: item})
				
				uni.$emit('updateCamera', {
					cameara: item
				})
				uni.navigateBack()
			},
			change(value) {
				this.keyword = value;
				this.$refs.paging.reload();
			},
			getData(key = "") {
				this.$u.post(config.api + '/camera_list', {
					keyword: this.keyword,
					pageNum: 0,
					pageSize: 10,
				}).then(res => {
					this.camera_list = res;
				});
			},
			radioClick(name) {
				console.log("==============name:",name)
				this.radios.map((item, index) => {
					if(index === name){
						item.checked = true 
						this.type = item.type;
						this.$refs.paging.reload();
					}else{
					    item.checked = false 	
					}
					
				})
			},
		}
	}
</script>

<style lang="scss">
	.tagsList{
		display: flex;
		flex-wrap: wrap;
	}
	.z-paging-content {
		margin-top: 250rpx;
	}

	.cameraItem {
		margin: 0 24rpx;
		margin-top: 30rpx !important;
		border: 1px solid #A3A8A8;
		border-radius: 10rpx;
		padding: 10rpx;

		.cameraItemLi {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.unKnow {
				color: red;
			}
		}
	}
</style>
