<template>
	<a-card title="栋舍水电能耗分布" :bordered="false" style="margin-bottom: 10px">
		<template #extra>
			<a-space :size="30">
				<div :class="['cursor', active === 0 ? 'isActive' : '']" @click="cut(0)">本周</div>
				<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">本月</div>
			</a-space>
		</template>
		<a-row :gutter="16">
			<a-col :span="12">
				<a-card title="用水占比">
					<div class="chart_content">
						<div class="chart_position">
							<div class="chart_title">{{active === 0 ? '本周': '本月'}}累计用水量</div>
							<div class="chart_num"><strong>{{waterTotal}}</strong>吨</div>
							<div class="chart_flex">
								<div class="text-right">{{active === 0 ? '周': '月'}}环比</div>
								<div class="flex_item">
									<caret-up-outlined v-if="waterOn > 0 " style="color: green" />
									<caret-down-outlined v-else style="color: red" />
								</div>
								<div class="text-left">{{waterOn > 0 ? waterOn : -waterOn}}%</div>
							</div>
						</div>
						<chartWater v-if="waterList.length > 0" :id="0" :list="waterList"></chartWater>
					</div>
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card title="用电占比">
					<div class="chart_content">
						<div class="chart_position">
							<div class="chart_title">{{active === 0 ? '本周': '本月'}}累计用电量</div>
							<div class="chart_num"><strong>{{eleTotal}}</strong>kw·h</div>
							<div class="chart_flex">
								<div class="text-right">{{active === 0 ? '周': '月'}}环比</div>
								<div class="flex_item">
									<caret-up-outlined v-if="eleOn > 0" style="color: green" />
									<caret-down-outlined v-else style="color: red" />
								</div>
								<div class="text-left">{{ eleOn > 0 ? eleOn : -eleOn }}%</div>
							</div>
						</div>
						<chartEle v-if="eleList.length > 0" :id="0" :list="eleList"></chartEle>
					</div>
				</a-card>
			</a-col>
		</a-row>
	</a-card>
	<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" align="middle">
				<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: 'name',
								value: 'id'
							}"
							selectable="false"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', activeWater === 0 ? 'isActive' : '']" @click="cutWater(0)">今日</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', activeWater === 1 ? 'isActive' : '']" @click="cutWater(1)">本周</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', activeWater === 2 ? 'isActive' : '']" @click="cutWater(2)">本月</div>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item>
						<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item>
						<a-space>
							<a-button type="primary" @click="searchWater">查询</a-button>
							<a-button @click="resetWater">重置</a-button>
						</a-space>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<div class="border"></div>
		<a-row :gutter="20">
			<a-col :span="18">
				<div class="chart_content_max">
					<chartBar v-if="waterData.list.length > 0" :id="0" :data="waterData"></chartBar>
					<a-empty v-else style="padding-top: 100px"  />
				</div>
			</a-col>
			<a-col :span="6">
				<div class="chart_content_max">
					<h3 class="line_title">单元用水量排名TOP6</h3>
					<template v-if="waterRank.length > 0">
						<a-row v-for="(item, i) in waterRank" justify="space-around" style="margin-bottom: 20px" align="middle">
							<a-col :span="1">
								<div :class="['box', 'box' + (i+1)]">{{i+1}}</div>
							</a-col>
							<a-col :span="12">{{item.location}}</a-col>
							<a-col :span="6">{{item.energyWaterValue}}吨</a-col>
						</a-row>
					</template>
					<template v-else>
						<a-empty style="padding-top: 100px"  />
					</template>
				</div>
			</a-col>
		</a-row>
	</a-card>
	<a-card title="用电量趋势" :bordered="false" style="margin-bottom: 10px">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormEle">
			<a-row :gutter="24" align="middle">
				<a-col :span="4">
					<a-form-item label="栋舍" name="pigpenId">
						<a-tree-select
							v-model:value="searchFormEle.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: 'name',
								value: 'id'
							}"
							selectable="false"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', activeEle === 0 ? 'isActive' : '']" @click="cutEle(0)">今日</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', activeEle === 1 ? 'isActive' : '']" @click="cutEle(1)">本周</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', activeEle === 2 ? 'isActive' : '']" @click="cutEle(2)">本月</div>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item>
						<a-range-picker v-model:value="time" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item>
						<a-space>
							<a-button type="primary" @click="searchEle">查询</a-button>
							<a-button @click="resetEle">重置</a-button>
						</a-space>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<div class="border"></div>
		<a-row :gutter="20">
			<a-col :span="18">
				<div class="chart_content_max">
					<chartBar v-if="eleData.list.length > 0" :id="1" :data="eleData"></chartBar>
					<a-empty v-else style="padding-top: 100px"  />
				</div>
			</a-col>
			<a-col :span="6">
				<div class="chart_content_max">
					<h3 class="line_title">单元用电量排名TOP6</h3>
					<template v-if="eleRank.length > 0">
						<a-row v-for="(item, i) in eleRank" justify="space-around" style="margin-bottom: 20px" align="middle">
							<a-col :span="1">
								<div :class="['box', 'box'+(i+1)]">{{i+1}}</div>
							</a-col>
							<a-col :span="12">{{item.location}}</a-col>
							<a-col :span="6">{{item.energyElectricityValue}}kw·h</a-col>
						</a-row>
					</template>
					<template v-else>
						<a-empty style="padding-top: 100px"  />
					</template>
				</div>
			</a-col>
		</a-row>
	</a-card>
