<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<uni-card style="min-height: 300px;">
				<template v-slot:title>
					<view>
						<uni-data-checkbox v-model="label" :localdata="type_data" @change="change"></uni-data-checkbox>
					</view>
				</template>
				<uni-row>
					<uni-col v-for="(data,index) in equipment_data" :key="index" :xs="24" :md="12" :lg="6">
						<uni-card :title="data.equi_name" :extra="'秘钥：'+data.equi_key" style="height: 200px;">
							<uni-icons :type="data.equi_icon" :color="data.line_status=='online'?'#59ff67':'#767896'" size="100" class="equipment_button"></uni-icons>
							<uni-row style="padding-top: 100px;">
								<uni-col :span="6" align="center">
									<uni-icons type="eye"></uni-icons>
								</uni-col>
								<uni-col :span="6" align="center">
									<uni-icons type="compose"></uni-icons>
								</uni-col>
								<uni-col :span="6" align="center">
									<uni-icons type="link"></uni-icons>
								</uni-col>
								<uni-col :span="6" align="center">
									<uni-icons type="trash-filled"></uni-icons>
								</uni-col>
							</uni-row>
						</uni-card>
					</uni-col>
				</uni-row>
			</uni-card>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				label: "all",
				type_data: [{
						text: "全部设备",
						value: 'all'
					},
					{
						text: "在线设备",
						value: 'online'
					},
					{
						text: "离线设备",
						value: 'unline'
					}
				],
				equipment_data:[]
			}
		},
		onReady() {
			this.getEquipment()
		},
		methods: {
			getEquipment(){
				this.equipment_data=[
					{
						equi_name:"智能开关",
						line_status:'online',
						equi_key:"6848HUGN",
						equi_icon:"link"
					},
					{
						equi_name:"智能开关",
						line_status:'unline',
						equi_key:"6848HUGN",
						equi_icon:"link"
					},
					{
						equi_name:"智能开关",
						line_status:'online',
						equi_key:"6848HUGN",
						equi_icon:"link"
					},
					{
						equi_name:"智能开关",
						line_status:'online',
						equi_key:"6848HUGN",
						equi_icon:"link"
					},
					{
						equi_name:"智能开关",
						line_status:'online',
						equi_key:"6848HUGN",
						equi_icon:"link"
					}
				]
			},
			change(e) {
				console.log(this.label);
			}
		}
	}
</script>
<style>
	.equipment_button {
		position: absolute;
		left: 50%;
		/* 定位父级的50% */
		top: 50%;
		transform: translate(-50%, -50%);
		/*自己的50% */
	}

	.scroll-Y {
		height: calc(100vh - 68px);
	}
</style>
