<template>
	<!--人员信息管理 -->
	<a-card :bordered="false">
		<div style="cursor: pointer; width: 80px" @click="delCode"><left-outlined />返回</div>
		<br />

		<div class="box1">
			<div class="box2">
				<h3>粮食等级分类</h3>
				<Ecs width="550px" height="400px" :options="coclistA" @load="load" id="FoodsLineA" />
				<!-- <div ref="el" class="Echarts" style="width: 400px; height: 400px"></div> -->
			</div>
			<div class="box2">
				<h3>分品种库存统计</h3>
				<Ecs width="550px" height="400px" :options="coclistB" @load="load" id="FoodsLineB" />
			</div>
		</div>
		<br />
		<br />
		<div class="box3">
			<Ecs width="90%" height="400px" :options="coclistC" @load="load" id="FoodsLineC" />
		</div>
		<br />
		<br />
		<div class="box3">
			<h3>分品种库存统计</h3>
			<div class="acc_tac">
				<a-date-picker
					style="width: 250px"
					v-model:value="rotationYear"
					@change="rotationYearChange"
					picker="year"
					valueFormat="YYYY"
				/>
			</div>
			<Ecs width="90%" height="400px" :options="coclistD" @load="load" id="FoodsLineD" />
		</div>
	</a-card>
</template>
<script setup>
	import { required } from '@/utils/formRules'
	import { onMounted } from 'vue'
	import { reactive, ref, watch } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'
	import business from '@/api/daily/daily.js'
	import { isInteger } from '@/utils/validator'
	import { useaddA, useaddB, useaddC, useaddD } from './pink.js'
	import * as echarts from 'echarts'
	const router = useRouter()
	const route = useRoute()
	const formState = ref({})
	const code = ref(null)
	const codes = ref(null)
	watch(
		() => route.query.codeTTY,
		async (newVal) => {
			const codeDel = route.query.codeTTY
			if (codeDel == 1) {
				codes.value = true
				code.value = false
				// huiXian_managementDel()
			} else if (Boolean(route.query.codeTTY) == true) {
				codes.value = true
				code.value = true
				// await huiXian_managementDel()
			} else {
				codes.value = false
				code.value = false
			}
		},
		{ immediate: true, deep: true }
	)
	onMounted(() => {
		getList()
		listcoclistD({ tjnf: rotationYear.value })
	})
	const coclistA = ref({})
	const coclistB = ref({})
	const coclistC = ref({})
	const coclistD = ref({})

	const load = (v) => {
		// console.log(v)
	}

	const getList = async () => {
		const resA = await business.ZKSLA()
		let dataA = resA.map((item) => {
			return {
				value: item.TotalKilograms,
				name: item.GrainGrade
			}
		})
		function sortByName(a, b) {
			const nameOrder = ['一等', '二等', '三等', '四等', '五等', '六等', '七等', '八等']
			return nameOrder.indexOf(a.name) - nameOrder.indexOf(b.name)
		}
		let accA = dataA.sort(sortByName)
		const nameData = accA.map((item) => item.name)
		coclistA.value = useaddA(accA, nameData)
		//
		const resC = await business.ZKSLC()
		let dataC = resC.map((item) => {
			return item.TotalInventoryInTons
		})
		const nameDataC = resC.map((item) => item.Area)
		coclistC.value = useaddC(dataC, nameDataC)

		const resB = await business.ZKSstatisticsGrainVarietyNameB()
		const nameDataB = resB.map((item) => item.GrainVarietyName)
		let dataB = resB.map((item) => {
			return {
				value: item.TotalKilograms,
				name: item.GrainVarietyName
			}
		})
		coclistB.value = useaddB(dataB, nameDataB)
	}
	const rotationYear = ref('2024')

	const listcoclistD = async (v) => {
		const res = await business.ZKSstatisticsOurOrInD(v)
		let dataA = res[0].map.map((item) => {
			return item.sjjlsl
		})
		let dataB = res[1].map.map((item) => {
			return item.sjjlsl
		})
		const nameDataD = res.map((item) => item.name)
		let dataC = res[1].map.map((item) => {
			return item.month_number + '月'
		})
		coclistD.value = useaddD(
			{
				A: dataA,
				B: dataB
			},
			nameDataD,
			dataC
		)
		console.log(
			{
				A: dataA,
				B: dataB
			},
			nameDataD
		)
	}
	const rotationYearChange = (v) => {
		listcoclistD({ tjnf: v })
	}

	const delCode = () => {
		router.back()
	}
</script>
<style lang="less" scoped>
	.box1 {
		display: flex;
		// justify-content: center;
		.box2 {
			width: 550px;
			// text-align: center;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			margin-right: 150px;
		}
		.box3 {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.acc_tac {
		text-align: center;
	}
</style>