</template>

<script setup name="count">
	import bizEnergyCountApi from "@/api/biz/energy/bizEnergyCountApi"
	import bizHouseApi from "@/api/biz/bizHouseApi";
	import chartEle from './chart/chartEle.vue'
	import chartWater from './chart/chartWater.vue'
	import chartBar from './chart/chartBar.vue'
	import dayjs from "dayjs";
	const active = ref(0)
	const searchFormRef = ref()
	const searchFormState = ref({})
	const searchFormEle = ref({})

	const waterList = ref([])
	const waterTotal = ref(0)
	const waterOn = ref(0)
	const eleList = ref([])
	const eleTotal = ref(0)
	const eleOn = ref(0)

	const initWaterPie = () => {
		let params = {
			type: active.value
		}
		bizEnergyCountApi.getWaterPie(params).then((res) => {
			waterList.value = res.list
			waterTotal.value = res.total
			waterOn.value = res.qoq
		})
	}

	const initElePie = () => {
		let params = {
			type: active.value
		}
		bizEnergyCountApi.getElePie(params).then((res) => {
			eleList.value = res.list
			eleTotal.value = res.total
			eleOn.value = res.qoq
		})
	}

	const cut = (val) => {
		if (active.value === val) {
			return
		} else {
			active.value = val
		}
		initWaterPie()
		initElePie()
	}

	const activeWater = ref(1)
	const activeEle = ref(1)
	const date = ref([])
	const time = ref([])
	const cutWater = (val) => {
		if (activeWater.value === val) {
			return
		} else {
			activeWater.value = val
			if(activeWater.value < 3) {
				date.value = []
			}
			searchWater()
		}
	}
	const cutEle = (val) => {
		if (activeEle.value === val) {
			return
		} else {
			activeEle.value = val
			if(activeEle.value < 3) {
				time.value = []
			}
			searchEle()
		}
	}

	watch(date, (newVal) => {
		if (newVal.length > 0) {
			activeWater.value = 3
		}
	})

	watch(time, (newVal) => {
		if (newVal.length > 0) {
			activeEle.value = 3
		}
	})

	const waterData = ref({
		name: '',
		list: [],
		unit: '吨',
		color: '#5E9FFE'
	})

	const eleData = ref({
		name: '',
		list: [],
		unit: 'kw·h',
		color: '#4DCBCB'
	})

	const initWaterChart = () => {
		let params = {
			type: activeWater.value,
			startDate: date.value.length > 0 ? date.value[0] : '',
			endDate: date.value.length > 0 ? date.value[1] : ''
		}
		bizEnergyCountApi.getWaterChart(Object.assign(params, searchFormState.value)).then((res) => {
			waterData.value.name = res.location
			if (res.list.length > 0) {
				res.list.forEach((item) => {
					if (activeWater.value == 0) {
						item.time = dayjs(item.createTime).format('HH:mm')
					} else {
						item.time = dayjs(item.createTime).format('MM-DD')
					}
					item.value = item.waterValue
				})
			}
			waterData.value.list = res.list
		})
	}

	const initEleChart = () => {
		let params = {
			type: activeEle.value,
			startDate: time.value.length > 0 ? time.value[0] : '',
			endDate: time.value.length > 0 ? time.value[1] : ''
		}
		bizEnergyCountApi.getEleChart(Object.assign(params, searchFormEle.value)).then((res) => {
			eleData.value.name = res.location
			if (res.list.length > 0) {
				res.list.forEach((item) => {
					if (activeEle.value == 0) {
						item.time = dayjs(item.createTime).format('HH:mm')
					} else {
						item.time = dayjs(item.createTime).format('MM-DD')
					}
					item.value = item.electricityValue
				})
			}
			eleData.value.list = res.list
		})
	}

	const searchWater = () => {
		initWaterChart()
		initWaterRank()
	}
	const resetWater = () => {
		searchFormState.pigpenId = ''
		activeWater.value = 0
		date.value = []
		initWaterChart()
		initWaterRank()
	}

	const searchEle = () => {
		initEleChart()
		initEleRank()
	}

	const resetEle = () => {
		searchFormEle.pigpenId = ''
		activeEle.value = 0
		time.value = []
		searchEle()
	}

	const treeData = ref([])
	const initHouse = async () => {
		bizHouseApi.basePigpenTree().then((res) => {
			treeData.value = res
		})
	}

	// 排名
	const waterRank = ref([])
	const initWaterRank = () => {
		let params = {
			type: activeWater.value,
			startDate: date.value.length > 0 ? date.value[0] : '',
			endDate: date.value.length > 0 ? date.value[1] : ''
		}
		bizEnergyCountApi.getWaterRank(params).then((res) => {
			waterRank.value = res
		})
	}
	const eleRank = ref([])
	const initEleRank = () => {
		let params = {
			type: activeEle.value,
			startDate: time.value.length > 0 ? time.value[0] : '',
			endDate: time.value.length > 0 ? time.value[1] : ''
		}
		bizEnergyCountApi.getEleRank(params).then((res) => {
			eleRank.value = res
		})
	}

	onMounted(() => {
		initHouse()
		initWaterPie()
		initElePie()
		initWaterRank()
		initEleRank()
	})
