<template>
  <div class="analysis-table">
		<div class="module-navs-container">
			<div>
				<div v-for="(item) in navList" :key="'key_' + item.id" class="item-nav" :class="{'nav-active': item.isActive}" @click="changeModule(item.id)">
					<NavTable v-if="item.imgType === 'table'"/>
					<NavApply v-if="item.imgType === 'apply'"/>
					<NavGantt v-if="item.imgType === 'gantt'"/>
					<div>{{item.name}}</div>
				</div>
			</div>
		</div>
		<div class="module">
			<CoreDeviceReport v-if="curModule.id === 1"/>
			<SpecificationUpdateRecord v-if="curModule.id === 2" />
			<GanttChart v-if="curModule.id === 3" />
		</div>
	</div>
</template>

<script>
import NavTable from '../../assets/svg/table.svg';
import NavApply from '../../assets/svg/apply.svg';
import NavGantt from '../../assets/svg/gantt_chart.svg';
import CoreDeviceReport from './CoreDeviceReport';
import SpecificationUpdateRecord from './SpecificationUpdateRecord';
import GanttChart from './GanttChart';
import _ from 'lodash';
export default {
	data() {
		return {
			navList: [
				{id: 1, name: '核心设备报表', imgType: 'table', isActive: true},
				{id: 2, name: '说明书更新记录', imgType: 'apply', isActive: false},
				{id: 3, name: '事项甘特图', imgType: 'gantt', isActive: false},
			],
			curModule: {}, // 当前选中的模块
		}
	},
	components: {
		NavTable,
		NavApply,
		NavGantt,
		CoreDeviceReport,
		SpecificationUpdateRecord,
		GanttChart
	},
	mounted() {
		const { query } = this.$route;
		if (!_.isEmpty(query)) {
			if (query.module === 'specification') {
				_.map(this.navList, (o) => {return o.isActive = o.id === 2});
			} else if (query.module === 'gantt') {
				_.map(this.navList, (o) => {return o.isActive = o.id === 3});
			}
		}
		this.findCurModule();
	},
	methods: {
		/**
		 * 查询当前选中模块
		 */
		findCurModule() {
			this.curModule = _.find(this.navList, (item) => {return item.isActive});
		},
		/**
		 * 切换模块
		 */
		changeModule(id) {
			_.map(this.navList, (item) => {return item.isActive = item.id === id});
			this.findCurModule();
		}
	}
};
</script>

<style lang="less" scoped>
.analysis-table{
	height: calc(100% - 48px);
	background: #F2F5F7;
	.module-navs-container{
		margin: 12px 0;
		display: flex;
		justify-content: center;
		>div{
			display: flex;
		}
	}
	.item-nav{
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 20px;
		padding-right: 16px;
		display: flex;
		align-items: center;
		background: #fff;
		cursor: pointer;
		>svg{
			margin-right: 6px;
		}
		>div:last-child{
			font-size: 16px;
			color: #1F2429;
			line-height: 22px;
		}
	}
	.nav-active{
		background: linear-gradient(360deg,rgba(2,91,170,.1) 0%,rgba(2,91,170,0) 100%);
		>svg{
			stroke: #025BAA;
		}
		>div:last-child{
			color: #025BAA;
		}
	}
	.module{
		width: 100%;
		height: calc(100% - 70px);
	}
}
</style>