<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-data-analysis"></i>  {{ $route.meta.title }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
		 element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="handle-box">
				<el-select v-model="query.journal_id" filterable placeholder="Please select a Journal" value-key="groupID" style="width: 300px;"
				 @change="chan_id">
					<el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
				</el-select>
			</div>
			<!-- 国家内外(饼状图) -->
			<div class="schart-box">
				<div id="myChart1" class="schart" style="width: 500px;margin: 0 auto;"></div>
			</div>
			<!-- 领域（学科）(柱状图) -->
			<div class="schart-box">
				<div id="myChart2" class="schart" style="height: 400px;"></div>
			</div>
			<!-- 关键词(柱状图) -->
			<div class="schart-box">
				<div id="myChart3" class="schart" style="height: 400px;"></div>
			</div>
			<!-- 关键词(折线图) -->
			<div class="schart-box">
				<div id="myChart4" class="schart" style=""></div>
			</div>
			<!-- 文章类型(饼状图) -->
			<div class="schart-box">
				<div id="myChart5" class="schart" style="width: 800px;margin: 0 auto;"></div>
			</div>
			<!-- 阅读量下载量(表格) -->
			<h4 class="ta_tit">阅读量下载统计</h4>
			<el-table :data="tab_le6" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
				<el-table-column prop="read_num" label="阅读量"></el-table-column>
				<el-table-column prop="cite_num" label="引用数"></el-table-column>
			</el-table>
			<!-- 标题吸引力程度(表格) -->
			<h4 class="ta_tit">标题吸引力程度统计</h4>
			<el-table :data="tab_le7_1" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
				<el-table-column prop="cite_num" label="字数"></el-table-column>
			</el-table>
			<el-table :data="tab_le7_2" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
				<el-table-column prop="cite_num" label="字符"></el-table-column>
			</el-table>
			<!-- 摘要吸引力程度(表格) -->
			<h4 class="ta_tit">摘要吸引力程度统计</h4>
			<el-table :data="tab_le8_1" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
				<el-table-column prop="cite_num" label="字数"></el-table-column>
			</el-table>
			<el-table :data="tab_le8_2" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
				<el-table-column prop="cite_num" label="字符"></el-table-column>
			</el-table>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				user_id: localStorage.getItem('U_id'),
				user_cap: localStorage.getItem('U_role'),
				loading: false,
				df_jour: [],
				tableData: [],
				query: {
					journal_id: ''
				},
				myChart1: '',
				Ech_1: [{
						value: 0,
						name: '国内'
					},
					{
						value: 0,
						name: '国外'
					}
				],
				Ech_2: [],
				Ech_3: [],
				Ech_4_1: [],
				Ech_4_2: [],
				Ech_5: [],
				tab_le6: [],
				tab_le7_1: [],
				tab_le7_2: [],
				tab_le8_1: [],
				tab_le8_2: []
			};
		},
		watch: {
			// df_jour: function(val) {
			// 	var _this = this;
			// 	_this.$nextTick(function() {
			// 		this.drawLine1();
			// 		this.drawLine2();
			// 		this.drawLine3();
			// 		this.drawLine4();
			// 		this.drawLine5();
			// 	});
			// },
		},
		mounted() {
			// this.drawLine();
		},
		created() {
			this.getTable();
		},
		computed: {
			opened() {
				return this.df_jour.map((i) => {
					return i.journal_id;
				});
			}
		},
		methods: {
			// 获取数据
			getTable() {
				if (this.user_cap.includes('chief')) {
					this.$api
						.post('api/Chief/getJournalsFromChief', {
							'user_id': this.user_id
						})
						.then(res => {
							if (res.code == 0) {
								this.df_jour = res.data.journals;
								this.query.journal_id = this.df_jour[0].journal_id
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$api
						.post('api/Chief/getJournalsByEditor', {
							'user_id': this.user_id
						})
						.then(res => {
							if (res.code == 0) {
								this.df_jour = res.data.journals;
								this.query.journal_id = this.df_jour[0].journal_id
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},

			// 下拉分类搜索
			chan_id(event) {
				this.$echarts.init(document.getElementById('myChart1')).clear()
				this.$echarts.init(document.getElementById('myChart2')).clear()
				this.$echarts.init(document.getElementById('myChart3')).clear()
				this.$echarts.init(document.getElementById('myChart4')).clear()
				this.$echarts.init(document.getElementById('myChart5')).clear()
				this.getData();
			},

			getData() {
				this.loading = true;
				this.$api
					.post('journalsuper/Publish/getCiteDate', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data;
							this.drawLine1();
							this.drawLine2();
							this.drawLine3();
							this.drawLine4();
							this.drawLine5();
							this.dataTable6();
							this.dataTable7();
							this.dataTable8();
							this.loading = false;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			//图表初始化
			drawLine1() {
				this.Ech_1 = [{
						value: 0,
						name: '国内'
					},
					{
						value: 0,
						name: '国外'
					}
				];
				let data_num = this.tableData.country
				this.Ech_1[0].value = data_num.n
				this.Ech_1[1].value = data_num.w

				// 基于准备好的dom，初始化echarts实例
				this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))

				// 绘制折现图
				this.myChart1.setOption({
					title: {
						text: '国内外统计',
						x: '49%',
						y: 'top',
						textAlign: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						bottom: '1%',
						// type: 'scroll',
						orient: 'vertical',
						right: 10,
						top: 20,
					},
					color: ['#FD9E06', '#768BFF'],
					series: [{
						name: '来源',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: this.Ech_1
					}]
				}, true);
			},

			drawLine2() {
				this.Ech_2 = [];
				let data_num = this.tableData.topic
				for (let i in data_num) {
					this.Ech_2.push([i, data_num[i]])
				}

				// 基于准备好的dom，初始化echarts实例
				this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))

				// 绘制折现图
				this.myChart2.setOption({
					title: {
						text: '领域统计',
						x: '49%',
						y: 'top',
						textAlign: 'center'
					},
					grid: {
						bottom: '30%',
					},
					dataset: [{
						dimensions: ['name', 'value'],
						source: this.Ech_2
					}, {
						transform: {
							type: 'sort',
							config: {
								dimension: 'value',
								order: 'desc'
							}
						}
					}],
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							return params[0].value[0] + "<br>" + params[0].value[1];
						},
						textStyle: {
							align: 'left'
						},
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							interval: 0,
							rotate: 30
						},
					},
					yAxis: {},
					series: {
						type: 'bar',
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = ['#5470c6',
										'#91cc75',
										'#fac858',
										'#ee6666',
										'#73c0de',
										'#3ba272',
										'#fc8452',
										'#9a60b4',
										'#ea7ccc',
										'#45C2E0',
										'#C1EBDD',
										'#FFC851',
										'#768BFF',
										'#12ED93',
										'#1869A0',
										'#FF9393',
										'#4B7CF3',
										'#dd3ee5',
										'#fe8104',
										'#01C2F9',
										'#F4CB29',
										'#FD9E06',
										'#4962FC',
										'#d223e7',
										'#f376e0',
										'#3F77FE',
										'#02CBF9',
										'#18D070',
										'#01C2F9', '#5470c6',
										'#91cc75',
										'#fac858',
										'#ee6666',
										'#73c0de',
										'#3ba272',
										'#fc8452',
										'#9a60b4',
										'#ea7ccc',
										'#45C2E0',
										'#C1EBDD',
										'#FFC851'
									];
									return colorList[params.dataIndex]
								}

							}
						},
						encode: {
							x: 'name',
							y: 'value'
						},
						datasetIndex: 1
					}
				}, true);
			},

			drawLine3() {
				this.Ech_3 = [];
				let data_num = this.tableData.gjz
				for (let i in data_num) {
					if (data_num[i] < 6) {
						delete(data_num[i]);
						if (i == 0) {
							i = 0
						} else {
							i = i - 1
						}
					}
				}

				for (let i in data_num) {
					this.Ech_3.push([i, data_num[i]])
				}

				// 基于准备好的dom，初始化echarts实例
				this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))

				// 绘制折现图
				this.myChart3.setOption({
					title: {
						text: '关键字统计',
						x: '49%',
						y: 'top',
						textAlign: 'center'
					},
					grid: {
						bottom: '30%',
					},
					dataset: [{
						dimensions: ['name', 'value'],
						source: this.Ech_3
					}, {
						transform: {
							type: 'sort',
							config: {
								dimension: 'value',
								order: 'desc'
							}
						}
					}],
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							return params[0].value[0] + "<br>" + params[0].value[1];
						},
						textStyle: {
							align: 'left'
						},
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							interval: 0,
							rotate: 30
						},
					},
					yAxis: {},
					series: {
						type: 'bar',
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = ['#5470c6',
										'#91cc75',
										'#fac858',
										'#ee6666',
										'#73c0de',
										'#3ba272',
										'#fc8452',
										'#9a60b4',
										'#ea7ccc',
										'#45C2E0',
										'#C1EBDD',
										'#FFC851',
										'#768BFF',
										'#12ED93',
										'#1869A0',
										'#FF9393',
										'#4B7CF3',
										'#dd3ee5',
										'#fe8104',
										'#01C2F9',
										'#F4CB29',
										'#FD9E06',
										'#4962FC',
										'#d223e7',
										'#f376e0',
										'#3F77FE',
										'#02CBF9',
										'#18D070',
										'#01C2F9', '#5470c6',
										'#91cc75',
										'#fac858',
										'#ee6666',
										'#73c0de',
										'#3ba272',
										'#fc8452',
										'#9a60b4',
										'#ea7ccc',
										'#45C2E0',
										'#C1EBDD',
										'#FFC851'
									];
									return colorList[params.dataIndex]
								}

							}
						},
						encode: {
							x: 'name',
							y: 'value'
						},
						datasetIndex: 1
					}
				}, true);
			},

			drawLine4() {
				this.Ech_4_1 = [];
				this.Ech_4_2 = [];

				let data_num = this.tableData.time
				for (let i in data_num) {
					this.Ech_4_1.push(i)
					this.Ech_4_2.push(data_num[i])
				}

				// 基于准备好的dom，初始化echarts实例
				this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))

				// 绘制折现图
				this.myChart4.setOption({
					title: {
						text: '时间统计',
						x: '49%',
						y: 'top',
						textAlign: 'center'
					},
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							return params[0].axisValueLabel + "<br>" + params[0].data;
						},
						textStyle: {
							align: 'left'
						},
					},
					xAxis: {
						type: 'category',
						data: this.Ech_4_1
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.Ech_4_2,
						type: 'line',
						itemStyle: {
							normal: {
								color: "#edae21", //折线点的颜色
								lineStyle: {
									color: "#fac858" //折线的颜色
								}
							}
						},
					}]
				}, true);
			},


			drawLine5() {
				this.Ech_5 = [];
				let data_num = this.tableData.type
				for (let i in data_num) {
					this.Ech_5.push({
						name: i,
						value: data_num[i]
					})
				}

				// 基于准备好的dom，初始化echarts实例
				this.myChart5 = this.$echarts.init(document.getElementById('myChart5'))

				// 绘制折现图
				this.myChart5.setOption({
					title: {
						text: '文章类型统计',
						x: '49%',
						y: 'top',
						textAlign: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						bottom: '1%',
						// type: 'scroll',
						orient: 'vertical',
						right: 10,
						top: 20,
					},
					color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
						'#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#45C2E0',
						'#C1EBDD', '#FFC851', '#768BFF', '#12ED93',
						'#1869A0', '#FF9393', '#4B7CF3', '#dd3ee5', '#fe8104',
						'#01C2F9', '#F4CB29', '#FD9E06', '#4962FC', '#d223e7',
						'#f376e0', '#3F77FE', '#02CBF9', '#18D070', '#01C2F9'
					],
					series: [{
						name: '来源',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: this.Ech_5
					}]
				}, true);
			},

			dataTable6() {
				this.tab_le6 = this.tableData.read
			},

			dataTable7() {
				this.tab_le7_1 = this.tableData.zs_title
				this.tab_le7_2 = this.tableData.zf_title
			},

			dataTable8() {
				this.tab_le8_1 = this.tableData.zs_abstract
				this.tab_le8_2 = this.tableData.zf_abstract
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.table {
		width: 100%;
		font-size: 14px;
		margin-bottom: 30px;
	}

	.ta_tit {
		text-align: center;
		margin: 50px 0 20px 0;
	}

	.schart-box {
		width: 100%;
		margin-bottom: 50px;
		/* display: inline-block; */
	}

	.schart-box .schart {
		width: 100%;
		height: 300px;

	}
</style>
