<template>
	<div class="home-page">
		<div class="date-tabs">
			<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
				<el-tab-pane
					:label="'\u2002\u2002日\u2002\u2002'"
					name="日"></el-tab-pane>
				<el-tab-pane
					:label="'\u2002\u2002周\u2002\u2002'"
					name="周"></el-tab-pane>
				<el-tab-pane
					:label="'\u2002\u2002月\u2002\u2002'"
					name="月"></el-tab-pane>
				<el-tab-pane
					:label="'\u2002\u2002年\u2002\u2002'"
					name="年"></el-tab-pane>
			</el-tabs>
			<div class="current-date">( {{ showTime }} )</div>
			<div class="current-time">
				<span style="display: inline-block; margin-right: 16px">
					{{ topTime + timeZone }}
				</span>
				<span>{{ topDate }}</span>
			</div>
		</div>
		<el-row class="main-top" :gutter="16">
			<el-col :span="24" style="position: relative">
				<div class="title">
					<svg-icon icon-class="home-produce" />
					<span class="title-inner">生产总成本</span>
				</div>
				<el-row class="box">
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.priceS }}万元</div>
						<div class="unit-style">总计成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.matPriceS }}万元</div>
						<div class="unit-style">原料成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.energyPriceS }}万元</div>
						<div class="unit-style">能源成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.otherPriceS }}万元</div>
						<div class="unit-style">其他成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.ratioS }}</div>
						<div class="unit-style">综合良品率/%</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.areaPriceS }}元</div>
						<div class="unit-style">综合每平米成本</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" style="position: relative">
				<div class="title">
					<svg-icon icon-class="home-produce" />
					<span class="title-inner">原片成本</span>
				</div>
				<el-row class="box">
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.priceO }}万元</div>
						<div class="unit-style">原片总成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.matPriceO }}万元</div>
						<div class="unit-style">原料成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.energyPriceO }}万元</div>
						<div class="unit-style">能源成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.otherPriceO }}万元</div>
						<div class="unit-style">其他成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.ratioO }}</div>
						<div class="unit-style">原片良品率/%</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.areaPriceO }}元</div>
						<div class="unit-style">原片每平米成本</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" style="position: relative">
				<div class="title">
					<svg-icon icon-class="home-produce" />
					<span class="title-inner">深加工成本</span>
				</div>
				<el-row class="box">
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.priceD }}万元</div>
						<div class="unit-style">深加工总成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.energyPriceD }}万元</div>
						<div class="unit-style">能源成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.otherPriceD }}万元</div>
						<div class="unit-style">其他成本</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.ratioD }}</div>
						<div class="unit-style">深加工良品率/%</div>
					</el-col>
					<el-col :span="4" class="num-box shadow">
						<div class="num-style">{{ homeData.areaPriceD }}元</div>
						<div class="unit-style">深加工每平米成本</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row class="main-bottom" :gutter="16" v-if="false">
			<el-col :span="9">
				<div class="chart-wrapper">
					<line-chart :chart-data="lineChartData" />
				</div>
			</el-col>
			<el-col :span="7">
				<div class="chart-wrapper">
					<pie-chart />
				</div>
			</el-col>
			<el-col :span="8">
				<div class="chart-wrapper">
					<bar-chart />
				</div>
			</el-col>
		</el-row>
		<div
			class="main-footer"
			style="
				color: #c7c7c7;
				user-select: none;
				font-size: 14px;
				letter-spacing: 1px;
				height: 30px;
				display: grid;
				place-content: center;
			">
			&copy; 中建材智能自动化研究院有限公司
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import LineChart from '../dashboard/LineChart';
import PieChart from '../dashboard/PieChart';
import BarChart from '../dashboard/BarChart';
import PanelGroup from '../dashboard/PanelGroup';
import { getData } from '@/api/cost/allCost';

const lineChartData = {
	newVisitis: {
		expectedData: [100, 120, 161, 134, 105, 160, 165],
		actualData: [120, 82, 91, 154, 162, 140, 145],
	},
	messages: {
		expectedData: [200, 192, 120, 144, 160, 130, 140],
		actualData: [180, 160, 151, 106, 145, 150, 130],
	},
	purchases: {
		expectedData: [80, 100, 121, 104, 105, 90, 100],
		actualData: [120, 90, 100, 138, 142, 130, 130],
	},
	shoppings: {
		expectedData: [130, 140, 141, 142, 145, 150, 160],
		actualData: [120, 82, 91, 154, 162, 140, 130],
	},
};

