<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="false" leftText="" @leftClick="" title="轮灌">
		<template v-slot:right>
			<view class="fixed">
				<view align="right" class="iconfont icon-jia1 icon" @click="add"></view>
			</view>
		</template>
	</custom-nav-bar>
	<!-- 选项卡 -->
	<uni-segmented-control :current="tab.current" :values="tab.items" @clickItem="onClickItem" styleType="text"
		activeColor="#39ac4f"></uni-segmented-control>

	<view class="content">
		<view v-show="tab.current === 0">
			<z-paging ref="pagingTask" @query="queryTask" v-model="task" :auto-show-system-loading="true"
				:default-page-size="pageSize" empty-view-text="抱歉，暂时还没有相关数据！" class="custom-z-paging">
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">任务名称：006</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-green" :circle="true" text="轮灌中" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list" @click="taskdetails">
										<view class="list1">
											<view><text>轮灌方案：</text>全设备</view>
											<view><text>起始值：</text>外部程曦</view>
											<view><text>开始时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>结束时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>是否调压：</text>是</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">任务名称：006</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-orange" :circle="true" text="暂停" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list">
										<view class="list1">
											<view><text>轮灌方案：</text>全设备</view>
											<view><text>起始值：</text>外部程曦</view>
											<view><text>开始时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>结束时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>是否调压：</text>是</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">任务名称：006</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-red" :circle="true" text="终止" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list">
										<view class="list1">
											<view><text>轮灌方案：</text>全设备</view>
											<view><text>起始组：</text>外部程曦</view>
											<view><text>开始时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>结束时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>是否调压：</text>是</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</z-paging>
		</view>
		<view v-show="tab.current === 1">
			<z-paging ref="pagingScenario" @query="queryScenario" v-model="scenario" :auto-show-system-loading="true"
				:default-page-size="pageSize" empty-view-text="抱歉，暂时还没有相关数据！" class="custom-z-paging">
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
							v-for="item in scenario">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">方案名称：{{item.scenarioName}}</view>
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list" @click="irrigationgroup(item)">
										<view class="list2">
											<view><text>轮灌组数量：</text>{{item.groupNum}}</view>
											<view><text>压力：</text>{{item.pressureMin}}-{{item.pressureMax}}</view>
											<view><text>总时长：</text>{{item.irrigateTotalDuration}}</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
									<view class="card-font">
										<u-button type="success" size="mini" text="编辑" @click="editScenario(item)" />
										<u-button type="success" size="mini" text="启用" />
										<u-button type="success" size="mini" text="禁用" />
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<!-- <view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">方案名称：006</view>
									</view>

								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list">
										<view class="list2">
											<view><text>轮灌组数量：</text>5</view>
											<view><text>压力：</text>0.2</view>
											<view><text>总时长：</text>10</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
									<view class="card-font">
										<u-button class="bg-red" type="success" size="mini" text="禁用" />
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view> -->
			</z-paging>
		</view>
	</view>
</template>

<script>
	import * as isApi from '@/api/irrigate/irrigateScenario.js'

	export default {
		data() {
			return {
				tab: {
					items: ['轮灌详情', '轮灌方案'],
					current: 0,
				},
				pageSize: 20,
				task: [],
				scenario: [],
			};
		},
		onShow() {},
		mounted() {},
		methods: {
			onClickItem(e) {
				if (this.tab.current != e.currentIndex) {
					this.tab.current = e.currentIndex;
				}
			},
			async queryTask() {
				this.$refs.pagingTask.completeByTotal([]);
				// this.$refs.pagingTask.completeByTotal(res.rows, res.total);
			},
			async queryScenario() {
				isApi.list({
					scenarioType: 2,
					status: "0",
					delFlag: "0",
				}).then(res => {
					this.scenario = res.rows;
					this.$refs.pagingScenario.completeByTotal(res.rows, res.total);
				})
			},
			add() {
				if (this.tab.current === 0) { //新增任务

				}
				if (this.tab.current === 1) { //新增轮灌
					uni.navigateTo({
						url: '/pages/irrigation/scenario/scenario'
					});
				}
			},
			/********************************* 任务 *********************************/
			//页面跳转
			taskdetails() {
				uni.navigateTo({
					url: '/pages/irrigation/details/taskdetails'
				});
			},

			/********************************* 方案 *********************************/
			//方案详情
			irrigationgroup(item) {
				uni.navigateTo({
					url: `/pages/irrigation/scenario/detail?id=${item.id}`
				});
			},
			editScenario(item) {
				uni.navigateTo({
					url: `/pages/irrigation/scenario/scenario?id=${item.id}`
				});
			},



			// // 页面跳转
			// config() {
			// 	uni.navigateTo({
			// 		url: '/pages/irrigation/config'
			// 	});
			// }

		},

	};
</script>

<style lang="scss" scoped>
	// 选项卡
	.segmented-control {
		background-color: #fff;
	}

	.segmented-control__item--text {
		font-weight: bold;
	}

	::v-deep .segmented-control__text {
		font-size: 16px;
	}

	.custom-z-paging {
		margin-top: 80px;
	}
</style>