<template>
	<view class="points">
		<view class="info-card">
			<view class="info-box">
				<view class="info-item" v-for="(item, index) in infoData" :key="index">
					<view><text class="grey">{{ item.key }}：</text>{{ item.value }}</view>
				</view>
			</view>
		</view>
		<scroll-view
			scroll-x="true"
			class="content-scroll"
			:show-scrollbar="false"
			enable-flex
		>
			<view
				v-for="(item, index) in positionData"
				:key="index"
				:class="navCurIndex == index ? 'active' : ''"
				class="control-item"
				@click="changeTitle(index)"
			>
				{{ item.title }}
			</view>
		</scroll-view>

		<view class="collapse-box">
			<uni-collapse ref="collapseRef" v-model="collapseValue" accordion @change="changeCollapse">
				<uni-collapse-item  v-for="(val, collapseIndex) in collapseData" :key="collapseIndex">
					<template v-slot:title>
						<uni-section class="section" :title="val.title" type="line"></uni-section>
					</template>
					<view class="content">
						<view class="content-item" v-for="(item, itemIndex) in val.children" :key="itemIndex">
							<view class="title">
								<view>{{ item.title }}</view>	
								<uni-tag :inverted="true" :text="item.tag" :type="item.tag == '重点关注' ? 'error' : 'warning'" />
							</view>
							<view class="btn">
								<button size="mini" type="primary" @click="standard(item.standard)">巡检标准</button>
								<button size="mini" type="primary" @click="history(item.history)">巡检历史</button>
							</view>
							<view :class="item.selectedImg ? '' : 'input'" v-if="item.tag">
								<uni-easyinput class="textarea" type="textarea" v-model="item.described" placeholder="请输入" />
								<uni-file-picker class="picker" mode="grid" :sourceType="['camera']" file-mediatype="image" limit="9" v-model="item.imageValue" @progress="progress"  @select="(e) => selectImg(item, e, collapseIndex, itemIndex)" @delete="deleteImg(item, $event)"><uni-icons type="camera-filled" color="#004894" size="50"></uni-icons></uni-file-picker>
								<!-- <WaterMarker :ref="el => { if (el) waterMarkRefs[`waterMarkRef_${collapseIndex}_${itemIndex}`] = el }"/> -->
								<hpy-watermark :ref="el => { if (el) waterMarkRefs[`waterMarkRef_${collapseIndex}_${itemIndex}`] = el }" @waterMark="(path) => waterMark(item, path)"></hpy-watermark>
							</view>
							<view v-else>
								<view class="state"><text>状态：</text><uni-data-checkbox class="checkbox" mode="button" v-model="item.radio" :localdata="localdata"></uni-data-checkbox></view>
								<view v-if="item.radio != 0">
									<view class="described">描述：<uni-easyinput class="textarea" type="textarea" v-model="item.described" placeholder="请输入" /></view>
									<view>照片：<uni-file-picker class="picker" mode="grid" :sourceType="['camera']" file-mediatype="image" limit="9" v-model="item.imageValue" @select="selectImg(item,$event)" @delete="deleteImg(item, $event)"><uni-icons type="camera-filled" color="#004894" size="50"></uni-icons></uni-file-picker></view>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup" background-color="#fff" @change="changePopup">
			<view class="popup-content"><text class="text">{{ popValue }}</text></view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
import ImageWatermarkPicker from "@/components/image-watermark-picker.vue"
import WaterMarker from '@/components/waterMarker.vue'
import HpyWatermark from '@/uni_modules/hpy-watermark/components/hpy-watermark/hpy-watermark.vue'

let waterMarkRefs = reactive({})

// 弹出框内容
let popValue = ref(null)
let alertDialog = ref(null)

let navCurIndex = ref(0)
// 详情信息
let infoData = reactive([
	{ key: '点位名称', value: '厂外0.4KV供电点' },
	{ key: '点位编码', value: '' },
])

// 标题信息
let positionData = reactive([
	{ id: 1, title: "左岸" },
    { id: 2, title: "右岸" },
    { id: 3, title: "大坝" }
])
let collapseRef = ref(null)
// 手风琴折叠面板默认展开内容
let collapseValue = ref('0')
// 手风琴数据
let collapseData = reactive([
	{ id: 1, title: '左岸进水口配电系统', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 2, title: '左岸排风竖井配电系统', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 3, title: '左岸尾水管配电系统(南端)', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 4, title: '左岸尾水管配电系统(北端)', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 5, title: '左岸尾水洞出口配电系统', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 6, title: '左岸水垫塘渗漏排水配电系统', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 7, title: '左岸水垫塘检修排水配电系统', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
	{ id: 8, title: '控制管理楼及左岸出线场配电系统', children: [
		{ title: '环境温湿度(°C/%)', tag: '重点关注', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: 'Ⅰ段干式变三相绕组温度', tag: '请确认', described: '', standard: '巡检标准', history: '巡检历史', imageValue: [], selectedImg: false },
		{ title: '带电显示装置及电磁锁正常;铁芯端部无散片、流胶;', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '盘柜无异常声音、气味;无放电、过热现象外观正常;开关状态及指示灯正常',radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] },
		{ title: '备自投及指示灯正常', radio: 0, described: '', standard: '巡检标准', history: '巡检历史', imageValue: [] }
	] },
])

