<template>
	<a-card title="环境监测" :bordered="false" style="margin-bottom: 10px">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="4">
					<a-form-item label="安装位置" name="pigpenId">
						<a-tree-select
							v-model:value="searchFormState.pigpenId"
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择"
							allow-clear
							tree-default-expand-all
							:tree-data="treeData"
							:field-names="{
								children: 'children',
								label: 'buildName',
								value: 'id'
							}"
							selectable="false"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-button type="primary" @click="search">
						<template #icon><SearchOutlined /></template>
						查询
					</a-button>
				</a-col>
			</a-row>
		</a-form>
		<a-tabs v-model:activeKey="activeKey" type="card">
			<a-tab-pane v-for="item in tabList" :key="item.pigpenId" :tab="item.location">
				<div class="box">
					<a-row :gutter="16">
						<a-col span="8">
							<div class="box_item">
								<div class="item_lg">
									<div class="lg_img">
										<img src="../../../assets/images/monitor/temp.png" alt="/">
									</div>
									<div class="lg_num"><strong>{{ item.temp }}</strong>℃</div>
								</div>
								<div class="item_lg">
									<div class="lg_img">
										<img src="../../../assets/images/monitor/hum.png" alt="/">
									</div>
									<div class="lg_num"><strong>{{ item.hum }}</strong>RH</div>
								</div>
							</div>
						</a-col>
						<a-col span="16">
							<div class="box_item">
								<a-row :guttle="16" align="middle">
									<a-col :span="2" v-for="k in item.list" :key="k">
										<div class="item_box">
											<template v-if="k.deviceType === 0">
												<div :class="['item_icon', k.deviceStatus === 1 ? 'fan_select' : 'fan']"></div>
											</template>
											<template v-else-if="k.deviceType === 1">
												<div :class="['item_icon', k.deviceStatus === 1 ? 'shui_select' : 'shui']"></div>
											</template>
										</div>
									</a-col>
								</a-row>
							</div>
						</a-col>
					</a-row>
				</div>
			</a-tab-pane>
		</a-tabs>
	</a-card>
	<a-card title="环境曲线" :bordered="false">
		<template #extra>
			<div class="extra">
				<a-row :gutter="10" align="middle">
					<a-col :span="2">
						<div :class="['cursor', active === 0 ? 'isActive' : '']" @click="cut(0)">今日</div>
					</a-col>
					<a-col :span="2">
						<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">本周</div>
					</a-col>
					<a-col :span="2">
						<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本月</div>
					</a-col>
					<a-col :span="10">
						<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-col>
					<a-col :span="8">
						<a-space :size="10">
							<a-button type="primary" @click="searchChart">
								<template #icon><SearchOutlined /></template>
								查询
							</a-button>
							<a-button @click="reset">重置</a-button>
						</a-space>
					</a-col>
				</a-row>
			</div>
		</template>
		<div class="chart_content">
			<chartTemp v-if="chartData.list.length > 0" :id="0" :data="chartData"></chartTemp>
			<a-empty v-else />
		</div>
	</a-card>
</template>

<script setup name="monitor">
	import bizHouseApi from "@/api/biz/bizHouseApi"
	import bizMonitorApi from "@/api/biz/bizMonitorApi"
	import dayjs from "dayjs"
	import chartTemp from './charts/chartTemp.vue'
	const searchFormRef = ref()
	const searchFormState = ref({})
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const show = ref(true)

	const treeData = ref([])
	const initHouse = async () => {
		await bizHouseApi.basePigpenTree().then((res) => {
			treeData.value = res
			searchFormState.value.pigpenId = res[0].id
		})
	}

	const activeKey = ref()
	const active = ref(0)
	const date = ref([])
	const tabList = ref([])
	const search = async () => {
		await bizMonitorApi.getMonitorList(searchFormState.value).then((res) => {
			tabList.value = res
			activeKey.value = res[0]?.pigpenId
		})
		if(activeKey.value) {
			searchChart()
		} else {
			chartData.value.list = []
		}
	}

	watch(activeKey, (val) => {
		if (val) {
			searchChart()
		}
	})

	const chartData = ref({
		location: '',
		list: []
	})
	const searchChart = async () => {
		let params = {
			pigpenId: activeKey.value,
			type: active.value,
			startDate: active.value === 3 ? date.value[0] : '',
			endDate: active.value === 3 ? date.value[1] : ''
		}
		await bizMonitorApi.getMonitorChart(params).then((res) => {
			if (res.list.length > 0) {
				res.list.forEach((item) => {
					if (active.value === 0) {
						item.time = dayjs(item.createTime).format('HH:mm')
					} else {
						item.time = dayjs(item.createTime).format('MM-DD')
					}
				})
			}
			chartData.value = res
		})
	}

	const reset = () => {
		active.value = 0
		date.value = []
		searchChart()
	}

	const cut = (val) => {
		if (active.value === val) {
			return
		} else {
			active.value = val
			if(active.value < 3) {
				date.value = []
			}
		}
	}
	watch(date, (newVal) => {
		if (newVal.length > 0) {
			active.value = 3
		}
	})
	onMounted(async () => {
		await initHouse()
		await search()
	})

</script>

<style scoped>
	.box {
		width: 100%;
		height: 200px;
	}
	.box_item {
		width: 100%;
		height: 200px;
		box-sizing: border-box;
		border: 1px solid #ddd;
	}
	.item_lg {
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.lg_img {
		width: 48px;
		height: 48px;
	}
	.lg_img img {
		width: 100%;
		object-fit: cover;
	}
	.lg_num {
		font-size: 18px;
	}
	.lg_num strong {
		font-size: 36px;
	}
	.extra {
		width: 600px;
	}
	.cursor {
		cursor: pointer;
	}
	.isActive {
		color: #1890ff;
	}

	.chart_content {
		width: 100%;
		height: 400px;
	}
	.item_box {
		width: 100%;
		height: 100px;
		position: relative;
	}
	.item_icon {
		width: 50px;
		height: 50px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.fan_select {
		background: url("../../../assets/images/monitor/fan_select.png") no-repeat;
		background-size: 100% 100%;
	}
	.fan {
		background: url("../../../assets/images/monitor/fan.png") no-repeat;
		background-size: 100% 100%;
	}
	.shui_select {
		background: url("../../../assets/images/monitor/lian_select.png") no-repeat;
		background-size: 100% 100%;
	}
	.shui {
		background: url("../../../assets/images/monitor/lian.png") no-repeat;
		background-size: 100% 100%;
	}
</style>
