<template>
	<div class="health-day-info">
		<div class="body">
			<div class="left">
				<div class="header">
					<span class="herder-info">
						对标排名分析
					</span>
				</div>
				<div class="chart-body">
					<normal-radar-chart :height="'500px'" :value="radarValue" />
				</div>
			</div>
			<div class="left">
				<div class="header">
					<span class="herder-info">
						基础指标
					</span>
				</div>
				<table class="table-form">
					<tr>
						<td class="white">指标</td>
						<td class="white">{{windNum}}</td>
						<td class="white">{{windNum2}}</td>
					</tr>
					<tr v-for="item in tabs">
						<td class="white">{{item.name}}</td>
						<td class="white">{{item.windData1}}</td>
						<td class="white">{{item.windData2}}</td>
					</tr>
				</table>
			</div>

		</div>
		<div class="body">
			<div style="width: 100%;">
				<div class="header">
					<span class="herder-info">
						损失电量分析
					</span>
				</div>
				<div class="chart-body">
					<multiple-bar-chart height="240px" :list="analyisDialog" :customerTooltip="true" @tooltip="tooltip"
						:units='["(万KWh)"]' />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
	import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
	export default {
		components: {
			NormalRadarChart,
			MultipleBarChart
		},
		props: {
			windNum: {
				type: String,
				default: '麻黄山24号风机',
			},
			windNum2: {
				type: String,
				default: '麻黄山2号风机',
			},
			radarValue: {
				type: Array,
				default: () => [{
					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率", "状态转换率"],
					data: [{
						value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000]
					}],
				}],
			},
			tabs: {
				type: Array,
				default: () => [{
					name: "发电量",
					windData1: 1,
					windData2: 14
				}, {
					name: "故障损失电量",
					windData1: 2,
					windData2: 13
				}, {
					name: "检修损失电量",
					windData1: 3,
					windData2: 12
				}, {
					name: "性能未达标损失电量",
					windData1: 4,
					windData2: 11
				}, {
					name: "受累损失电量",
					windData1: 5,
					windData2: 10
				}, {
					name: "风能利用率",
					windData1: 6,
					windData2: 9
				}, {
					name: "故障损失率",
					windData1: 7,
					windData2: 8
				}, {
					name: "检修损失率",
					windData1: 8,
					windData2: 7
				}, {
					name: "弃风率",
					windData1: 9,
					windData2: 6
				}, {
					name: "性能损失率",
					windData1: 10,
					windData2: 5
				}, {
					name: "受累损失率",
					windData1: 11,
					windData2: 4
				}, {
					name: "复位及时率",
					windData1: 12,
					windData2: 3
				}, {
					name: "消缺及时率",
					windData1: 13,
					windData2: 2
				}, {
					name: "状态转换率",
					windData1: 14,
					windData2: 1
				}],
			},
			analyisDialog: {
				type: Array,
				default: () => [{
					title: "故障损失电量",
					yAxisIndex: 0,
					value: [11, 22]
				}, {
					title: "检修损失电量",
					yAxisIndex: 0,
					value: [11, 22]
				}, {
					title: "性能损失电量",
					yAxisIndex: 0,
					value: [11, 22]
				}, {
					title: "限电损失电量",
					yAxisIndex: 0,
					value: [11, 22]
				}, {
					title: "受累损失电量",
					yAxisIndex: 0,
					value: [11, 22]
				}]
			},
		},
		methods: {
			tooltip(param, callback) {
				var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];

				var result = param[0].axisValue;
				param.forEach((value, index) => {
					result += "<br />" +
						`<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
						value.seriesName + "：" + value.value;
				});
				callback(result);
				return true;
			},
		}
	};
</script>

<style lang="less">
	.health-day-info {
		.header {
			display: flex;
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: fade(@gray, 60);
			color: @white;

			.herder-info {
				flex: 1 0 25%;
				text-align: center;
				font-size: @fontsize-s;

				&:last-child {
					flex: 1 0 50%;
				}
			}
		}

		.body {
			display: flex;

			.left {
				flex: 0 0 50%;

				display: flex;
				flex-direction: column;

				.chart-body {
					flex-grow: 1;
					display: flex;
					align-items: center;
				}
			}

			.right {
				flex: 0 0 50%;
			}
		}
	}
</style>