export default {
	name: 'Home',
	mixins: [tableHeightMixin],
	components: {
		LineChart,
		PieChart,
		PanelGroup,
		BarChart,
	},
	computed: {
		gradientBackground() {
			return {
				'background-image':
					'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
				'background-size': '100px 100px', // 调整条纹的大小
			};
		},
	},
	data() {
		return {
			activeName: '日',
			topDate: '',
			topTime: '',
			timeZone: '',
			lineChartData: lineChartData.newVisitis,
			homeData: {},
			startTime:
				moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
				' 00:00:00',
			endTime:
				moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
				' 00:00:00',
		};
	},
	created() {
		this.getTime();
		this.handleClick();
		this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
		this.getData();
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	methods: {
		getData() {
			let listQuery = {
				//分页
				pageSize: 10,
				pageNo: 1,
				statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
				startTime: this.startTime,
				endTime: this.endTime,
			};
			getData(listQuery).then((response) => {
				this.homeData = response.data;
				for (let i in this.homeData) {
					this.homeData[i] = Number(this.homeData[i]).toFixed(2);
				}
			});
		},
		handleClick() {
			let start = Date.parse(new Date());
			let end = Date.parse(new Date());
			switch (this.activeName) {
				case '日':
					this.showTime = moment(new Date())
						.subtract(0, 'days')
						.format('YYYY-MM-DD');
					this.lineChartData = lineChartData.newVisitis;
					break;
				case '周':
					start = moment(new Date()).subtract(6, 'days').format('x');
					this.showTime =
						moment(new Date()).subtract(6, 'days').format('MM-DD') +
						' ~ ' +
						moment(new Date()).subtract(0, 'days').format('MM-DD');
					this.lineChartData = lineChartData.messages;
					break;
				case '月':
					start = moment(new Date()).subtract(1, 'month').format('x');
					this.showTime =
						moment(new Date()).subtract(1, 'month').format('MM-DD') +
						' ~ ' +
						moment(new Date()).subtract(0, 'days').format('MM-DD');
					this.lineChartData = lineChartData.purchases;
					break;
				case '年':
					start = moment(new Date()).subtract(1, 'year').format('x');
					this.showTime =
						moment(new Date()).subtract(1, 'year').format('YYYY') +
						' ~ ' +
						moment(new Date()).subtract(0, 'days').format('YYYY');
					this.lineChartData = lineChartData.shoppings;
					break;
				default:
					console.log(val);
			}
      this.getData()
		},
		getTime() {
			let _this = this;
			this.timer = setInterval(function () {
				_this.topDate = moment().format('YYYY.MM.DD');
				let temp = moment().format('A-hh:mm').split('-');
				_this.timeZone = temp[0];
				_this.topTime = temp[1];
			}, 1000);
		},
	},
};
</script>

<style lang="scss" scoped>
.home-page::before {
	background-image: url('~@/assets/img/home-bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(180deg);
}
.date-tabs {
	padding-left: 40px;
	padding-top: 20px;
	position: relative;
}
:deep(.date-tabs) {
	.el-tabs__header {
		margin-bottom: 8px;
		display: inline-block;
		transform: translateY(-12px);
	}

	.el-tabs__content {
		overflow: visible;
	}

	.el-tabs__item {
		font-size: 18px;
		color: #fff;
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: 36px !important;
		height: 36px;
	}
	.el-tabs__item.is-active {
		color: #0b58ff;
	}
}
.current-date {
	color: #fff;
	font-size: 18px;
	position: absolute;
	left: 260px;
	top: 14px;
}
.current-time {
	color: #fff;
	font-size: 18px;
	position: absolute;
	right: 38px;
	top: 14px;
}
.main-top {
	width: 100%;
	padding: 0 20px 0 40px;
	.title {
		position: absolute;
		left: 34px;
		top: 20px;
		width: 180px;
		font-size: 32px;
		z-index: 10;
		.title-inner {
			position: absolute;
			left: 42px;
			top: 5px;
			font-size: 24px;
		}
	}
	.box {
		background-color: #fff;
		border-radius: 24px;
		height: 192px;
		padding: 40px 24px 32px 24px;
		margin-bottom: 20px;
		box-shadow: 0 8px 8px 0 gray;
		.num-box {
			height: 120px;
			padding-top: 26px;
			text-align: center;
			.num-style {
				color: #000;
				font-size: 40px;
			}
			.unit-style {
				color: rgba(0, 0, 0, 0.7);
				font-size: 18px;
			}
		}
		.shadow {
			background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
		}
	}
}
.main-bottom {
	width: 100%;
	margin-top: 20px;
	.chart-wrapper {
		margin-left: 10px;
		height: 425px;
		background: #fff;
		border-radius: 5px;
		box-shadow: 0 3px 3px 0 gray;
	}
}
</style>
<style lang="scss">
.home-page {
	.el-progress-bar__inner {
		background-image: url('~@/assets/img/home-progress-bg.png');
		background-size: cover;
	}
}
</style>