// 单选数据
let localdata = reactive([
	{ text: '正常', value: 0 },
	{ text: '待观察', value: 1 },
	{ text: '异常', value: 2 }
])

// 切换标题
const changeTitle = (index) => {
	navCurIndex.value = index
}

// 切换手风琴面板
const changeCollapse = () => {
	// alertDialog.value.open()
}

// 弹出框
const changePopup = () => {

}

// 确认
const dialogConfirm = () => {

}

// 取消	
const dialogClose = () => {

}

const waterMark = (item, path) => {
	console.log(path);
	item.imageValue.push({ url: path });
	console.log(item.imageValue);
};

// 选择图片
const selectImg = (item, e, collapseIndex, itemIndex) => {
	item.selectedImg = true
	// 获取对应的ref key
	const refKey = `waterMarkRef_${collapseIndex}_${itemIndex}`
	const waterMarkerInstance = waterMarkRefs[refKey]
		console.log(waterMarkerInstance);

	if (waterMarkerInstance) {
		// const imgFileArr = waterMarkerInstance.callAddWaterMark(e.tempFilePaths);
		// imgFileArr.forEach((el) => {
		// 	item.imageValue.push({
		// 		url: el,
		// 		extname: el.substring(el.lastIndexOf(".") + 1),
		// 		name: el,
		// 	});
		// })
		console.log(waterMarkerInstance);
		
		var fillTexts = ["人员：张三", "地址：广东省珠海市香洲区XXX"];
		fillTexts.push("时间：");
		// 添加水印	
		waterMarkerInstance.addWaterMark({
			filePaths: e.tempFilePaths,
			fillTexts
		});
	} else {
		console.warn('未找到对应的WaterMarker实例或方法未暴露', refKey, waterMarkerInstance)
	}
}


const progress  = (item, index) => {
		uni.previewImage({
			current: index,
			urls: item.map((o) => o.url),
		});
	}

// 删除选择的图片
const deleteImg = (item,e) => {
	item.imageValue.splice(e.index, 1)
	console.log(item, e)
	
	if (item.imageValue.length == 0) {
		item.selectedImg = false
	}
}

// 巡检标准
const standard = (val) => {
	popup.value.open()
	popValue.value = val
}

// 巡检历史
const history = (val) => {
	popup.value.open()
	popValue.value = val

}
</script>

<style lang="scss" scoped>
.points {
	.content-scroll {
		height: 100rpx;
		line-height: 100rpx;
		white-space: nowrap;
		.control-item {
			width: 160rpx;
			height: 35rpx;
			line-height: 35rpx;
			display: inline-block;
			padding: 0 20rpx;
			margin-left: 30rpx;
			position: relative;
			&.active {
				padding: 15rpx 20rpx!important;
			}
		}
	}
	.collapse-box {
		margin: 10rpx 30rpx;
		border-radius: 10rpx;
		padding: 10rpx;	
		background: #fff;
		:deep(.uni-icons) {
			color: #1464BB!important;
		}
	}

	.content-item {
		padding: 20rpx;
		margin: 0 20rpx 20rpx;
		background: #F1F7FD;
		border-radius: 10rpx;
		.title, .btn, .input {
			display: flex;
			align-items: center;
		}
		.title {
			color: #004895;
			justify-content: space-between;
		}
		.btn {
			:deep(uni-button) {
				margin:30rpx 20rpx 30rpx 0!important;
			}
		}
		.input {
			.textarea {
				width: 400rpx;
				flex: none!important;
			}
			.picker {
				margin-left: 10rpx;
				:deep(.uni-file-picker__container) {
					width: 580rpx;
					height: 200rpx;
				}
			}
		}
		// .warp {
			// display: block !important;
			// :deep(.uni-file-picker__container) {
			// 	width: auto !important;
			// 	height: auto !important;
			// }
		// }
		.state {
			display: flex;
			align-items: center;
			.checkbox {
				:deep(.uni-label-pointer) {
					margin-right: 10rpx;
				}
			}
		}
		.described {
			margin: 30rpx 0;
		}
		.textarea, .picker {
			margin-top: 10rpx;
		}
	}
}
</style>