<template>
	<z-paging ref="paging" @query="queryList" v-model="dataList" :auto-show-system-loading="true"
		empty-view-text="抱歉，暂时还没有相关数据！" :pull-refresh="false">
		<template #top>
			<!-- 顶部导航栏 -->
			<custom-nav-bar :left="true" @leftClick="" title="分享" />
		</template>
		<view class="card">
			<uni-collapse>
				<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
					v-for="item in dataList">
					<template v-slot:title>
						<view class="cards-title">
							<view>
								<view class="text">{{ item.groupName }}</view>
								<view></view>
								<view>已选：{{item.wos.length}}</view>
							</view>
						</view>
					</template>
					<view class="content">
						<view class="cards-content">
							<view class="greybar" v-for="wo in item.wos">
								<view>出水口：<span>{{ wo.woName }}</span></view>
								<view v-if="wo.deviceTypeKey == 'valve'">三通阀
									<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}</span>
									<span v-if="wo.angle">
										({{`${valveKey[wo.deviceTypeKey][wo.angle.valveNo]}-${wo.angle.anglePercent}`}})
									</span>
								</view>
								<view v-if="wo.deviceTypeKey == 'fiveValve'">五通阀
									<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}开</span>
									<span v-if="wo.angle">
										({{`${wo.angle.angleKey == 'open' ? '开':'关'}-${wo.angle.anglePercent}`}})
									</span>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</z-paging>
</template>
<script>
	import * as isApi from '@/api/irrigate/irrigateScenario.js'

	export default {
		data() {
			return {
				landId: null,
				dataList: [],
				valveKey: {
					"valve": {
						"1": "①开",
						"2": "②开",
						"3": "全开 ",
						"4": "全关",
					},
					"fiveValve": {
						"1": "①",
						"2": "②",
						"3": "③",
						"4": "④",
					}
				},
				disabled: false
			}
		},
		onLoad(par) {
			this.landId = par.landId;
			this.queryList();
		},
		onShow() {},
		mounted() {},
		methods: {
			queryList() {
				isApi.getBatchControlList(this.landId).then(res => {
					if (res.data) {
						this.$refs.paging.completeByTotal(res.data.groups || []);
					} else {
						this.$refs.paging.completeByTotal([]);
					}

				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		padding-bottom: 38px !important;
	}

	::v-deep .uni-forms {
		margin-right: 10px;
		padding: 0 !important;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0 !important;
	}

	::v-deep .uni-forms-item__label {
		min-width: 0 !important;
		width: auto !important;
		font-size: 0.8rem;
		height: inherit;
		padding: 0;
	}

	::v-deep .uni-easyinput__content-input {
		height: 20px;
		width: 50px;
		padding-left: 5px !important;
	}
</style>