<template>
	<a-card title="母猪信息" style="margin-bottom: 10px">
		<template #extra>
			<a-button type="primary" @click="back">返回</a-button>
		</template>
		<a-row :gutter="20">
			<a-col :span="8">
				耳标号：{{id}}
			</a-col>
			<a-col :span="8">
				日龄：{{dayAge}}
			</a-col>
			<a-col :span="8">
				位置：{{unitName}}
			</a-col>
		</a-row>
	</a-card>
	<a-card title="采食曲线" style="margin-bottom: 10px">
		<a-row :gutter="16" align="middle">
			<a-col :span="1">
				<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">今日</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本周</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 3 ? 'isActive' : '']" @click="cut(3)">本月</div>
			</a-col>
			<a-col :span="4">
				<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
			</a-col>
			<a-col :span="4">
				<a-button type="primary" @click="search">
					<template #icon><SearchOutlined /></template>
					查询
				</a-button>
			</a-col>
		</a-row>
		<div class="chart_content">
			<chart-pig-chart :id="0" :data="{ name: id, unit: 'Kg', list: feedList }"></chart-pig-chart>
		</div>
	</a-card>
	<a-card title="体温曲线" style="margin-bottom: 10px">
		<a-row :gutter="16" align="middle">
			<a-col :span="1">
				<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">今日</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本周</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 3 ? 'isActive' : '']" @click="cut(3)">本月</div>
			</a-col>
			<a-col :span="4">
				<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
			</a-col>
			<a-col :span="4">
				<a-button type="primary" @click="search">
					<template #icon><SearchOutlined /></template>
					查询
				</a-button>
			</a-col>
		</a-row>
		<div class="chart_content">
			<chart-pig-chart :id="1" :data="{ name: id, unit: '℃', list: tempList }"></chart-pig-chart>
		</div>
	</a-card>
	<a-card title="活跃度曲线" style="margin-bottom: 10px">
		<a-row :gutter="16" align="middle">
			<a-col :span="1">
				<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">今日</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本周</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 3 ? 'isActive' : '']" @click="cut(3)">本月</div>
			</a-col>
			<a-col :span="4">
				<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
			</a-col>
			<a-col :span="4">
				<a-button type="primary" @click="search">
					<template #icon><SearchOutlined /></template>
					查询
				</a-button>
			</a-col>
		</a-row>
		<div class="chart_content">
			<chart-pig-chart :id="2" :data="{ name: id, unit: '', list: actList }"></chart-pig-chart>
		</div>
	</a-card>
	<a-card title="膘体曲线" style="margin-bottom: 10px">
		<a-row :gutter="16" align="middle">
			<a-col :span="1">
				<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">今日</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本周</div>
			</a-col>
			<a-col :span="1">
				<div :class="['cursor', active === 3 ? 'isActive' : '']" @click="cut(3)">本月</div>
			</a-col>
			<a-col :span="4">
				<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
			</a-col>
			<a-col :span="4">
				<a-button type="primary" @click="search">
					<template #icon><SearchOutlined /></template>
					查询
				</a-button>
			</a-col>
		</a-row>
		<div class="chart_content">
			<chart-pig-chart :id="3" :data="{ name: id, unit: 'mm', list: dayList }"></chart-pig-chart>
		</div>
	</a-card>
</template>

<script setup name="pigDetail">
	import { useRouter, useRoute } from "vue-router"
	import bizFeedPigApi from "@/api/biz/feed/bizFeedPigApi"
	import dayjs from "dayjs"
	import chartPigChart from '../chart/chartPigChart.vue'

	const route = useRoute()
	const router = useRouter()

	const id = ref('')
	const dayAge = ref('')
	const unitName = ref('')

	const back = () => {
		router.back()
	}

	const active = ref(1)
	const cut = (val) => {
		if (active.value === val) {
			return
		} else {
			active.value = val
		}
	}
	const date = ref([])
	watch(date, (newVal) => {
		if (newVal.length > 0) {
			active.value = 4
		}
	})
	const feedList = ref([])
	const initFeed = () => {
		let params = {
			dataType: 1,
			eartagNum: id.value,
			timeType: active.value,
			startTime: date.value.length > 0 ? date.value[0] : '',
			endTime: date.value.length > 0 ? date.value[1] : ''
		}
		bizFeedPigApi.getPigChart(params).then((res) => {
			res.forEach(item => {
				if (active.value === 1) {
					item.time = dayjs(item.createDate).format('HH:mm')
				} else {
					item.time = dayjs(item.createDate).format('MM-DD')
				}
			})
			feedList.value = res
		})
	}
	const tempList = ref([])
	const initTemp = () => {
		let params = {
			dataType: 2,
			eartagNum: id.value,
			timeType: active.value,
			startTime: date.value.length > 0 ? date.value[0] : '',
			endTime: date.value.length > 0 ? date.value[1] : ''
		}
		bizFeedPigApi.getPigChart(params).then((res) => {
			res.forEach(item => {
				if (active.value === 1) {
					item.time = dayjs(item.createDate).format('HH:mm')
				} else {
					item.time = dayjs(item.createDate).format('MM-DD')
				}
			})
			tempList.value = res
		})
	}
	const actList = ref([])
	const initAct = () => {
		let params = {
			dataType: 3,
			eartagNum: id.value,
			timeType: active.value,
			startTime: date.value.length > 0 ? date.value[0] : '',
			endTime: date.value.length > 0 ? date.value[1] : ''
		}
		bizFeedPigApi.getPigChart(params).then((res) => {
			res.forEach(item => {
				if (active.value === 1) {
					item.time = dayjs(item.createDate).format('HH:mm')
				} else {
					item.time = dayjs(item.createDate).format('MM-DD')
				}
			})
			actList.value = res
		})
	}
	const dayList = ref([])
	const initDay = () => {
		let params = {
			dataType: 4,
			eartagNum: id.value,
			timeType: active.value,
			startTime: date.value.length > 0 ? date.value[0] : '',
			endTime: date.value.length > 0 ? date.value[1] : ''
		}
		bizFeedPigApi.getPigChart(params).then((res) => {
			res.forEach(item => {
				if (active.value === 1) {
					item.time = dayjs(item.createDate).format('HH:mm')
				} else {
					item.time = dayjs(item.createDate).format('MM-DD')
				}
			})
			dayList.value = res
		})
	}
	const search = () => {
		initFeed()
		initTemp()
		initAct()
		initDay()
	}
	onMounted(() => {
		id.value = route.query.id
		dayAge.value = route.query.dayAge
		unitName.value = route.query.unitName
		search()
	})
</script>

<style scoped>
	.chart_content {
		width: 100%;
		height: 400px;
	}
	.cursor {
		cursor: pointer;
	}
	.isActive {
		color: #1890ff;
	}
</style>
