<template>
	<page-meta :page-font-size="$store.state.vuex_fontsize+'px'" :root-font-size="$store.state.vuex_fontsize+'px'"></page-meta>
	<view class="con">
		<view class="top-box">
			<view class="top-title-box">{{detail.projectName}}</view>
			<view class="subtitle-box">
				<view class="subtitle1">{{detail.handbookName}}</view>
				<view :class="detail.type==0?'subtitle2':'subtitle2-2'">{{detail.type==0?'现场履职':'班组履职'}}</view>
			</view>
			<view class="people-box">
				<view class="people1">履职人：{{detail.nickName}}</view>
				<view class="time">{{detail.createTime?detail.createTime.substr(0,16):''}}</view>
			</view>
			<view class="people-box">
				<view v-if='detail.otherUserName' class="people2">同行人：{{detail.otherUserName}}</view>
			</view>
		</view>
		<view class="title-box" v-if="isOther==false&&detail!=''">{{detail.children[classIndex].name}}</view>
		<view class="title-box" v-if="isOther">其他情况</view>
		<view class="content-problem" v-if="isOther==false">
			<view class="content-box" v-if="detail!=''">
				<view class="content-name">
					{{(1+parseInt(classIndex2))+'. '+detail.children[classIndex].children[classIndex2].name}}
				</view>
				<view class="content-content">
					{{detail.children[classIndex].children[classIndex2].content}}
				</view>
			</view>
		</view>

		<view class="content-problem">

			<view class="problem-box">
				<view class="problem-top-box">
					<view class="problem-title">发现问题</view>
					<!-- 	<view class="jc-one-btns">
						<u-icon class="jc-one-icon" size="18" name="checkmark-circle" color="rgb(96, 98, 102)"></u-icon>
						<u-icon class="jc-one-icon" size="18" name="warning-fill" color="#F56C6C"
							style="margin-left:50%">
						</u-icon>
					</view> -->
					<view class="copy-box" @click="gotoCopy">复制</view>
				</view>
			</view>
		</view>

		<view class="content-problem" v-for="(itemForm,index) in form" :key="index">
			<view class="problem-box">

				<!-- <view class="wwt-box">无问题</view> -->
				<view class="problem-form-box">
					<u--form labelPosition="left" :model="form[index]" :ref="'uForm'+index" :labelStyle="{'fontWeight': 'bold'}">
						<u-form-item label="现场情况:" prop="remark" borderBottom labelWidth="70">
							<text class="txt">{{form[index].remark}}</text>
						</u-form-item>
						<u-form-item v-if="isShow()" label="责任人:" prop="responsiblePerson" borderBottom labelWidth="70">
							<text class="txt">{{form[index].responsiblePerson}}</text>
						</u-form-item>
						<u-form-item label="照片:" prop="photo" labelWidth="70">
							<u-album :singleSize="70" :urls="getimg(form[index].img)"></u-album>
						</u-form-item>
					</u--form>
				</view>
			</view>
			<view class="problem-box" v-if="form[index].zgType==1">
				<view class="problem-form-box">
					<u--form labelPosition="left" :model="form[index]" :ref="'uForm'+index" :labelStyle="{'fontWeight': 'bold'}">
						<u-form-item label="整改描述:" prop="remark" borderBottom labelWidth="70">
							<text class="txt">{{form[index].zgRemark}}</text>
						</u-form-item>
<!-- 						<u-form-item v-if="isShow()" label="责任人:" prop="responsiblePerson" borderBottom labelWidth="70">
							<text class="txt">{{form[index].responsiblePerson}}</text>
						</u-form-item> -->
						<u-form-item label="照片:" prop="photo" labelWidth="70">
							<u-album :singleSize="70" :urls="getimg(form[index].zgImg)"></u-album>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>







			<!-- 复制弹出框 -->
			<view>
				<u-modal :show="copyShow" title="履职内容" confirmText="复制" cancelText="取消" :showCancelButton='true'
					@cancel="copyCancel" @confirm="copyConfirm" confirmColor="#24BD8E">
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-modal>
			</view>
		</view>
</template>

