<template>
	<view style="width: 100%">
		<view class="paiban">
			<view class="item-box">
				<view class="">
					<view class="item">
						<view class="name">
							<text class="label">接班员：</text>
							<input type="text" v-model="detail.recipientName" class="desc" />
						</view>
						<view class="name">
							<text class="label">交班开始时间：</text>
							<view class="desc">
								<uni-datetime-picker v-model="detail.startTime">
								</uni-datetime-picker>
							</view>
						</view>
						<view class="name">
							<text class="label">交班结束时间：</text>
							<view class="desc">
								<uni-datetime-picker style="border:0" v-model="detail.endTime">
								</uni-datetime-picker>
							</view>
						</view>
						<view class="name">
							<text class="label">选择模板：</text>
							<view class="desc" v-if="TemplateData.length>0" @click="open">
								{{TemplateData[curIndex].name}}
							</view>
							<view class="desc" v-else>
								添加模板
							</view>
						</view>
						<view class="name ">
							<text class="label">交班事宜：</text>
							<view class="fuwenben">
								<piaoyiEditor :values="values" @changes="saveContens" :readOnly="readOnly"
									:photoUrl="photoUrl" :api="api" :name="name" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button type="primary" class="edit-btn" @click="save">提交</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="mobanbox">
				<view :class="['mobanitem',curIndex===index?'curmoban':'']" v-for="(item,index) in TemplateData"
					:key="index" @click="changemoban(index)">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<script setup>
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	import {
		addHandover,
		getHandover
	} from "@/api/handover/index.ts";
	import {
		listHandoverTemplate
	} from "@/api/handoverTemplate/index.ts";

	import mixin from "@/mixins/myLoadMore";
	import {
		onLoad,
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted
	} from 'vue';

	onLoad((option) => {
		getlistHandoverTemplate()
	})
	onHide(() => {
		console.log('setup中的onHide');
	})
	onReady(() => {
		console.log('setup中的onReady');
	})
	let finished = ref(false)
	let popup = ref(null)
	let total = ref(0)
	let curIndex = ref(0)
	
	let detail = reactive({})
	let TemplateData = ref([])
	let moban = reactive({
		name: ''
	})
	let readOnly = ref(false) //是否只读
	let photoUrl = ref('http://test.com') //服务器图片域名或者ip
	let api = ref('/upload') //上传图片接口地址
	let values = ref('<p>模版3</p>')
	let name = ref('file')

	let loading = ref(false);

	function saveContens(e) {
		// txt.value = e.html
		console.log('eee', e)
		let obj = JSON.parse(JSON.stringify(detail))
		obj.remark =e.html
		detail = JSON.parse(JSON.stringify(obj))
	}

	function open() {
		popup.value.open()
	}
	//跳转详情页
	function save() {
		if(detail.recipientName===''){
			return
		}
		console.log('detai,',detail)
		addHandover(detail).then(
			(res) => {
				if (res.code == 200) {
					uni.showToast({
						title:'提交成功'
					})
				}
			}
		);
	}

	function changemoban(index) {
		curIndex.value = index
		popup.value.close()
		let obj = JSON.parse(JSON.stringify(detail))
		obj.remark = TemplateData.value[index].content
		detail = JSON.parse(JSON.stringify(obj))
		values.value=TemplateData.value[index].content
		console.log('detail', detail, TemplateData.value[index].content)
		console.log(2222, detail.remark)
		console.log(3333, values.value)
	}



	function getlistHandoverTemplate() {
		listHandoverTemplate({
			pageNum: 1,
			pageSize: 20
		}).then(
			(res) => {
				console.log('res模板', res)
				if (res.code == 200) {
					TemplateData.value = res.rows
					console.log('res模板', TemplateData.value)
				}
			}
		);
	}
	
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
		font-size: 28rpx;
		color: #3d3d3d;
		min-height: 100vh;

		.mobanbox {
			background-color: #ffffff;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			border-radius: 30rpx 30rpx 0 0;

			.mobanitem {
				height: 60rpx;
				border-bottom: 1rpx solid #f5f5f5;
				margin-bottom: 20rpx;
				text-align: center;
			}

			.curmoban {
				color: #00aaff;
			}
		}

		.btn-box {
			margin: 0 30rpx;
		}

		.paiban {
			padding-top: 10rpx;

			.top {
				text-align: right;
				margin: 0 30rpx 10rpx;
			}

			.nav2 {
				margin: 0 20rpx;

				::v-deep {
					.u-tabs__wrapper__nav__item {
						width: 50%;
						background-color: #f5f5f5;
						padding: 0;

						.u-tabs__wrapper__nav__item__text {
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

				}

			}

			.item-box {

				overflow: hidden;

				.title {
					font-size: 30rpx;
					font-weight: 600;
					box-sizing: border-box;
					padding: 0 24rpx;
					height: 88rpx;
					line-height: 88rpx;
					background-color: #f5f5f5;
				}

				.item {
					margin: 20rpx 24rpx 28rpx;
					line-height: 48rpx;
					box-sizing: border-box;
					border-radius: 20rpx 20rpx;
					box-sizing: border-box;

					::v-deep {
						ol {
							padding-left: 26rpx !important;
							margin-left: 0 !important;
						}

						.uni-date-editor--x {
							border: 0;
						}

						.uni-date-x {
							background-color: transparent;
						}
					}

					.name {
						font-weight: 600;
						color: #444;
						display: flex;
						flex-direction: column;
						margin-bottom: 24rpx;
					}

					.fuwenben {
						background: #fefefe;
						margin-top:10rpx;
					}

					.label {
						flex: none;
						display: inline-block;
						width: 210rpx;
						text-align: justify;
						text-justify: inter-word;

					}

					.desc {
						font-weight: 500;
						color: #666;
						border: 1rpx solid #e6e6e6;
						padding: 0 20rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-top: 10rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
					}

				}

			}
		}
	}
</style>