<template>
	<div>
		<el-dialog :visible="visible" :before-close="handleClose" :close-on-click-modal="false" fullscreen>
			<!-- <div class="header">{{parmas.name}}桥图分析</div> -->
			<div class="header">{{$i18n.locale === 'zh-CN'?'桥图分析':'Bridge analysis'}}</div>
			<div class="search">
				<el-date-picker popper-class="screen-date-picker" v-model="parmas.year" type="year" value-format="yyyy"
					@change="handleTop" placeholder="选择年" style="width: 110px;"></el-date-picker>年
				<el-select popper-class="screen-select-picker" v-model="parmas.month" placeholder="请选择月份"
					@change="handleTop" style="width: 110px;">
					<el-option v-for="item in monthList" :key="item.value" :label="item.label"
						:value="item.value"></el-option>
				</el-select>
			</div>
			<div class="chart-container">
				<div class="item" v-for="(item,index) in bridgeList" :key="index">
					<echartsTitle>{{$i18n.locale === 'zh-CN'?item.targetName:item.targetNameEn}}</echartsTitle>
					<div :id="'bridgeDiagram' + index" class="full"></div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import moment from 'moment'
	import bridgeDiagramAnalysis from '@/api/bigScrenn/bridgeDiagramAnalysis.js'
	import echartsTitle from '@/views/BigScrenn/investmentTheme/components/echartsTitle.vue'
	export default {
		name: 'bridgeDiagramAnalysis', //桥图分析
		components: {
			echartsTitle
		},
		data() {
			return {
				visible: false,
				parmas: {
					year: moment().format('YYYY'),
					month: moment()
						.subtract(1, 'months')
						.format('M'),
					targetId: '',
					enterpriseCode: ''
				},
				bridgeList: [],
				monthList: [{
					value: '1',
					label: '1'
				}, {
					value: '2',
					label: '2',
				}, {
					value: '3',
					label: '3'
				}, {
					value: '4',
					label: '4'
				}, {
					value: '5',
					label: '5'
				}, {
					value: '6',
					label: '6'
				}, {
					value: '7',
					label: '7'
				}, {
					value: '8',
					label: '8'
				}, {
					value: '9',
					label: '9'
				}, {
					value: '10',
					label: '10'
				}, {
					value: '11',
					label: '11'
				}, {
					value: '12',
					label: '12'
				}],
			}
		},
		created() {},
		mounted() {},
		methods: {
			handleTop() {
				this.getBridgeList()
			},
			initCharts(data, index) {
				var dy = data.map(item => {
					return item.value
				})
				var zt = []
				var label = []
				for (var i = 0; i < dy.length; i++) {
					var obj = []
					if (i === 0 || i === dy.length - 1) {
						var x = parseFloat(dy[i])
						if (x < 0) {
							label.push({
								value: dy[i],
								coord: [i, x],
								label: {
									position: 'bottom',
									show: true,
									fontSize: 16,
									color: '#fff'
								}
							})
						} else {
							label.push({
								value: dy[i],
								coord: [i, x]
							})
						}

						obj.push(0)
						obj.push(dy[i])
						obj.push(dy[i])
						obj.push(dy[i])
						zt.push(obj)
					} else {
						var start = zt[i - 1][1]
						var val = parseFloat(dy[i])
						var end = start + val
						if (dy[i] < 0) {
							label.push({
								value: dy[i],
								coord: [i, end],
								label: {
									position: 'bottom',
									show: true,
									fontSize: 16,
									color: '#fff'
								}
							})
						} else {
							label.push({
								value: dy[i],
								coord: [i, end]
							})
						}

						obj.push(start)
						obj.push(end)
						obj.push(end)
						obj.push(end)
						zt.push(obj)
					}
				}
				console.log(document.getElementById('bridgeDiagram' + index));
				let chartDom = echarts.init(
					document.getElementById('bridgeDiagram' + index)
				)

				let option = {
					title: {
						textStyle: {
							color: 'blue',
							fontWeight: 'bold'
						},
						subtextStyle: {
							color: '#aaa',
							fontStyle: 'italic'
						},
						left: 'center'
					},
					grid: {
						left: '6%',
						right: '6%',
						top: '6%',
						bottom: '14%'
					},
					xAxis: {
						data: data.map(item => {
							return item.targetName
						}),
						axisLabel: {
							rotate: 45,
							margin: 15,
							textStyle: {
								fontSize: 16
							},
							interval: 0
						}
					},
					yAxis: {
						type: 'value',
						scale: true,
						axisLabel: {
							textStyle: {
								fontSize: 16
							}
						}
					},
					series: [{
						type: 'candlestick',
						//开始值、结束值、最大值、最小值
						//[[1,2,3,4]
						data: zt,
						itemStyle: {
							color: '#6379d6',
							color0: '#6379d6',
							borderWidth: 0
						},
						markPoint: {
							symbol: 'rect',
							//图形上面的小头隐藏
							symbolSize: 0.000000000000001,
							label: {
								show: true,
								color: '#fff',
								position: 'top',
								fontSize: 16,
								formatter: function(res) {
									return res.data.value
								}
							},
							data: label
						},
						emphasis: {
							itemStyle: {
								// color:'yellow',
								// color0:'green',
								borderWidth: 0
							}
						}
					}]
				}
				option && chartDom.setOption(option)
			},
			// 关闭事件
			handleClose() {
				this.visible = false
			},
			add(val, code) {
				this.parmas.targetId = val.targetId
				this.parmas.enterpriseCode = code[1]
				this.visible = true
				this.getBridgeList()
			},
			// 获取桥图数据
			getBridgeList() {
				bridgeDiagramAnalysis.getBridgeList(this.parmas, res => {
					console.log(res)
					this.bridgeList = res.value
					res.value.forEach((it, index) => {
						this.$nextTick(() => {
							this.initCharts(it.bridgeFigureList, index)
						})
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	/deep/ .el-dialog {
		min-height: 312px;
		background: url('~@/assets/img/dialog-bg.png') center / 100% 100% no-repeat;
		background-color: rgba(0, 0, 0, 1);
	}

	/deep/ .el-dialog__header {
		padding: 0;
		margin: 0;
		height: 0;
	}

	/deep/ .el-dialog__body {
		padding: 0;
		height: 100%;
	}

	.header {
		width: 100%;
		height: 35px;
		background: url('~@/assets/img/dialog-header-bg.png') center / 100% 100% no-repeat;
		font-size: 22px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		font-style: italic;
		color: #f6f9fe;
		padding-left: 30px;
		box-sizing: border-box;
		text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
	}

	.search {
		text-align: right;
		padding-right: 100px;
		box-sizing: border-box;
		color: #fff;
	}

	.chart-container {
		display: flex;
		height: calc(100% - 80px);
		margin: 8px 0 0 0;
		justify-content: space-around;

		.item {
			width: 48%;

			.full {
				height: calc(100% - 80px);
			}
		}
	}

	/deep/ .el-dialog__wrapper {
		background-color: rgba(0, 0, 0, 0.8);
	}

	/deep/ .el-dialog__headerbtn {
		background: url('~@/assets/img/dialog-shut.png');
		background-size: cover;
		height: 20px;
		width: 20px;

		i {
			display: none; // 在这里隐藏弹窗默认的关闭图标
		}
	}
</style>