<!--
 * @Author: XHC
 * @Date: 2025-05-19 11:07:37
 * @LastEditors: XHC
 * @LastEditTime: 2025-05-23 16:03:02
 * @Description: 首页
-->
<template>
	<view class="index">
		<view class="header">
			<image src="/static/image/index/logo.png" mode="scaleToFill" />
			<view class="title">
				<view>多技术集约多部门协同综合巡检</view>
				<view><text>◎ 集中管控</text> <text>◎ 部门协同</text> <text>◎ 提升效能</text></view>
			</view>
		</view>
		<view class="nav-content">
			<scroll-view
				scroll-x="true"
				class="content-scroll"
				:show-scrollbar="false"
				enable-flex
			>
				<view
					v-for="(item, index) in departments"
					:key="index"
					:class="navCurIndex == index ? 'active' : ''"
					class="scroll-item"
					@click="changeTitle(index)"
				>
					{{ item.name }}
				</view>
			</scroll-view>
			<view v-if="navCurIndex == 0">
				<uni-card :is-shadow="false"  class="patrol-card" >
					<view class="time">巡检时间：<text>{{ patrolData.time }}</text></view>
					<view class="card-info">
						<view class="card-box">
							<view class="total line"><text>线路总数</text><text>{{ patrolData.linesTotal }}</text></view>
							<view class="lines" v-for="(item, index) in patrolData.lines" :key="index"><text class="title">{{ item.title }}</text><text class="num">{{ item.total }}</text></view>
							
						</view>
						<view class="card-box">
							<view class="total point"><text>点位总数</text><text>{{ patrolData.pointTotal }}</text></view>
							<view class="completion-rate">
								<Dashboard :data="70.8"></Dashboard>
							</view>
								<div class="points-box">
									<view class="points" v-for="(item, index) in patrolData.points" :key="index"><text class="title">{{ item.title }}</text><text class="num">{{ item.total }}</text></view>
								</div>
						</view>
					</view>
					<view class="inlet-box">
						<view class="history" @click="goToHistory">
							<view class="title">
								<view>历史巡检</view>
								<view class="english">HISTORICAL INSPECTION</view>
							</view>
							<view class="go">GO</view>
						</view>
						<view class="report">
							<view class="title">
								<view>巡检报告</view>
								<view class="english">INSPECTION REPORT</view>
							</view>
							<view class="go">GO</view>
						</view>
					</view>
				</uni-card>
				<view class="category-box">
					<view
						v-for="(item, index) in category"
						:key="index"
						:class="categoryCurIndex == index ? 'active' : ''"
						class="category-item grey"
						@click="changeCategory(index)"
					>
						{{ item.name }}
					</view>
				</view>
				<view v-if="categoryCurIndex == 0">
					<uni-card class="list-card" v-for="(item, index) in listData" :key="index">
						<view class="head">
							<text class="title">{{ item.title }}</text>
							<uni-tag :inverted="true" :text="item.state" :type="item.state == '未巡检' ? 'error' : item.state == '巡检中' ? 'warning' : 'success'" />
						</view>
						<view class="num grey">线路编号：{{ item.num }}</view>
						<view class="info-box grey">
							<view class="info"> <uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.info }}</view>
							<text class="info">任务 {{ item.task }}</text>
						</view>
					</uni-card>
				</view>
				<view v-if="categoryCurIndex == 1"></view>
				<view v-if="categoryCurIndex == 2"></view>
				<view v-if="categoryCurIndex == 3"></view>
			</view>
			<view v-if="navCurIndex == 1">发电分部</view>
			<view v-if="navCurIndex == 2">自动分部</view>
			<view v-if="navCurIndex == 3">保护分部</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import Dashboard from "@/components/echarts/dashboard.vue";

// 导航栏
let navCurIndex = ref(0)
const departments = reactive([
    { id: 1, name: "运行部" },
    { id: 2, name: "发电分部" },
    { id: 3, name: "自动分部" },
    { id: 4, name: "保护分部" },
    { id: 5, name: "测试分部" },
]);

const patrolData = reactive({
	time: '2025 2-15 12:00:00',
	linesTotal: 14,
	lines: [
		{ title: '已巡路线', total: 11 },
		{ title: '未巡路线', total: 3 },
		{ title: '异常问题', total: 3 },
	],
	pointTotal: 397,
	points: [
		{ title: '已巡点位', total: 285 },
		{ title: '未巡点位', total: 112 },
	],
	completionRate: 71.8
})
// 巡检类别
let categoryCurIndex = ref(0)
const category = reactive([
	{ id: 1, name: "全部" },
    { id: 2, name: "未巡检" },
    { id: 3, name: "巡检中" },
    { id: 4, name: "已巡检" },
])

// 列表数据
let listData = reactive([
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '已巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '已巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '未巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '未巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
])

