<template>
	<view class="faultType">
		<company-header></company-header>
		<view class="faultType_main">
			<view class="flex justify-center">
				<view class="faultType_tab">
					<text v-for="(item,index) in faultTypeTabData" :key="index" @click="changefaultTypeTab(item)"
						:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
				</view>
			</view>
			<view class="gzcs" v-if="faultTypeTab === 'XT'">
				<view class="flex justify-between">
					<view class="gzcs_title flex justify-center">
						<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""></image>
						<text>故障次数</text>
					</view>
					<view class="yearTab">
						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
					</view>
				</view>
				<view class="qiun-chartsPie">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartDataXT" />
				</view>
				<view class="gzcs_data">
					<uni-row class="gzcs_data_row">
						<uni-col :span="12" v-for="(item,index) in faultTypeData" :key="index">
							<view class="gzcs_data_col flex">
								<view class="gzcs_data_col_left" :style="showColor(item)">
									<text>{{item.name}}</text>
								</view>
								<view class=" gzcs_data_col_right flex justify-between">
									<text>{{ item.num_of_warnings}}</text>
									<text>次</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="gzcs" v-else>
				<view class="flex justify-between">
					<view class="gzcs_title flex justify-center">
						<image src="../../static/jnImage/powerPage/cishu.png" mode=""></image>
						<text>故障次数</text>
					</view>
					<view class="yearTab">
						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
					</view>
				</view>
				<view class="qiun-chartsPie">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartDataJX" />
				</view>
				<view class="gzcs_data">
					<uni-row class="gzcs_data_row">
						<uni-col :span="12" v-for="(item,index) in faultTypeJXData" :key="index">
							<view class="gzcs_data_col flex">
								<view class="gzcs_data_col_left" :style="showColor(item)">
									<text>{{item.name}}</text>
								</view>
								<view class=" gzcs_data_col_right flex justify-between">
									<text>{{item.num_of_events}}</text>
									<text>次</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="heji flex">
					<view class="heji_img">
						<image src="../../static/jnImage/powerPage/heji.png" mode=""></image>
					</view>
					<view class="heji_msg flex justify-between">
						<view class="heji_msg_tit">
							<text>次数合计</text>
						</view>
						<view class="heji_msg_data flex justify-between">
							<text>{{jxgzcs}}</text>
							<text>次</text>
						</view>
					</view>
				</view>
			</view>
			<view class="wxss">
				<view class="flex justify-between">
					<view class="gzcs_title flex justify-center">
						<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""
							v-if="faultTypeTab === 'XT'"></image>
						<image src="../../static/jnImage/powerPage/wuxiang.png" mode="" v-else></image>
						<text>五项损失</text>
					</view>
					<view class="yearTab">
						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
					</view>
				</view>
				<view class="qiun-chartsPie">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartDatawxss" />
				</view>
				<view class="gzcs_data">
					<uni-row class="gzcs_data_row">
						<uni-col :span="12" v-for="(item,index) in wxssTypeData" :key="index">
							<view class="gzcs_data_col flex">
								<view class="gzcs_data_col_left" :style="showColor(item)">
									<text>{{item.name}}</text>
								</view>
								<view class=" gzcs_data_col_right flex justify-between">
									<text>{{item.data}}</text>
									<text>次</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import companyHeader from '../common/companyHeader.vue'
	import {
		bulletinappShutdowngsApi,
		bulletinappShutdowngsjxApi,
		bulletinappCompanylossesApi
	} from '../../api/type.js'
	export default {
		onLoad: function() {},
		components: {
			companyHeader
		},
		data() {
			return {
				faultTypeTab: 'XT',
				faultTypeTabData: [],
				yearTab: 'day',
				yearData: [],
				chartDataXT: {},
				chartDataJX: {},
				chartDatawxss: {},
				faultTypeData: [],
				faultTypeJXData: [],
				jxgzcs: 0,
				wxssTypeData: [],
				opts: {
					rotate: false,
					fontColor: '#909BA9',
					rotateLock: false,
					color: ['#5CB2EF', '#3E78C5', '#00299D', '#3EAD9F', '#3F3A99', '#5EAC88', '#5D56D0', '#CD8D23',
						'#9F65C1', '#FD8974', '#C745B9', '#FF6B3E',
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: false,
					},
					title: {
						show: false,
						name: "",
						fontSize: 5,
						color: "#666666"
					},
					subtitle: {
						show: false,
						name: "",
						fontSize: 5,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							centerColor: '#202246',
							offsetAngle: 0,
							labelWidth: 10,
							border: false,
						}
					}
				},
			}
		},
		created() {
			this.faultTypeTabData = [{
					nameZN: '系统',
					nameEN: 'XT',
					showColor: true
				},
				{
					nameZN: '机型',
					nameEN: 'JX',
					showColor: false

				}
			]
			this.yearData = [{
					nameZN: '日',
					nameEN: 'day',
					showColor: true
				},
				{
					nameZN: '月',
					nameEN: 'month',
					showColor: false
				},
				{
					nameZN: '年',
					nameEN: 'year',
					showColor: false

				}
			]
			this.getXTGZCSdata()
			this.getWXSSdata()
		},
		methods: {
			//获取系统故障次数
			getXTGZCSdata() {
				let that = this
				bulletinappShutdowngsApi({
					type: that.yearTab
				}).then(res => {
					if (res && res.data) {
						that.faultTypeData = res.data
						that.getPieBar(res.data)
					}
				})
			},
			//获取机型故障次数
			getJXGZCSdata() {
				let that = this
				bulletinappShutdowngsjxApi({
					type: that.yearTab
				}).then(res => {
					if (res && res.data) {
						that.faultTypeJXData = res.data
						that.getPieBar(res.data)
					}
				})
			},
			getPieBar(values) {
				let proColor = ['#5CB2EF', '#3E78C5', '#00299D', '#3EAD9F', '#3F3A99', '#5EAC88', '#5D56D0', '#CD8D23',
					'#9F65C1', '#FD8974', '#C745B9', '#FF6B3E'
				]

				let series = []
				let allNum = 0
				values.forEach((item, index) => {
					if (this.faultTypeTab === 'JX') {
						allNum += item.num_of_events
					}
					let obj = {
						name: item.name,
						value: this.faultTypeTab === 'XT' ? item.num_of_warnings : item.num_of_events,
					}
					proColor.forEach((it, idx) => {
						if (index.toString().length > 1) {
							obj.color = proColor[index.toString().slice(-1)]
							item.color = proColor[index.toString().slice(-1)]
						} else {
							obj.color = proColor[index]
							item.color = proColor[index]
						}
					})
					series.push(obj)
				})
				this.jxgzcs = allNum
				let res = {
					series: [{
						data: series
					}]
				};
				if (this.faultTypeTab === 'XT') {
					this.chartDataXT = JSON.parse(JSON.stringify(res));
				} else {
					this.chartDataJX = JSON.parse(JSON.stringify(res));
				}
			},
			//获取五项损失数据
			getWXSSdata() {
				let that = this
				bulletinappCompanylossesApi({
					wpId: 'KGDL_FGS0'
				}).then(res => {
					if (res.data) {
						let item = res.data
						that.wxssTypeData = [{
								data: this.yearTab === 'day' ? item.rxnssdl : this.yearTab === 'month' ? item
									.yxnssdl : item.nxnssdl,
								name: '性能损失'
							},
							{
								data: this.yearTab === 'day' ? item.rwhssdl : this.yearTab === 'month' ? item
									.ywhssdl : item.nwhssdl,
								name: '检修损失'
							},
							{
								data: this.yearTab === 'day' ? item.rgzssdl : this.yearTab === 'month' ? item
									.ygzssdl : item.ngzssdl,
								name: '故障损失'
							},
							{
								data: this.yearTab === 'day' ? item.rxdssdl : this.yearTab === 'month' ? item
									.yxdssdl : item.nxdssdl,
								name: '限电损失'
							},
							{
								data: this.yearTab === 'day' ? item.rslssdl : this.yearTab === 'month' ? item
									.yslssdl : item.nslssdl,
								name: '受累损失'
							}
						]
						that.getPieBarwxss()
					}
				})
			},
			getPieBarwxss() {
				let proColor = ['#5CB2EF', '#3E78C5', '#00299D', '#3EAD9F', '#3F3A99', '#5EAC88', '#5D56D0', '#CD8D23',
					'#9F65C1', '#FD8974', '#C745B9', '#FF6B3E'
				]

				let series = []
				this.wxssTypeData.forEach((item, index) => {
					let obj = {
						name: item.name,
						value: item.data,
					}
					proColor.forEach((it, idx) => {
						if (index.toString().length > 1) {
							obj.color = proColor[index.toString().slice(-1)]
							item.color = proColor[index.toString().slice(-1)]
						} else {
							obj.color = proColor[index]
							item.color = proColor[index]
						}
					})
					series.push(obj)
				})
				let res = {
					series: [{
						data: series
					}]
				};
				this.chartDatawxss = JSON.parse(JSON.stringify(res));
			},
			showColor(item) {
				return `background: ${item.color}`
			},
			changefaultTypeTab(item) {
				this.faultTypeTabData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.faultTypeTab = it.nameEN
					}
				})
				if (this.faultTypeTab === 'XT') {
					this.getXTGZCSdata()
				} else {
					this.getJXGZCSdata()
				}
			},
			changeYearTab(item) {
				this.yearData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.yearTab = it.nameEN
					}
				})
				if (this.faultTypeTab === 'XT') {
					this.getXTGZCSdata()
				} else {
					this.getJXGZCSdata()
				}
				this.getWXSSdata()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.faultType {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.faultType_main {
			padding: 0 20px;

			.faultType_tab {
				text {
					display: inline-block;
					width: 80px;
					height: 25px;
					border: 1px solid #4287FF;
					text-align: center;
					color: #4287FF;
					line-height: 25px;
					letter-spacing: 2px;
				}
			}

			.gzcs,
			.ssdl,
			.wxss {
				.gzcs_title {
					width: 130px;
					height: 45px;
					padding-left: 10px;
					margin-top: 10px;
					background: linear-gradient(90deg, #333976, transparent);
					align-items: center;

					image {
						width: 24px;
						height: 22px;
					}

					text {
						margin-left: 10px;
						font-size: 16px;
						color: #fff;
					}
				}

				.yearTab {
					width: 120px;
					height: 25px;
					border-radius: 20px;
					background: #0B143E;
					margin-top: 20px;

					text {
						display: inline-block;
						width: 40px;
						height: 25px;
						border-radius: 20px;
						text-align: center;
						color: #4287FF;
						line-height: 25px;
					}
				}

				.qiun-chartsPie {
					width: 100%;
					height: 200px;
					margin: 10px 0;
				}

				.gzcs_data {
					margin-top: 5px;

					.gzcs_data_row {
						.gzcs_data_col {
							width: 98%;
							height: 20px;
							margin-bottom: 5px;
							background: #2E336D;

							.gzcs_data_col_left {
								width: 50%;
								height: 20px;
								color: #fff;
								font-size: 30upx;
								background: #3F4572;

								text {
									margin-left: 5px;
									width: 100%;
									display: inline-block;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							.gzcs_data_col_right {
								height: 20px;
								color: #fff;
								font-size: 32upx;
								width: 48%;

								text:nth-of-type(1) {
									margin-left: 5px;
									width: 50%;
									font-size: 32upx;
									color: #fff;
									position: relative;
									top: 3px;
								}

								text:nth-of-type(2) {
									font-size: 22upx;
									color: #96B5D5;
									position: relative;
									top: 4px;
								}
							}
						}
					}
				}

				.heji {
					width: 100%;
					height: 30px;
					background: rgba(67, 89, 255, 0.5);

					.heji_img {
						width: 20%;
						height: 30px;
						border-right: 1px solid rgba(255, 255, 255, 0.5);

						image {
							width: 24px;
							height: 22px;
						}
					}

					.heji_msg {
						width: 80%;
						color: #fff;

						.heji_msg_tit {
							width: 50%;

							text {
								margin-left: 15px;
								font-size: 28upx;
								position: relative;
								top: 6px;
							}
						}

						.heji_msg_data {
							width: 50%;

							text:nth-of-type(1) {
								font-size: 36upx;
								position: relative;
								top: 6px;
							}

							text:nth-of-type(2) {
								font-size: 22upx;
								margin-right: 5px;
								position: relative;
								top: 8px;
							}
						}
					}
				}
			}
		}

	}
</style>