</script>

<style scoped>
	.cursor {
		cursor: pointer;
	}
	.isActive {
		color: #1890ff;
	}

	.chart_content {
		width: 100%;
		height: 300px;
		position: relative;
	}
	.chart_position {
		width: 180px;
		height: 160px;
		position: absolute;
		/*background: red;*/
		z-index: 99;
		top: 54%;
		left: 30%;
		transform: translate(-50%, -50%);
		text-align: center;
		box-sizing: border-box;
		padding: 20px 0;
	}
	.chart_title {
		color: #A6A6A6;
		margin-bottom: 10px;
	}
	.chart_num {
		margin-bottom: 10px;
	}
	.chart_num strong {
		font-size: 28px;
	}
	.chart_flex {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.flex_item {
		flex: 1;
	}
	.text-right {
		flex: 2;
		text-align: right;
	}
	.text-left {
		flex: 2;
		text-align: left;
	}
	.border {
		width: 100%;
		height: 1px;
		background: #ddd;
	}
	.chart_content_max {
		width: 100%;
		height: 400px;
	}
	.line_title {
		box-sizing: border-box;
		padding-top: 10px;
		margin-bottom: 20px;
	}

	.box {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		background: #F0F2F5;
	}
	.box1 {
		background: #1890ff;
	}
	.box2 {
		background: #00ff80;
	}
	.box3 {
		background: #00ffff;
	}
</style>