onReachBottom(() => {
	loadMore()
})

const loadMore = async () => {
	let data = [
		{ title: '右岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
		{ title: '右岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
		{ title: '右岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
	]
	listData = [ ...listData, ...data]
}

// 切换导航
const changeTitle = (index) => {
	navCurIndex.value = index
};
const changeCategory = (index) => {
	categoryCurIndex.value = index
}

// 历史巡检跳转
const goToHistory = () => {
	uni.navigateTo({
		url: '/pages/history/history'
	});
}
</script>

<style lang="scss" scoped>
.index {
	padding-top: 100rpx;
	.header {
		display: flex;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}
		.title {
			color: #fff;
			view:nth-child(1) {
				font-weight: 700;
				font-size: 36rpx;
				background-image: linear-gradient(to bottom, #fff, #ffffffef, #ffffff00); /* 渐变方向和颜色 */
				-webkit-background-clip: text;
				color: transparent; /* 文字颜色设置为透明，使背景色显示 */
			}
			view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				margin: 15rpx 60rpx 0 0;
				font-size: 24rpx;
				border-bottom: 2rpx solid #fff;
			}
		}
	}
	.nav-content {
		box-sizing: border-box;
		.content-scroll {
			height: 100rpx;
			line-height: 100rpx;
			white-space: nowrap;
			.scroll-item {
				height: 35rpx;
				line-height: 35rpx;
				display: inline-block;
				text-align: center;
				font-size: 31rpx;
				font-weight: bold;
				color: #DFE5F0;
				margin-left: 30rpx;
				padding: 0 20rpx;
				position: relative;
				&.active {
					color: #2851f3;
					background: #fff;
					border-radius: 15rpx;
					padding: 15rpx 20rpx;
					&:after {
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 15rpx solid transparent;
						border-top: 15rpx solid #fff;
						position: absolute;
						top: 95%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	.patrol-card {
		border-radius: 10rpx;
		padding: 5rpx 10rpx;
		.time {
			color: #808185;
		}
		.card-info {
			display: flex;
			justify-content: space-between;
			.card-box {
				width: 42%;
				background: #EDF3FD;
				border-radius: 10rpx;
				padding: 20rpx;
				.total {
					display: grid;
					grid-template-columns: 180rpx 50rpx;
					padding-left: 20rpx;
					margin-bottom: 20rpx;
					font-weight: 600;
					border-left: 6rpx solid;
					height: 30rpx;
					line-height: 30rpx;
				}
				.lines {
					display: grid;
					grid-template-columns: 205rpx 50rpx;
					align-items: center;
					margin-top: 20rpx;

					.title {
						padding: 10rpx 24rpx;
						border-radius: 10rpx;
						background: linear-gradient(to right,#c7dcfbb5,#e7f1fd28);
					}
					
					&:nth-child(3) {
						color: #E99A71;
					}
					&:nth-child(4) {
						color: #DE503B;
					}
				}
				.line  {
					border-color: #5291FF;
				}
				.point  {
					border-color: #4AC1B3;
				}

				.title {
					color: #7E848D;
				}

				.num {
					font-weight: 600;
				}

				.points-box {
					display: flex;
					justify-content: space-between;

					.points {
						display: flex;
						flex-direction: column-reverse;
						align-items: center;
						.num {
							font-size: 27rpx;
						}
						&:nth-last-child(1) {
							color: #E99A71;
						}
					}

				}
			}
		}
		.inlet-box {
			display: flex;
			justify-content: space-between;
			margin: 20rpx -40rpx -20rpx -40rpx;
			color: #fff; 
			i { font-size: 40rpx; }
			.history {
				background: url('@/static/image/index/history.png') no-repeat;
			}
			.report {
				background: url('@/static/image/index/report.png');
			}
			.history, .report {
				width: 50%;
				display: grid;
				grid-template-columns: 90% 50rpx;
				align-items: center;
				justify-items: center;
				background-size: 100% 100%;
				.title {
					font-size: 27rpx;
					font-weight: bold;
					margin: 20rpx 0 0 60rpx;
					.english {
						font-size: 14rpx;
						color: #B6DED2;
					}
				}
				.go {
					font-size: 11rpx;
					font-weight: bold;
					margin: -30rpx 0 0 -100rpx;
					border-radius: 15rpx;
					background: #ffffff6f;
					width: 40rpx;
					height: 20rpx;
					line-height: 20rpx;
					text-align: center;
				}
			}
			
		}
	}
	.category-box {
		display: flex;
		justify-content: space-around;
		font-weight: bold;
		font-size: 31rpx;
		.active {
			position: relative;
			color: #146FF3;
			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				transform: translateX(-50%);
				width: 30rpx;
				height: 6rpx;
				background: #146FF3;
			}
			
		}
	}
}

</style>