<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-punch"></i> 数据库</el-breadcrumb-item>
				<el-breadcrumb-item>数据库资料与讨论</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="database.journal_id" filterable placeholder="请选择期刊" @change="data_jor">
					<el-option v-for="item in opojour" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
				</el-select>
				<el-select v-model="database.db_id" filterable placeholder="请选择数据库" @change="data_ku">
					<el-option v-for="item in opodata" :key="item.db_id" :label="item.name" :value="item.db_id"></el-option>
				</el-select>

			</div>
			<el-row :gutter="24">
				<el-col :span="11">
					<div class="schart-box">
						<schart class="schart" canvasId="pie" :options="echart_bing" data="data_bing"></schart>
					</div>
				</el-col>
				<el-col :span="11" :offset="1">
					<p style="margin-bottom: 20px;line-height: 25px;font-size: 14px;color: #666;">{{this.ba_Data.intro}}</p>
					<!-- <router-link :to="{path:'/datamean',query: {db_num: this.db_num}}" style="margin-right: 10px;">
						<div class="button button-glow button-rounded button-raised button-primary" v-if="this.db_num != ''">资料区</div>
					</router-link> -->

					<!-- <router-link :to="{path:'/datatalk',query: {db_num: this.db_num}}" style="margin-right: 10px;">
						<div class="button button-glow button-rounded button-raised button-action">谈论区</div>
					</router-link> -->
				</el-col>
			</el-row>

			<el-row :gutter="24">
				<el-col :span="24">
					<div class="tab_menu">
						<p class="tm_1">基本信息</p>
						<router-link :to="{path:'/datamean',query: {db_num: this.db_num}}">
							<p v-if="this.db_num != ''">资料区</p>
						</router-link>
						<!-- <router-link :to="{path:'/datatalk',query: {db_num: this.db_num}}"> -->
							<p v-if="this.db_num != ''">讨论区</p>
						<!-- </router-link> -->
					</div>
					<p style="border-bottom: 1px solid #dcdfe6;"></p>
					<div class="tab_con">
						基本信息
					</div>
				</el-col>

			</el-row>


		</div>
	</div>
</template>

<script>
	import Schart from 'vue-schart';
	export default {
		data() {
			return {
				db_num: '',
				database: {
					journal_id: '',
					db_id: ''
				},
				activeName: 'first',
				ba_Data: [],
				opojour: [],
				opodata: [],
				echart_bing: {
					type: 'pie',
					title: {
						text: '饼状图'
					},
					legend: {
						position: 'left'
					},
					bgColor: '#fff',
					labels: ['已完成', '未完成'],
					datasets: [{
						data: [334, 278]
					}],
				}
			};
		},
		created() {
			this.getOption();
		},
		methods: {
			// 获取数据库数据
			getData() {
				this.$api
					.post('master/Datebase/getDbMain', this.database)
					.then(res => {
						if (res.code == 0) {
							this.db_num = res.data.dbInfo.db_id;
							this.ba_Data = res.data.dbInfo;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 获取下拉的数据
			getOption() {
				this.$api
					.post('master/Journal/getJournalList', {
						'editor_id': localStorage.getItem('admin_id')
					})
					.then(res => {
						if (res.code == 0) {
							this.opojour = res.data.journalList;
							this.database.journal_id = res.data.journalList[0].journal_id;
							this.$api
								.post('master/Datebase/getDbs')
								.then(res => {
									if (res.code == 0) {
										this.opodata = res.data.dblist;
										this.database.db_id = res.data.dblist[0].db_id;
										this.getData();
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			
			// 下拉改变
			data_jor(event) {
				this.getData();
			},
			data_ku(event) {
				this.getData();
			},

		},
		components: {
			Schart
		}
	};
</script>

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

	.handle-box {
		margin-bottom: 40px;
	}

	.handle-box .el-select {
		margin-right: 20px;
	}

	.schart {
		/* width: 700px; */
		height: 400px;
	}

	/* 选项卡 */
	.tab_menu {
		
	}

	.tab_menu p {
		display: inline-block;
		margin-right: 30px;
		padding-bottom: 15px;
		cursor: pointer;
	}
	.tab_menu .tm_1 {
		color: #409eff;
		border-bottom: 2px solid #409eff;
	}
	.tab_menu a{
		color: #606266;
	}
	.tab_menu a:active{
		color: #606266;
	}
	.tab_menu a:focus{
		color: #606266;
	}
	.tab_menu a:visited{
		color: #606266;
	}

	.tab_con{
		margin-top: 20px;
	}

	/* 按钮 */
	.button-raised {
		color: #FFF;
		width: 120px;
		padding: 10px;
		text-align: center;
		border-radius: 6px;
	}

	.button-raised.button-primary {
		border-color: #ec9c09;
		background: -webkit-gradient(linear, left top, left bottom, from(#feae1b), to(#ec9c09));
		background: linear-gradient(#feae1b, #ec9c09);
	}

	.button-raised.button-primary:hover,
	.button-raised.button-primary:focus {
		background: -webkit-gradient(linear, left top, left bottom, from(#fdb83b), to(#e0950a));
		background: linear-gradient(top, #fdb83b, #e0950a);
	}

	.button-raised.button-action {
		border-color: #9ad824;
		background: -webkit-gradient(linear, left top, left bottom, from(#afe24d), to(#9ad824));
		background: linear-gradient(#afe24d, #9ad824);
	}

	.button-raised.button-action:hover,
	.button-raised.button-action:focus {
		background: -webkit-gradient(linear, left top, left bottom, from(#b5e45a), to(#94cf22));
		background: linear-gradient(top, #b5e45a, #94cf22);
	}
</style>