<script>
	import {
		baseUrl
	} from '../../config.js'
	import {
		getRecordInfo,
		getRecordProblem
	} from '@/api/handbook.js'
	import auth from "@/plugins/auth.js"
	export default {
		data() {
			return {
				id: "",
				detail: {},
				classIndex: "",
				classIndex2: "",
				form: {},
				copyShow: false,
				content: ``,
				isOther: false,
			}
		},
		onLoad(option) {
			this.id = option.id;
			if (option.isOther == 1) {
				this.isOther = true;
			}

			this.classIndex = option.classIndex;
			this.classIndex2 = option.classIndex2;
			this.getRecordInfo(option.id);
		},
		methods: {
			isShow() {
				console.log(auth.hasPermi('system:config:showResponsiblePerson'));
				return auth.hasPermi('system:config:showResponsiblePerson');
			},
			getRecordInfo(id) {
				getRecordInfo(id).then(res => {
					this.detail = res.data;

					if (this.isOther) {
						this.getRecordProblem(this.detail.id, 1);
					} else {
						let indexId = this.detail.children[this.classIndex].children[this.classIndex2].id;
						this.getRecordProblem(this.detail.id, indexId);
					}

				})
			},
			getRecordProblem(recordId, indexId) {
				getRecordProblem({
					recordId: recordId,
					indexId: indexId
				}).then(res => {
					this.form = res.data.list;

				})

			},
			getimg(jsonStr) {
				let jsonData = jsonStr ? JSON.parse(jsonStr) : [];
				let urls = []
				jsonData.forEach(item => {
					urls.push(baseUrl + item.url);
				})
				return urls
			},
			// 点击复制按钮
			gotoCopy() {
				this.copyShow = true;
				var copyData = [];
				this.form.forEach((e, i) => {
					copyData.push(
						i + 1 + '、' + e.remark + '。'
					)
				})
				this.content =
					`${this.detail.projectName}项目在${this.detail.createTime}${this.detail.type==0?'现场履职':'班组履职'}，发现以下问题：<br>${copyData.join('<br>')}`
			},
			copyCancel() {
				this.copyShow = false;
			},
			copyConfirm() {
				this.copyShow = false;
				this.copyToClipboard(this.content.replace(/<br\s*\/?>/g, "\r"));
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			},
			copyToClipboard(text) {
				try {
					// navigator.clipboard.writeText(text);
					uni.setClipboardData({
						data: text,
						success: function() {
							console.log('success');
						}
					});
					console.log('内容已复制到剪贴板');
				} catch (err) {
					console.error('复制到剪贴板失败', err);
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.con {
		background-color: #FAFAFA;
	}

	.top-box {
		font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
		display: flex;
		flex-direction: column;
		background-color: white;
		padding: 10px;
		margin: 10px;
		box-shadow: 0px 0px 2px 0px #ccc;

		.top-title-box {
			font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
			font-weight: 700;
			font-size: 16px;
			letter-spacing: normal;
			color: #333333;
			margin-bottom: 8px;
		}

		.subtitle-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: '微软雅黑', sans-serif;
			font-weight: bold;
			font-size: 14px;
			letter-spacing: normal;
			color: #666;
			margin-bottom: 8px;

			.subtitle2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;
				height: 25px;
				border: none;
				border-radius: 5px;
				background: linear-gradient(180deg, #FEC52B 0%, #FC7833 100%);
				box-shadow: none;
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #FFFFFF;
			}

			.subtitle2-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;
				height: 25px;
				border: none;
				border-radius: 5px;
				background: linear-gradient(180deg, #2BF3FE 0%, #348BFC 100%);
				box-shadow: none;
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #FFFFFF;
			}
		}

		.people-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: '微软雅黑', sans-serif;
			font-weight: 400;
			font-size: 14px;
			letter-spacing: normal;
			color: #666;
			margin-top: 5px;

			.time {
				font-size: 13px;
				color: #999999;
			}
		}
	}

	.box-first {
		margin: 10px;
		margin-bottom: 10px;
		height: 71px;
		background-color: white;
		box-shadow: 0px 0px 2px 0px #ccc;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 10%;
		}

		.content {
			width: 70%;
			margin-left: 5px;

			.title {
				font-size: 17px;
				font-weight: bold;
				color: #333333;
			}

			.subtitle {
				font-size: 13px;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}

		.right {
			width: 20%;
			font-size: 14px;
			color: #13BC6A;
			font-weight: bold;

		}
	}

	.title-box {
		margin: 10px;
		margin-top: 20px;
		overflow: auto;
		display: flex;
		font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 19px;
		box-sizing: border-box;
		padding: 5px;
	}

	.content-problem {
		margin: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(242, 242, 242);
		box-sizing: border-box;
		box-shadow: 0px 0px 2px 0px #ccc;
		background: #ffffff;
		padding: 5px;

		.content-box {
			.content-name {
				font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
				font-weight: bold;
				font-style: normal;
				font-size: 16px;
				color: #000000;
				text-align: left;
				line-height: 28px;
				padding: 5px;
			}

			.content-content {
				background: inherit;
				background-color: rgba(255, 255, 255, 1);
				box-sizing: border-box;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(228, 228, 228, 1);
				// border-radius: 16rpx;

				font-size: 14px;
				color: #333;
				text-align: left;
				line-height: 20px;
				padding: 8px;
			}
		}

		.problem-box {
			margin: 10px;

			.problem-top-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.problem-title {
					font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
					font-weight: bold;
					font-style: normal;
					font-size: 16px;
					color: rgb(217, 0, 27);
					text-align: left;
					line-height: 28px;

				}

				.jc-one-btns {
					display: flex;
					align-items: center;
					// margin-left: 50%;
				}

				.copy-box {
					width: 35px;
					height: 24px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: 'Font Awesome 5 Pro', sans-serif;
					font-weight: 400;
					font-style: normal;
					font-size: 13px;
					letter-spacing: 1px;
					color: #16B988;
					background-color: #E6F4ED;
					box-sizing: border-box;
					border-width: 1px;
					border-style: solid;
					border-color: #16B988;



				}
			}

			.txt {
				color: #333;
				font-size: 14px;

			}

			.wwt-box {
				font-family: 'Font Awesome 5 Pro', sans-serif;
				font-weight: 400;
				font-style: normal;
				letter-spacing: 1px;
				font-size: 16px;
				color: #19BE6B;
				line-height: 13px;
				text-align: center;
				margin: 20px 0px;
			}
		}
	}
</style>