<template>
	<div class="list-detail" v-if="showDialog">
		<div class="dialog-content">
			<div class="dialog-title">
				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
				<div class="title-text">
					<i>工作票数据</i>
				</div>
			</div>
			<div class="dialog-article">
				<div class="dialog-input">
					<el-input v-model="selectTitle" placeholder="请输入工作票编号" size="small" @change="searchChange"> </el-input>
				</div>
				<div class="main-article" v-if="articleNewList.length > 0">
					<el-scrollbar class="left-content">
						<div class="content-tab">
							<div
								class="tab-box"
								:style="boxStyle(item)"
								v-for="(item, index) in articleNewList"
								:key="item.id"
								@click="activeBtn(item)"
							>
								<div class="text" :title="item.title" :style="getStyle(item)">{{ item.workTicketSn || "" }}</div>
								<div class="time">时间: {{ item.createTime || "" }}</div>
							</div>
						</div>
					</el-scrollbar>
					<div class="center-content">
						<div class="center-content-box">
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>工程名称</span>
										<div class="col-content-item">{{ detailData.projectName || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>工作票编号</span>
										<div class="col-content-item">{{ detailData.workTicketSn || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>开始时间</span>
										<div class="col-content-item">{{ detailData.startTime || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>施工班组</span>
										<div class="col-content-item">{{ detailData.constructionTeam || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>结束时间</span>
										<el-date-picker
											v-if="isEdit"
											v-model="detailData.endTime"
											type="datetime"
											format="YYYY-MM-DD HH:mm:ss"
											value-format="YYYY-MM-DD HH:mm:ss"
											:clearable="true"
										/>
										<div class="col-content-item" v-else>{{ detailData.endTime || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>初勘风险等级</span>
										<div class="col-content-item">{{ detailData.initialSurveyRiskLevel || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>执行方案名称</span>
										<div class="col-content-item">{{ detailData.executionPlanName || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>复测后的风险等级</span>
										<div class="col-content-item">{{ detailData.riskLevelAfterRetest || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>施工人数</span>
										<div class="col-content-item">{{ detailData.constructionWorkerNumber || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>作业类型、工序及部位</span>
										<div class="col-content-item">{{ detailData.rtRiskSecurityLibraryTypeStr || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="24">
									<div class="col-content">
										<span>作业部位</span>
										<div class="col-content-item" style="height: 60px">{{ detailData.workPart || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="24">
									<div class="col-content">
										<span>地理位置</span>
										<div class="col-content-item" style="height: 60px">{{ detailData.geographicalLocation || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>班组负责人</span>
										<div class="col-content-item">{{ detailData.teamLeader || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>一般作业人员</span>
										<div class="col-content-item">{{ detailData.generalOperatePersonnel || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>班组安全员</span>
										<div class="col-content-item">{{ detailData.teamSafetyOfficer || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>班组技术人员</span>
										<div class="col-content-item">{{ detailData.teamTechnicalStaff || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="24">
									<div class="col-content">
										<span>主要风险</span>
										<div class="col-content-item" style="height: 60px">{{ detailData.mainRisk || "" }}</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>作业必备条件</span>
										<div class="col-content-item" style="height: 60px">{{ detailData.jobPrerequisite || "" }}</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="col-content">
										<span>作业过程风险控制措施</span>
										<div class="col-content-item" style="height: 60px">
											{{ detailData.operationProcessRiskControlMeasure || "" }}
										</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="24">
									<div class="col-content">
										<span>现场风险复测变化情况及补充控制措施</span>
										<div class="col-content-item" style="height: 60px">
											{{ detailData.riskRetestChangesAndSupplementaryControlMeasure || "" }}
										</div>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<div class="col-content">
										<span>签发日期</span>
										<div class="col-content-item">{{ detailData.issueDate || "" }}</div>
									</div>
								</el-col>
								<el-col :span="6">
									<div class="col-content">
										<span>工作票</span>
										<el-button @click="previewFile()">预览</el-button>
									</div>
								</el-col>
								<el-col :span="6">
									<div class="col-content">
										<span>操作</span>
										<el-button @click="editOperate" v-if="!isEdit">编辑</el-button>
										<el-button @click="saveOperate" v-else>保存</el-button>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="right-content">
						<el-carousel indicator-position="none" height="450px" v-if="detailData.videoList && detailData.videoList.length > 0">
							<el-carousel-item v-for="(item, index) in detailData.videoList" :key="item.id">
								<div style="width: 100%; height: 100%">
									<ckplayerComp
										:name="0"
										:poster="''"
										:deviceIp="`http://${item.account}:${item.password}`"
										:videoUrls="item.serialNumber"
										:autoPlay="true"
									></ckplayerComp>
								</div>
							</el-carousel-item>
						</el-carousel>
						<!-- <ckplayerComp
							:name="0"
							:poster="''"
							:deviceIp="`http://${detailData.videoList[0].account}:${detailData.videoList[0].password}`"
							:videoUrls="detailData.videoList[0].serialNumber"
							:autoPlay="true"
							v-if="detailData.videoList && detailData.videoList.length > 0"
						></ckplayerComp> -->
					</div>
				</div>
				<div class="notoDta" v-else>
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<div class="close-icon" @click="closeDialog">
				<el-icon><Close /></el-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineEmits } from "vue";
import { GlobalStore } from "@/stores";
import { getWorkTicketDetail, editWorkTicketDetail } from "@/api/modules/headNoise";
import firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";
import ckplayerComp from "../../videoManagement/ckplayerComp.vue";
import { ElMessage } from "element-plus";
const isEdit = ref(false);
const detailId = ref("" as any);
const detailData = ref({} as any);
const articleNewList = ref([] as any);
const store = GlobalStore();
const selectTitle = ref("" as any);
let showDialog = ref(false as any);
const postData = ref({} as any);

const emit = defineEmits(['call-parent-function']);
// 保存操作
const saveOperate = async () => {
	const res: any = await editWorkTicketDetail({ ...detailData.value });
	if (res.success) {
		ElMessage({
			showClose: true,
			message: "操作成功",
			type: "success"
		});
		isEdit.value = false;
		emit('call-parent-function')
	}
};
// 编辑操作
const editOperate = () => {
	isEdit.value = true;
};
// 预览文件
const previewFile = () => {
	let data = JSON.parse(detailData.value.workTicket);
	if (data.length != 0) {
		let imageurl = data[0].urlJson;
		window.open("http://jxjzw.zhgdyun.com:8012/onlinePreview?url=" + imageurl);
	}
};
const getStyle = (item: any) => {
	if (item.isActive) {
		let choiseStyle = {
			color: "#4AC0F3"
		};
		return choiseStyle;
	}
	return {};
};
const activeBtn = (item: any) => {
	let currentState = item.isActive;
	if (!currentState) {
		articleNewList.value.forEach((el: any) => {
			el.isActive = false;
		});
		item.isActive = !currentState;
		detailId.value = item.id;
		detailData.value = item;
	}
	// 取消编辑态
	isEdit.value = false;
	setVideoElement();
};
const boxStyle = (item: any) => {
	if (item.isActive) {
		let choiseStyle = {
			background: `url(${firstIcon}) no-repeat`,
			backgroundSize: "100% 100%"
		};
		return choiseStyle;
	}
	return {};
};
// 列表查询工作票
const getDataList = async () => {
	let requestData = {
		projectSn: store.sn,
		type: postData.value.tip,
		workTicketSn: selectTitle.value,
		pageSize: -1
	};
	if (!requestData.type) {
		requestData.type = 2;
	}
	// 当前类型
	const res: any = await getWorkTicketDetail(requestData);
	if (res.success && res.result.records.length !== 0) {
		console.log(res);
		let newArray = res.result.records;
		newArray[0].isActive = true;
		articleNewList.value = newArray;
		detailData.value = newArray[0];
		setVideoElement();
	} else {
		articleNewList.value = [];
		detailData.value = {};
	}
};
const setVideoElement = () => {
	// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
	setTimeout(() => {
		// 获取所有的 video 元素
		var videos = document.getElementsByTagName("video");
		// 遍历所有的 video 元素
		for (var i = 0; i < videos.length; i++) {
			// 修改视频元素的样式
			videos[i].style.width = "99.9%";
			videos[i].style.height = "99.9%";
		}
	}, 1000);
}
const searchChange = (e: any) => {
	getDataList();
};
const closeDialog = () => {
	showDialog.value = false;
	postData.value = {};
};
function openDialog(obj: any) {
	postData.value = obj;
	showDialog.value = true;
}

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});
watch(
	() => showDialog.value,
	newData => {
		if (newData) {
			getDataList();
		}
	}
);
// onMounted(async () => {
// 	await getDataList();
// });
</script>

<style lang="scss" scoped>
.list-detail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 100;
	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 12%;
		top: 6%;
		width: 80%;
		height: 90%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content {
		.political-outlook {
			height: 100%;
		}
		.dialog-article {
			width: 100%;
			height: calc(100% - 50px);
			position: relative;
			.notoDta {
				top: 20%;
				width: 30%;
				left: 35%;
				position: absolute;
				text-align: center;
				img {
					width: 40%;
					margin: 5% 30%;
				}
				p {
					color: #fff;
					font-size: calc(100vw * 14 / 1920);
					margin: -6% 37%;
				}
			}
			.dialog-input {
				width: 15%;
				margin-left: 1%;
				padding: 1% 0;
			}
			.main-article {
				width: 100%;
				height: 95%;
				display: flex;
				.left-content {
					width: 25%;
					height: 100%;
					border-right: 2px solid #405e97;
					.content-tab {
						width: 90%;
						height: 100%;
						.tab-box {
							box-sizing: border-box;
							padding: 5%;
							width: 100%;
							height: 17%;
							margin-top: 5%;
							// background: url("@/assets/images/smartPartyBuilding/contentBox.png") no-repeat;
							// background-size: 100% 100%;
							.text {
								white-space: nowrap; //单行
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 14px;
								color: rgba(255, 255, 255, 0.8);
								cursor: pointer;
							}
							.time {
								margin-top: 5%;
								color: #a1accb;
								font-size: 12px;
							}
						}
					}
				}
				.center-content {
					box-sizing: border-box;
					padding: 0 2%;
					width: 50%;
					height: 100%;
					&-box {
						:deep() {
							.el-row:not(:first-child) {
								margin-top: 15px;
							}
						}
						.col-content {
							display: flex;
							align-items: center;
							span {
								width: 100px;
								display: inline-block;
								text-align: right;
								margin-right: 10px;
								color: white;
							}
							&-item {
								color: white;
								flex: 1;
								border: 1px solid #2f5db7;
								background-color: #08203a;
								color: white;
								text-indent: 0.5em;
								height: 40px;
								overflow-wrap: anywhere;
								overflow-y: scroll;
							}
						}
					}
				}
				.right-content {
					width: 30%;
					height: 50%;
				}
			}
		}
		.close-icon {
			position: absolute;
			right: 3%;
			top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}
		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			.title-img {
				width: 3%;
				height: 3%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.title-text {
				margin-left: 1%;
			}
		}
	}
}
.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
// element 组件样式
:deep() {
	.el-date-editor .el-range-input,
	.el-range-separator,
	.el-form-item__label {
		color: #fff;
	}
	.el-input__wrapper {
		background: #112d59;
	}
	.el-input__inner {
		color: #fff;
	}
	.el-button {
		background-color: #2758c0;
		color: white;
		border-color: transparent;
	}
}
</style>
