<template>
	<home-container :customStyle="{ background: 'none', paddingTop: '0' }" ref="homeContainer">
		<view class="inspection-statistics">

			<!-- 选项卡 -->
			<h-tabs v-model="activeTab" :tabs="tabs" :activeColor="'#2A70D1'" value-key="value" label-key="label"
				@change="handleTabChange" />

			<!-- 内容区域 -->
			<view class="content">
				<!-- 巡检计划 -->
				<InspectionPlan v-if="activeTab === 0" />

				<!-- 巡检执行 -->
				<InspectionExecution v-if="activeTab === 1" />

				<!-- 问题发现 -->
				<ProblemDiscovery v-if="activeTab === 2" />

				<!-- 问题整改 -->
				<ProblemRectification v-if="activeTab === 3" />
			</view>
		</view>
	</home-container>

</template>

<script>

import InspectionPlan from './components/InspectionPlan.vue'
import InspectionExecution from './components/InspectionExecution.vue'
import ProblemDiscovery from './components/ProblemDiscovery.vue'
import ProblemRectification from './components/ProblemRectification.vue'
import HomeContainer from "@/components/HomeContainer.vue";
export default {
	components: {
		HomeContainer,
		InspectionPlan,
		InspectionExecution,
		ProblemDiscovery,
		ProblemRectification
	},

	data() {
		return {
			activeTab: 0, // 当前激活的选项卡

		}
	},
	mounted() {
		// 初始化选项卡
		this.activeTab = this.isBanZuZhang ? 1 : 0
	},
	computed: {
		isBanZuZhang() {
			let roles = this.$store.state.user.roles;
			console.log(roles)
			return roles && roles.includes('banzuzhang')
		},
		tabs() {
			return [
				...(this.isBanZuZhang ? [] : [{ label: '巡检计划', value: 0, style: { 'color': 'black' }, }]),
				{ label: '巡检执行', value: 1, style: { 'color': 'black' }, },
				{ label: '问题发现', value: 2, style: { 'color': 'black' }, },
				{ label: '问题整改', value: 3, style: { 'color': 'black' }, }
			]
		}

	},
	methods: {
		// 选项卡切换事件
		handleTabChange(index) {
			this.activeTab = index
			console.log('切换到选项卡:', this.tabs[index].label)
			this.$nextTick(() => {
				if (this.$refs.homeContainer && this.$refs.homeContainer.scrollToTop) {
					this.$refs.homeContainer.scrollToTop();
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.inspection-statistics {
	min-height: 100vh;
	padding-top: 40px;

	.h-tabs {
		position: fixed;
		top: 80rpx;
		z-index: 999;
		padding-top: 20rpx;
		background-color: #fff !important;
	}

}
</style>