<template>
	<Container
		name="原料用量统计"
		size="middle"
		style="">
		<TimePrompt
			class="timeShow"
			:timestr="timestr" />
		<div style="flex: 1; display: flex; gap: 8px; flex-direction: column">
			<div
				class="absolute"
				style="
					flex: 2;
					padding: 12px 12px 0 12px;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-auto-rows: repeat(3, 1fr);
					gap: 8px;
				">
				<ShadowRect
					v-for="(item, index) in materialMsg"
					:key="index"
					:rounded="false">
					<div
						class="material"
						style="
							flex: 1;
							padding-bottom: 18px;
							padding-top: 18px;
							display: flex;
							flex-direction: column;
							gap: 4px;
							align-items: center;
							justify-content: center;
						">
						<span
							style="
								color: #0ee8e4;
								font-weight: 500;
								font-size: 32px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							">
							{{ item.materialUsed }}
						</span>
						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
							- {{ item.materialName }}/kg-
						</span>
					</div>
				</ShadowRect>
			</div>
		</div>
	</Container>
</template>

<script>
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';
export default {
	name: 'MaterialCost',
	components: { Container, ShadowRect, TimePrompt },
	props: {},
	data() {
		return {
			timestr: '',
		};
	},
	computed: {
		materialMsg() {
			return this.$store.state.websocket.material;
		},
	},
	mounted() {
		this.timestr = switchShowTime('日');
	},
	methods: {},
};
</script>

<style lang="scss" scoped>
.timeShow {
	position: absolute;
	top: 20px;
	left: 210px;
}
</style>
