<template>
	<view class="addIssue">
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					{{ onEditType ? '编辑作业票' : '新增作业票'}}
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
			<u-steps
				:class="{'steps_1': current == 1, 'steps_1 steps_2': current == 2, 'steps_3': workTicketBindCamera == 0}"
				:list="numList" :current="current"></u-steps>
			<view class="content_main" v-if="current == 0">
				<view class="header-title">基础信息</view>
				<view class="main-box">
					<view class="box1">
						<view><text>*</text>工作票类型:</view>
						<view>{{workTicketTypeDetail.typeName}}</view>
					</view>
					<view class="box1">
						<view>工作票编号:</view>
						<view><u-input v-model="workTicketInfo.workTicketNumber" placeholder="请输入" type="text"
								:border="true" /></view>
					</view>
					<view class="box1">
						<view>施工区域:</view>
						<view @click="onClickType(1)">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.constructionAreasName"
								type="text" :border="true" placeholder="请选择" />
						</view>
					</view>
					<view class="box1">
						<view>施工地点:</view>
						<view><u-input v-model="workTicketInfo.constructionAddr" placeholder="请输入" type="text"
								:border="true" /></view>
					</view>
					<view class="box1">
						<view>申请单位:</view>
						<view @click="onClickType(2)">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.applicantsName"
								type="text" :border="true" placeholder="请选择" />
						</view>
					</view>
					<!-- 敦煌升级 -->
					<!-- <view class="box1">
						<view><text>*</text>施工区域:</view>
						<view @click="onClickType(1)">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.constructionAreasName"
								type="text" :border="true" placeholder="请选择" />
						</view>
					</view>
					<view class="box1">
						<view><text>*</text>施工地点:</view>
						<view><u-input v-model="workTicketInfo.constructionAddr" placeholder="请输入" type="text"
								:border="true" /></view>
					</view>
					<view class="box1">
						<view><text>*</text>申请单位:</view>
						<view @click="onClickType(2)">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.applicantsName"
								type="text" :border="true" placeholder="请选择" />
						</view>
					</view>
					<view class="box1">
						<view><text>*</text>风险级别:</view>
						<view>
							<u-radio-group v-model="workTicketInfo.riskType">
								<u-radio :name="1">
									一般风险
								</u-radio>
								<u-radio :name="2">
									高风险
								</u-radio>
							</u-radio-group>
						</view>
					</view>

					<!-- 敦煌升级 -->
					<!-- 
					<view class="box1">
						<view>班组:</view>
						<view @click="onClickType(4)">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.teamNames"
								type="text" :border="true" placeholder="请选择" />
						</view>
					</view> -->
					<view class="box1">
						<view>申请时间:</view>
						<view>{{workTicketInfo.applicationTime}}</view>
					</view>
					<view class="box1">
						<view>施工时间:</view>
						<view>
							<view class="changetime" @click="constructionTimeShow = true">
								<view class="changetime_icon"></view>
								<view>{{ workTicketInfo.constructionTimeBegin }}</view>
								<view>-</view>
								<view>{{ workTicketInfo.constructionTimeEnd }}</view>
								<view class="changetime_icon"></view>
							</view>
							<u-calendar v-model="constructionTimeShow" mode="range" :max-date="'2300-01-01'"
								@change="onConstructionTimeChange"></u-calendar>
						</view>
					</view>
					<view class="box1">
						<view>作业人员:</view>
						<view class="textarea">
							<u-input :clearable="false" v-model="workTicketInfo.operator" :maxlength="200"
								placeholder="请输入" type="textarea" :border="true" />
							<view class="textarea_text"><text>{{workTicketInfo.operator.length}}</text>/200</view>
						</view>
						<!-- <view @click="operatorShow = true">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.operatorsName" type="text"
								:border="true" placeholder="请选择" />
						</view> -->
					</view>
					<view class="box1">
						<view><text>*</text>作业内容:</view>
						<view class="textarea">
							<u-input :clearable="false" v-model="workTicketInfo.workContent" :maxlength="1000"
								placeholder="请输入" type="textarea" :border="true" />
							<view class="textarea_text"><text>{{workTicketInfo.workContent.length}}</text>/1000</view>
						</view>
					</view>
					<view class="box1">
						<view>安全措施:</view>
						<view class="textarea">
							<u-input :clearable="false" v-model="workTicketInfo.safetyMeasure" :maxlength="1000"
								placeholder="请输入" type="textarea" :border="true" />
							<view class="textarea_text"><text>{{workTicketInfo.safetyMeasure.length}}</text>/1000</view>
						</view>
					</view>
					<view class="box1 box2">
						<view><text>*</text>作业票附件:</view>
						<view class="imgBox_wrap">
							<view class="imgBox" v-show="workTicketAttachmentList.length>0"
								v-for="(item,index) in workTicketAttachmentList" :key="index">
								<image :src="url_config+'image/'+item.url" class="img"
									@click="previewImage(url_config+'image/'+item.url)">
								</image>
								<view @click="deleteImg(item,1)" style="margin: 5px;" class="deleteImg"></view>
							</view>
							<view class="addImgBox" @click="uploadImg(1)" v-if="workTicketAttachmentList.length<5">
								<image src="/static/workTicketManage/index-icon8.png" class="icon-add"></image>
							</view>
						</view>
					</view>
					<!-- <view class="box1 box2">
						<view>安全风险分析:</view>
						<view class="imgBox_wrap">
							<view class="imgBox" v-show="safetyRiskAnalysisList.length>0"
								v-for="(item,index) in safetyRiskAnalysisList" :key="index">
								<image :src="url_config+'image/'+item.url" class="img"
									@click="previewImage(url_config+'image/'+item.url)">
								</image>
								<view @click="deleteImg(item,2)" style="margin: 5px;" class="deleteImg"></view>
							</view>
							<view class="addImgBox" @click="uploadImg(2)" v-if="safetyRiskAnalysisList.length<5">
								<image src="/static/workTicketManage/index-icon8.png" class="icon-add"></image>
							</view>
						</view>
					</view> -->
					<view class="box1 box2">
						<view>其他附件:</view>
						<view class="imgBox_wrap_list">
							<!--  #ifdef H5  -->
							<view class="addImgBox_btn" @click="uploadImg(3)">上传附件</view>
							<!--  #endif  -->
							<!--  #ifdef APP-PLUS  -->
							<view class="addImgBox_btn" @tap="attchChoose.onClick">上传附件</view>
							<!--  #endif  -->
							<!-- <view class="addImgBox_text">
								只能上传jpg/png文件，且不超过100Mb
							</view> -->
							<view class="imgBox_list imgBox_list_active"
								@click="previewImage(url_config+'image/'+item.url)"
								v-show="otherAttachmentList.length>0" v-for="(item,index) in otherAttachmentList"
								:key="index">
								<view>
									<u-icon name="file-text"></u-icon>
									<view>{{item.name}}</view>
								</view>
								<!-- <u-icon name="checkmark-circle"></u-icon> -->
								<view @click.stop="deleteImg(item,3)">
									<u-icon name="close-circle"></u-icon>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_main1" v-else-if="current == 1">
				<view class="header-title">
					<view>绑定工作票监控</view>
					<view @click="issueInvoiceShow = true">
						<view></view>
						<view>去绑定</view>
					</view>
				</view>
				<view class="content_main-box" v-for="item in policeCameraItemListUp" :key="item.itemId">
					<view>
						<view>{{item.devName}}</view>
						<view @click="onDelete(item)">
							<!-- <u-icon name="trash"></u-icon> -->
							<image src="/static/icon-delete.png"></image>
						</view>
					</view>
					<view class="">
						<image v-if="item.pic" :src="url_config + 'image/' + item.pic" mode=""></image>
						<image v-else src="/static/staffAttendance/attendance-bg2.png" mode=""></image>
						<view>
							<view>
								<view>使用人</view>
								<view>{{item.userNames ? item.userNames : '--'}}</view>
							</view>
							<view>
								<view>编号</view>
								<view>{{item.devSn}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_main2" v-else-if="current == 2">
				<view :class="{'edit_img': onEditType}"></view>
				<view>工作票已{{onEditType ? '编辑' : '添加'}}完成，是否立即开始作业?</view>
				<view>
					<u-icon name="info-circle"></u-icon>
					<view>点击立即开始后，将会下发工单任务至执法记录仪设备中，施工员需要到设备的工单任务中点击开始执行工单任务进行录音、录像、拍照。</view>
				</view>
			</view>
			<view class="confrim-btn" v-if="current != 2">
				<view v-if="current == 1" @click="onLastStep">上一步</view>
				<view v-else @click="onNavigateBack">取消</view>
				<view @click="onNextStep">下一步</view>
			</view>
			<view class="confrim-btn" v-else>
				<view @click="onNavigateDetail(1)">不，暂时保存</view>
				<view @click="onChangeState(1)">是，立即开始</view>
			</view>
		</view>
		<u-popup :mask-close-able="false" v-model="issueInvoiceShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header">
					绑定方式
				</view>
				<view class="content-popup_main">
					<view :class="{'popup_main_active': bindingModeType == 1}" @click="bindingModeType = 1">去设备列表选择
					</view>
					<view :class="{'popup_main_active': bindingModeType == 2}" @click="bindingModeType = 2">直接扫码添加
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="issueInvoiceShow = false;">取消</view>
					<view @click="onSubmit">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :mask-close-able="false" v-model="constructionAreasShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header">
					施工场站
				</view>
				<scroll-view v-if="qualityRegionList.length > 0" scroll-y="true" style="max-height: 600rpx;">
					<TreeView @node-click="onConstructionAreasClick" :multiple="true"
						checked-bg-color="rgba(81,129,246,0.1)" :data="qualityRegionList" :children-key="'children'"
						:label-key="'regionName'" :id-key="'id'" :value="constructionAreasList" />
				</scroll-view>
				<view class="new-nodata_height" v-else>
					<view class="new-nodata">
						<view></view>
						<text>暂无数据...</text>
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="onCancelClick(1)">取消</view>
					<view @click="onSubmitType(1)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :mask-close-able="false" v-model="applicantsShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header">
					申请单位
				</view>
				<scroll-view v-if="enterpriseInfoList.length > 0" scroll-y="true" style="max-height: 600rpx;">
					<TreeView @node-click="onApplicantsClick" :multiple="true" checked-bg-color="rgba(81,129,246,0.1)"
						:data="enterpriseInfoList" :children-key="'children'" :label-key="'enterpriseName'"
						:id-key="'id'" :value="applicantsList" />
				</scroll-view>
				<view class="new-nodata_height" v-else>
					<view class="new-nodata">
						<view></view>
						<text>暂无数据...</text>
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="onCancelClick(2)">取消</view>
					<view @click="onSubmitType(2)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :mask-close-able="false" v-model="teamShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header">
					班组
				</view>
				<scroll-view v-if="teamOptionList.length > 0" scroll-y="true" style="max-height: 600rpx;">
					<TreeView @node-click="onTeamClick" :multiple="true" checked-bg-color="rgba(81,129,246,0.1)"
						:data="teamOptionList" :children-key="'children'" :label-key="'teamName'" :id-key="'id'"
						:value="teamIdList" />
				</scroll-view>
				<view class="new-nodata_height" v-else>
					<view class="new-nodata">
						<view></view>
						<text>暂无数据...</text>
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="onCancelClick(4)">取消</view>
					<view @click="onSubmitType(4)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :mask-close-able="false" v-model="operatorShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header">
					作业人员
				</view>
				<scroll-view v-if="selectWorkerInfoList.length > 0" scroll-y="true" style="max-height: 600rpx;">
					<TreeView @node-click="onOperatorClick" :multiple="true" checked-bg-color="rgba(81,129,246,0.1)"
						:data="selectWorkerInfoList" :children-key="'children'" :label-key="'workerName'" :id-key="'id'"
						:value="operatorsList" />
				</scroll-view>
				<view class="new-nodata_height" v-else>
					<view class="new-nodata">
						<view></view>
						<text>暂无数据...</text>
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="onCancelClick(3)">取消</view>
					<view @click="onSubmitType(3)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />

		<u-modal @cancel="onCancel" @confirm="onConfirm" v-model="submitShow" confirm-text="确认绑定"
			:show-cancel-button="true" cancel-text="重新扫码">
			<view class="slot-content">
				<view class="content_main-box1">
					<view>
						<view>{{policeCameraItemInfo.devName}}</view>
						<view :class="{'boundalready': policeCameraItemInfo.bindTicket == 1}">
							{{policeCameraItemInfo.bindTicket == 1 ? '已绑定' : '空闲'}}
						</view>
					</view>
					<view class="">
						<image v-if="policeCameraItemInfo.pic" :src="url_config + 'image/' + policeCameraItemInfo.pic"
							mode=""></image>
						<image v-else src="/static/staffAttendance/attendance-bg2.png" mode=""></image>
						<view>
							<view>
								<view>使用人</view>
								<view>{{policeCameraItemInfo.userNames ? policeCameraItemInfo.userNames : '--'}}</view>
							</view>
							<view>
								<view>编号</view>
								<view>{{policeCameraItemInfo.devSn}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import TreeView from '@/components/tree-view/TreeView.vue';
	import {
		handleAuthScan
	} from "@/common/permissionTips"
	export default {
		components: {
			TreeView
		},
		data() {
			return {
				mobileTopHeight: 0,
				projectDetail: {},
				numList: [{
					name: '基础信息'
				}, {
					name: '绑定工作票监控'
				}, {
					name: '完成'
				}, ],
				current: 0,
				issueInvoiceShow: false,
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				imgFileList: [],
				workTicketTypeDetail: {},
				workTicketInfo: {
					workTicketNumber: `GZP${Date.now()}`,
					applicants: [],
					applicantsName: "",
					teamIds: [],
					teamNames: "",
					constructionAreas: [],
					constructionAreasName: "",
					applicationTime: "",
					constructionTimeBegin: "",
					constructionTimeEnd: "",
					operatorsName: "",
					operators: [],
					workContent: "",
					safetyMeasure: "",
					constructionAddr: "",
					operator: "",
					riskType: 1,
				},
				// 区域
				qualityRegionList: [],
				constructionAreasList: [],
				constructionAreasNameList: [],
				constructionAreasShow: false,
				// 申请单位
				enterpriseInfoList: [],
				applicantsList: [],
				applicantsNameList: [],
				applicantsShow: false,
				// 班组
				teamOptionList: [],
				teamIdList: [],
				teamNameList: [],
				teamShow: false,
				// 作业人员
				selectWorkerInfoList: [],
				operatorShow: false,
				operatorsList: [],
				operatorsNameList: [],
				constructionTimeShow: false,
				safetyRiskAnalysisList: [],
				workTicketAttachmentList: [],
				otherAttachmentList: [],
				bindingModeType: 1,
				selectList: [],
				policeCameraItemList: [],
				submitShow: false,
				workTicketBindCamera: 0,
				workTicketId: "",
				onEditType: "",
				policeCameraItemInfo: {},
				userInfo: {},
				imageValue: [],
			}
		},
		onLoad(opts) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.log(1111, opts, this.projectDetail)
			if (opts.edit) {
				this.onEditType = opts.edit
				this.workTicketId = opts.workTicketId;
				this.getWorkTicketQueryByIdFn();
			} else {
				this.workTicketInfo.typeId = opts.id;
				this.workTicketInfo.applicationTime = this.$dayjs().format("YYYY-MM-DD HH:mm:ss")
				this.getWorkTicketTypeQueryByIdFn(opts.id);
				this.getQueryBindRegionsFn()
			}

			this.getQualityRegionListFn();
			this.getEnterpriseInfoListFn();
			this.getProjectConfigListFn();
		},
		onShow() {
			let that = this
			uni.$on('updateData', function(data) {
				if (data) {
					const resultList = JSON.parse(data);
					if (resultList.length > 0) {
						that.selectList = [...that.selectList, ...resultList];
					}
				}
				console.log('监听到事件来自 updateData ，携带参数为：' + data);
			})
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
		},
		methods: {
			async chooseFile(data) {
				try {
					var that = this
					const fileUrl = await this.base64toPath(data.base64Str, data.attachName);
					uni.uploadFile({
						url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
						filePath: fileUrl.localAbsolutePath,
						name: 'files',
						success: (uploadFileRes) => {
							let data = {
								name: JSON.parse(uploadFileRes.data).data[0].filename,
								url: JSON.parse(uploadFileRes.data).data[0].imageUrl
							};
							that.otherAttachmentList.push(data)
						}
					});
				} catch (e) {
					console.log("err", e);
				}
			},
			async base64toPath(base64, attachName) {
				let _that = this;
				return new Promise(function(resolve, reject) {
					const filePath = `_doc/yourFilePath/${attachName}`;
					plus.io.resolveLocalFileSystemURL('_doc', function(entry) {
						entry.getDirectory("yourFilePath", {
							create: true,
							exclusive: false,
						}, function(entry) {
							entry.getFile(attachName, {
								create: true,
								exclusive: false,
							}, function(entry) {
								entry.createWriter(function(writer) {
									writer.onwrite = function(res) {
										const obj = {
											relativePath: filePath,
											localAbsolutePath: plus.io
												.convertLocalFileSystemURL(
													filePath)
										}
										resolve(obj);
									}
									writer.onerror = reject;
									writer.seek(0);
									writer.writeAsBinary(_that
										.getSymbolAfterString(base64,
											','));
								}, reject)
							}, reject)
						}, reject)
					}, reject)
				})
			},
			// 取某个符号后面的字符
			getSymbolAfterString(val, symbolStr) {
				if (val == undefined || val == null || val == "") {
					return "";
				}
				val = val.toString();
				const index = val.indexOf(symbolStr);
				if (index != -1) {
					val = val.substring(index + 1, val.length);
					return val;
				} else {
					return val
				}
			},
			// 扫码提示
			onCancel() {
				this.onQRCode();
				this.submitShow = false;
			},
			// 通过id查询工作票信息
			getWorkTicketQueryByIdFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
					id: this.workTicketId,
				};
				this.sendRequest({
					url: 'xmgl/workTicket/queryById',
					method: 'GET',
					data: data,
					success: res => {
						if (res.code == 200) {
							this.workTicketInfo = {
								...res.result,
								applicants: res.result.applicants ? res.result.applicants.split(',') : [],
								applicantsName: res.result.applicantNames,
								constructionAreas: res.result.constructionAreas ? res.result
									.constructionAreas.split(',') : [],
								constructionAreasName: res.result.constructionAreaNames,
								operators: res.result.operators ? res.result.operators.split(',') : [],
								operatorsName: res.result.operatorNames,
								teamIds: res.result.teamIds ? res.result.teamIds.split(',') : [],
								teamNames: res.result.teamNames,
							};
							this.otherAttachmentList = res.result.otherAttachment && Array.isArray(JSON.parse(
								res.result.otherAttachment)) ? JSON.parse(res.result.otherAttachment) : [];
							this.safetyRiskAnalysisList = res.result.safetyRiskAnalysis && Array.isArray(JSON
								.parse(res.result.safetyRiskAnalysis)) ? JSON.parse(res.result
								.safetyRiskAnalysis) : [];
							this.workTicketAttachmentList = res.result.workTicketAttachment && Array.isArray(
								JSON.parse(res.result.workTicketAttachment)) ? JSON.parse(res.result
								.workTicketAttachment) : [];
							this.selectList = res.result.itemList ? res.result.itemList.map(item => item
								.itemId) : [];
						}
					}
				})
			},
			onConfirm() {
				this.submitShow = false;
				if (this.policeCameraItemInfo.bindTicket == 1 || this.selectList.includes(this.policeCameraItemInfo
						.itemId)) {
					return this.showToast('该设备已经被绑定', 'warning');
				}
				this.selectList.push(this.policeCameraItemInfo.itemId)
			},
			onNavigateDetail(type) {
				if (type == 1) {
					uni.redirectTo({
						url: './workTicketList', // 跳转目标页面路径
					});
				} else if (type == 2) {
					uni.redirectTo({
						url: `./workTicketDetail?id=${this.workTicketId}`
					});
				}
			},
			onChangeState(operateStatus) {
				let that = this;
				let data = {
					id: this.workTicketId,
					projectSn: this.projectDetail.projectSn,
					operateStatus,
				};
				this.sendRequest({
					url: 'xmgl/workTicket/operateWorkTicket',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.onNavigateDetail(2);
						}
					}
				})
			},
			// 删除
			onDelete(row) {
				const findIndex = this.selectList.findIndex(item => item == row.itemId);
				if (findIndex > -1) {
					this.selectList.splice(findIndex, 1)
				}
			},
			onSubmit() {
				this.issueInvoiceShow = false;
				if (this.bindingModeType == 1) {
					uni.navigateTo({
						url: `./equipmentList?selectList=${JSON.stringify(this.selectList)}`
					})
				} else if (this.bindingModeType == 2) {
					this.onQRCode();
					// this.submitShow = true;
				}
			},
			onQRCode() {
				let that = this;
				handleAuthScan().then(() => {
					uni.scanCode({
						scanType: ['qrCode'],
						success: function(res) {
							console.log('扫一扫得到的数据：' + res.result, that.policeCameraItemList)
							if (res.result) {
								const resultInfo = JSON.parse(res.result);
								const find = that.policeCameraItemList.find(item => item
									.devSn == resultInfo.devSn);
								if (find) {
									that.policeCameraItemInfo = find;
									that.submitShow = true;
								}
								that.showToast('该设备识别失败，请手动绑定!', 'warning');
							}
						}
					})
				})
			},
			onLastStep() {
				this.current = 0;
			},
			// 下一步
			onNextStep() {
				if (this.current == 0) {
					// 敦煌升级
					if (!this.workTicketInfo.constructionAreasName || !this.workTicketInfo.constructionAddr || !this
						.workTicketInfo
						.applicantsName) {
						this.showToast('有必填项未填写', 'warning');
						return
					}
					if (!this.workTicketInfo.typeId || !this.workTicketInfo.workContent || this
						.workTicketAttachmentList.length == 0) {
						this.showToast('有必填项未填写', 'warning');
						return
					}
					if (this.workTicketBindCamera == 0) {
						if (this.onEditType) {
							this.getworkTicketEditFn();
						} else {
							this.getworkTicketAddFn();
						}
						return
					}
					this.current = 1;
					this.getPoliceCameraItemListFn();
				} else if (this.current == 1) {
					// if (this.selectList.length == 0) {
					// 	this.showToast('至少要绑定一台设备', 'warning');
					// 	return
					// }
					if (this.onEditType) {
						this.getworkTicketEditFn();
					} else {
						this.getworkTicketAddFn();
					}
				}
			},
			// 编辑工作票
			getworkTicketEditFn() {
				let that = this;
				let data = {
					...this.workTicketInfo,
					applicants: this.workTicketInfo.applicants.join(','),
					teamIds: this.workTicketInfo.teamIds.join(','),
					constructionAreas: this.workTicketInfo.constructionAreas.join(','),
					operators: this.workTicketInfo.operators.join(','),
					otherAttachment: JSON.stringify(this.otherAttachmentList),
					safetyRiskAnalysis: JSON.stringify(this.safetyRiskAnalysisList),
					workTicketAttachment: JSON.stringify(this.workTicketAttachmentList),
					projectSn: this.projectDetail.projectSn,
					policeCameraIds: this.selectList.join(','),
				};
				console.log(data)
				this.sendRequest({
					url: 'xmgl/workTicket/edit',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.showToast('编辑成功', 'success');
							that.current = 2;
						}
					}
				})
			},
			// 添加工作票
			getworkTicketAddFn() {
				let that = this;
				let data = {
					...this.workTicketInfo,
					applicants: this.workTicketInfo.applicants.join(','),
					teamIds: this.workTicketInfo.teamIds.join(','),
					constructionAreas: this.workTicketInfo.constructionAreas.join(','),
					operators: this.workTicketInfo.operators.join(','),
					otherAttachment: JSON.stringify(this.otherAttachmentList),
					safetyRiskAnalysis: JSON.stringify(this.safetyRiskAnalysisList),
					workTicketAttachment: JSON.stringify(this.workTicketAttachmentList),
					projectSn: this.projectDetail.projectSn,
					policeCameraIds: this.selectList.join(','),
				};
				this.sendRequest({
					url: 'xmgl/workTicket/add',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.showToast('添加成功', 'success');
							that.workTicketId = res.result.id;
							that.current = 2;
						}
					}
				})
			},
			// 取消
			onNavigateBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取时间
			onConstructionTimeChange(event) {
				console.log(event)
				this.workTicketInfo.constructionTimeBegin = event.startDate;
				this.workTicketInfo.constructionTimeEnd = event.endDate;
			},
			// 多选下拉 1区域 2单位 3人员 4班组
			onClickType(type) {
				if (type == 1) {
					this.constructionAreasList = this.workTicketInfo.constructionAreas.map(item => item);
					this.constructionAreasNameList = this.workTicketInfo.constructionAreasName ? this.workTicketInfo
						.constructionAreasName.split(',') : [];
					this.constructionAreasShow = true;
				} else if (type == 2) {
					this.applicantsList = this.workTicketInfo.applicants.map(item => item);
					this.applicantsNameList = this.workTicketInfo.applicantsName ? this.workTicketInfo
						.applicantsName.split(',') : [];
					this.applicantsShow = true;
				} else if (type == 3) {
					this.operatorsList = this.workTicketInfo.operators.map(item => item);
					this.operatorsNameList = this.workTicketInfo.operatorsName ? this.workTicketInfo
						.operatorsName.split(',') : [];
					this.operatorShow = true;
				} else if (type == 4) {
					this.teamIdList = this.workTicketInfo.teamIds.map(item => item);
					this.teamNameList = this.workTicketInfo.teamNames ? this.workTicketInfo
						.teamNames.split(',') : [];
					this.teamShow = true;
				}
			},
			// 区域
			onConstructionAreasClick(id, checked, label) {
				console.log(id, checked, label)
				const idx = this.constructionAreasList.indexOf(id);
				if (checked && idx === -1) {
					this.constructionAreasList.push(id);
					this.constructionAreasNameList.push(label);
				} else if (!checked && idx !== -1) {
					this.constructionAreasList.splice(idx, 1);
					this.constructionAreasNameList.splice(idx, 1);
				}
				console.log(1122, this.constructionAreasNameList, this.constructionAreasList)
			},
			// 单位
			onApplicantsClick(id, checked, label) {
				const idx = this.applicantsList.indexOf(id);
				if (checked && idx === -1) {
					this.applicantsList.push(id);
					this.applicantsNameList.push(label);
				} else if (!checked && idx !== -1) {
					this.applicantsList.splice(idx, 1);
					this.applicantsNameList.splice(idx, 1);
				}
			},
			// 班组
			onTeamClick(id, checked, label) {
				const idx = this.teamIdList.indexOf(id);
				if (checked && idx === -1) {
					this.teamIdList.push(id);
					this.teamNameList.push(label);
				} else if (!checked && idx !== -1) {
					this.teamIdList.splice(idx, 1);
					this.teamNameList.splice(idx, 1);
				}
			},
			// 人员
			onOperatorClick(id, checked, label) {
				const idx = this.operatorsList.indexOf(id);
				if (checked && idx === -1) {
					this.operatorsList.push(id);
					this.operatorsNameList.push(label);
				} else if (!checked && idx !== -1) {
					this.operatorsList.splice(idx, 1);
					this.operatorsNameList.splice(idx, 1);
				}
			},
			onSubmitType(type) {
				if (type == 1) {
					console.log(11233, this.constructionAreasNameList)
					this.workTicketInfo.constructionAreas = [...this.constructionAreasList];
					this.workTicketInfo.constructionAreasName = this.constructionAreasNameList.join(',');
					this.constructionAreasShow = false;
				} else if (type == 2) {
					this.workTicketInfo.applicants = [...this.applicantsList];
					this.workTicketInfo.applicantsName = this.applicantsNameList.join(',');
					this.getSelectWorkerInfoListFn();
					this.getTeamList();
					this.applicantsShow = false;
				} else if (type == 3) {
					this.workTicketInfo.operators = [...this.operatorsList];
					this.workTicketInfo.operatorsName = this.operatorsNameList.join(',');
					this.operatorShow = false;
				} else if (type == 4) {
					this.workTicketInfo.teamIds = [...this.teamIdList];
					this.workTicketInfo.teamNames = this.teamNameList.join(',');
					this.teamShow = false;
				}
			},
			onCancelClick(type) {
				if (type == 1) {
					this.constructionAreasList = [...this.workTicketInfo.constructionAreas];
					this.constructionAreasShow = false;
				} else if (type == 2) {
					this.applicantsList = [...this.workTicketInfo.applicants];
					this.applicantsShow = false;
				} else if (type == 3) {
					this.operatorsList = [...this.workTicketInfo.operators];
					this.operatorShow = false;
				} else if (type == 4) {
					this.teamIdList = [...this.workTicketInfo.teamIds];
					this.teamShow = false;
				}
			},
			//上传附件
			uploadImg(type) {
				var that = this
				if (type == 1) {
					this.$chooseImage({
						count: 20 - that.workTicketAttachmentList.length,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									that.workTicketAttachmentList.push(data)
								}
							});
						}
					})
				} else if (type == 2) {
					this.$chooseImage({
						count: 5 - that.safetyRiskAnalysisList.length,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									that.safetyRiskAnalysisList.push(data)
								}
							});
						}
					})
				} else {
					// uni.chooseFile this.$chooseImage
					uni.chooseFile({
						count: 20 - that.otherAttachmentList.length,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									that.otherAttachmentList.push(data)
								}
							});
						}
					})
				}
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							const objFn = {
								1: 'workTicketAttachmentList',
								2: 'safetyRiskAnalysisList',
								3: 'otherAttachmentList',
							}
							const findIndex = that[objFn[type]].findIndex(item => item.url == val.url);
							if (findIndex > -1) {
								that[objFn[type]].splice(findIndex, 1)
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			// 通过id获取工作票类型详情
			getWorkTicketTypeQueryByIdFn(id) {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
					id: id,
				};
				this.sendRequest({
					url: 'xmgl/workTicketType/queryById',
					method: 'GET',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.workTicketTypeDetail = res.result;
						}
					}
				})
			},
			// 获取施工区域
			getQualityRegionListFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
				};
				this.sendRequest({
					url: 'xmgl/qualityRegion/list',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.qualityRegionList = res.result;
						}
					}
				})
			},
			// 获取申请单位
			getEnterpriseInfoListFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
				};
				this.sendRequest({
					url: 'xmgl/enterpriseInfo/list',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.enterpriseInfoList = res.result;

							const find = res.result.find(item => item.id == that.userInfo.enterpriseId);
							console.log(find, )
							if (find && !that.onEditType) {
								that.onApplicantsClick(find.id, true, find.enterpriseName);
								that.onSubmitType(2);
							} else {
								// 敦煌升级
								// if (res.result.length > 0) {
								// 	this.workTicketInfo.applicantsName = res.result[0].enterpriseName;
								// 	this.workTicketInfo.applicants = [res.result[0].id];
								// }
							}
							this.$nextTick(() => {
								this.getTeamList();
							})
						}
					}
				})
			},
			// 查询班组列表
			getTeamList() {
				let that = this;
				let data = {
					enterpriseId: this.workTicketInfo.applicants.join(','),
					projectSn: this.projectDetail.projectSn
				};
				this.sendRequest({
					url: 'xmgl/teamInfo/getTeamInfoList',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.teamOptionList = res.result.list;
						}
					}
				})
			},
			// 查询项目子账号绑定的区域列表
			getQueryBindRegionsFn() {
				let that = this;
				let data = {
					// projectSn: this.projectDetail.projectSn,
				};
				this.sendRequest({
					url: 'xmgl/qualityRegion/queryBindRegions',
					method: 'GET',
					data: data,
					success: res => {
						if (res.code == 200) {
							console.log(res.result);
							res.result.forEach(item => {
								that.onConstructionAreasClick(item.id, true, item.regionName);
							})
							that.onSubmitType(1);
						}
					}
				})
			},
			// 获取人员 
			getSelectWorkerInfoListFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
					enterpriseId: this.workTicketInfo.applicants.join(',')
				};
				this.sendRequest({
					url: 'xmgl/workerInfo/selectWorkerInfoList',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.selectWorkerInfoList = res.result.records;
						}
					}
				})
			},
			// 获取项目配置信息
			getProjectConfigListFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
				};
				this.sendRequest({
					url: 'xmgl/projectConfig/getProjectConfigList',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							if (!res.result || res.result.length == 0) {
								that.workTicketBindCamera = 0;
							} else {
								let workTicketBindCamera = res.result[0].workTicketBindCamera;
								that.workTicketBindCamera = workTicketBindCamera;
							}
							if (that.workTicketBindCamera == 0) {
								that.numList = [{
									name: '基础信息'
								}, {
									name: ''
								}, {
									name: '完成'
								}, ];
							}
						}
					}
				})
			},
			showToast(title, type) {
				this.$refs.uToast.show({
					title: title,
					type: type,
				})
			},
			// 获取设备列表
			getPoliceCameraItemListFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
				};
				this.sendRequest({
					url: 'xmgl/policeCameraItem/list',
					method: 'get',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.policeCameraItemList = res.result;
						}
					}
				})
			},
		},
		computed: {
			policeCameraItemListUp() {
				return this.policeCameraItemList.filter(item => {
					console.log(111, this.selectList, )
					return this.selectList.includes(item.itemId);
				})
			}
		},
	}
</script>

<script module="attchChoose" lang="renderjs">
	let fileInputDom = null;
	export default {
		methods: {
			createFileInputDom() {
				fileInputDom = document.createElement("input");
				fileInputDom.setAttribute('type', 'file');
				fileInputDom.setAttribute('accept', '*');
			},
			onClick(event, ownerInstance) {
				if (!fileInputDom) {
					this.createFileInputDom();
				}
				fileInputDom.click(); // 模拟click
				fileInputDom.addEventListener('change', (e) => {
					fileInputDom = null;
					let choicesFiles = e.target.files[0];
					let reader = new FileReader();
					//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
					reader.readAsDataURL(choicesFiles);
					reader.onload = function(event) {
						const base64Str = event.target.result; // 文件的base64
						ownerInstance.callMethod('chooseFile', {
							attachName: choicesFiles.name,
							size: choicesFiles.size,
							base64Str,
						})
					}
					e.target.value = "";
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		.content_main2 {
			background-color: white;
			min-height: calc(100vh - 88rpx - 180rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 94rpx;

			>view:first-child {
				width: 502rpx;
				height: 336rpx;
				background-image: url('@/static/workTicketManage/index-icon11.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.edit_img {
				background-image: url('@/static/workTicketManage/index-icon12.png') !important;
			}

			>view:nth-child(2) {
				font-weight: 500;
				font-size: 28rpx;
				color: #171717;
				margin-top: 30rpx;
			}

			>view:nth-child(3) {
				font-size: 24rpx;
				color: #FFA026;
				margin-top: 26rpx;
				display: flex;
				align-items: flex-start;

				.u-icon {
					font-size: 36rpx;
				}
			}
		}

		.content_main1 {
			margin-top: 26rpx;
			padding-bottom: 138rpx;
			// background-color: white;
			// min-height: calc(100vh - 88rpx - 180rpx - 26rpx);

			.content_main-box {
				height: 224rpx;
				background-color: #FFFFFF;
				padding: 26rpx;
				margin-top: 20rpx;

				>view:last-child {
					margin-top: 22rpx;
					display: flex;
					align-items: center;

					>image {
						width: 80rpx;
						height: 104rpx;
						border-radius: 6rpx;
					}

					>view:last-child {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 40rpx;
						height: 104rpx;

						>view {
							display: flex;

							>view:first-child {
								width: 84rpx;
								font-size: 28rpx;
								color: #4D4D4D;
								text-align: right;
							}

							>view:last-child {
								margin-left: 40rpx;
								font-size: 28rpx;
								color: #4D4D4D;
							}
						}
					}
				}

				>view:first-child {
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view:first-child {
						font-weight: 800;
						font-size: 30rpx;
						color: #171717;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.u-icon {
						font-size: 40rpx;
						color: #EA3941;
					}
				}
			}

			.header-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 26rpx;
				background-color: white;

				>view:first-child {
					font-weight: 500;
					font-size: 30rpx;
					color: #1A1A1A;
				}

				>view:last-child {
					display: flex;
					align-items: center;

					>view:first-child {
						width: 40rpx;
						height: 40rpx;
						background-image: url('@/static/workTicketManage/index-icon10.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}

					>view:last-child {
						font-weight: 500;
						font-size: 24rpx;
						color: #4D8EEC;
						margin-left: 20rpx;
					}
				}
			}
		}

		.content_main {
			margin-top: 26rpx;
			padding-bottom: 138rpx;
			background-color: white;

			.main-box {
				padding: 0 16rpx;

				>.box2 {
					flex-direction: column;
					margin-top: 0 !important;

					>view:first-child {
						width: 192rpx !important;
					}

					.imgBox_wrap_list {
						flex-direction: column;
						align-items: flex-start !important;
						margin-left: 142rpx;

						.addImgBox_text {
							margin-top: 20rpx;
							margin-bottom: 10rpx;
							font-size: 24rpx;
							color: #808080;
						}

						.addImgBox_btn {
							width: 184rpx;
							height: 66rpx;
							background-color: #5181F6;
							border-radius: 6rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.imgBox_list {
							width: 550rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 14rpx 26rpx 14rpx 40rpx;

							>view:first-child {
								display: flex;
								align-items: center;

								.u-icon {
									font-size: 40rpx;
									color: #B3B3B3;
								}

								>view:last-child {
									margin-left: 14rpx;
									width: 320rpx;
									font-size: 24rpx;
									color: #808080;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							>.u-icon {
								font-size: 32rpx;
								color: #7AC756;
							}
						}

						.imgBox_list_active {
							>view:first-child {

								.u-icon,
								>view:last-child {
									color: #5181F6;
								}
							}

							>.u-icon {
								color: #B3B3B3;
							}
						}

						.imgBox_list:nth-child(even) {
							background-color: #FBFBFB;
						}

						.imgBox_list:nth-child(odd) {
							background-color: #FFFFFF;
						}
					}

					.imgBox_wrap {
						display: flex;
						flex-wrap: wrap;
						margin-left: 192rpx;
						flex: 1;

						>view:not(:last-child) {
							margin-right: 26rpx;
						}

						>view {
							margin-bottom: 20rpx;
						}

						.imgBox {
							width: 112rpx;
							height: 120rpx;
							display: inline-flex;
							position: relative;
							border-radius: 8rpx;

							.img {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}

							.deleteImg {
								position: absolute;
								right: -20rpx;
								top: -20rpx;
								color: #fff;
								width: 20rpx;
								height: 20rpx;
								background-image: url('@/static/workTicketManage/index-icon9.png');
								background-repeat: no-repeat;
								background-size: 100% 100%;

							}

						}

						.addImgBox {
							width: 118rpx;
							height: 120rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							border: 2rpx solid #D8DBE8;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;

							.icon-add {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}


				}

				>.box1:not(:first-child) {
					margin-top: 20rpx;
				}

				>.box1 {
					display: flex;
					align-items: flex-start;
					font-size: 28rpx;
					font-weight: 500;

					>view:first-child {
						width: 164rpx;
						color: #808080;
						height: 68rpx;
						display: flex;
						align-items: center;

						>text {
							color: #FF0000;
						}
					}

					>view:last-child {
						color: #4D4D4D;
						min-height: 68rpx;
						display: flex;
						align-items: center;
					}
				}

				/deep/ .u-input {
					width: 550rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #D8DBE8;
				}

				.changetime {
					width: 550rpx;
					height: 68rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #D8DBE8;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 34rpx;
					font-size: 28rpx;
					color: #4D4D4D;

					.changetime_icon {
						width: 36rpx;
						height: 36rpx;
						background-image: url('@/static/workTicketManage/index-icon7.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
				}

				.textarea {
					position: relative;

					/deep/ .u-input {
						// height: 160rpx;
						line-height: 68rpx;
						min-height: 160rpx !important;
						height: initial;
						padding-bottom: 20px !important;
					}

					.textarea_text {
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
						font-size: 22rpx;
						color: #B3B3B3;
					}
				}
			}

			.header-title {
				padding: 12rpx 16rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				border-bottom: 2rpx solid #EFF3F7;
			}
		}

		.confrim-btn {
			width: 100%;
			padding: 18rpx 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			display: flex;
			position: fixed;
			bottom: 0;
			z-index: 1;

			>view {
				width: 50%;
				height: 76rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:first-child {
				background-color: rgba(81, 129, 246, 0.1);
				border-radius: 6rpx 0rpx 0rpx 6rpx;
				color: #5181F6;
			}

			>view:last-child {
				background-color: #5181F6;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				color: #FFFFFF;
			}
		}
	}

	/deep/ .u-mode-center-box {
		width: 698rpx !important;

		.u-model__title {
			padding: 0;
			font-size: 32rpx;
			color: #272D45;
			height: 86rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.u-model__content__message {
			padding: 26rpx 26rpx 72rpx;
			font-size: 28rpx;
			color: #171717;
		}

		.u-model__footer__button {
			height: 76rpx;
			line-height: 76rpx;
			background-color: rgba(81, 129, 246, 0.1);
			font-weight: 500;
			font-size: 28rpx;
			color: #5181F6;
		}

		.hairline-left {
			background-color: #5181F6;
			color: white !important;
		}
	}

	/deep/ .u-drawer-bottom {
		border-radius: 32rpx 32rpx 0 0;
	}

	.content-popup {
		.content-popup_main {
			padding: 26rpx 0;

			>view {
				width: 100%;
				height: 80rpx;
				background-color: #FFFFFF;
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:not(:first-child) {
				margin-top: 20rpx;
			}

			.popup_main_active {
				background-color: rgba(81, 129, 246, 0.1);
				color: #5181F6;
			}
		}

		uni-scroll-view {
			margin: 26rpx 0;
		}

		.content-popup_header {
			height: 86rpx;
			box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 30rpx;
			color: #1A1A1A;
		}

		.confrim-btn {
			padding: 18rpx 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			display: flex;

			>view {
				width: 50%;
				height: 76rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:first-child {
				background-color: rgba(81, 129, 246, 0.1);
				border-radius: 6rpx 0rpx 0rpx 6rpx;
				color: #5181F6;
			}

			>view:last-child {
				background-color: #5181F6;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				color: #FFFFFF;
			}
		}
	}

	.addIssue {
		min-height: 100vh;
		background-color: #F2F3F7;
	}

	/deep/ .u-steps {
		background-color: #FFFFFF;
		padding: 26rpx;

		.u-steps__item {
			flex: unset;

			.u-steps__item__dot {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				background-color: #F4333C !important;
				position: relative;
			}

			.u-steps__item__dot::after {
				content: "";
				width: 40rpx;
				height: 40rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.u-steps__item:nth-child(1) .u-steps__item__line {
			width: 230rpx;
			left: 80%;
		}

		.u-steps__item:nth-child(1) .u-steps__item__dot {
			background-color: #008DE4 !important;
		}

		.u-steps__item:nth-child(1) .u-steps__item__dot::after {
			background-image: url('@/static/workTicketManage/index-icon4.png');
		}

		.u-steps__item:nth-child(2) {
			flex: 1;

			.u-steps__item__line {
				width: 220rpx;
				left: 57%;

				.u-line {
					border-color: #F4353E !important;
					border-bottom: 4rpx solid #F4353E !important;
				}
			}

			.u-steps__item__dot::after {
				background-image: url('@/static/workTicketManage/index-icon5.png');
			}
		}

		.u-steps__item:nth-child(3) .u-steps__item__dot::after {
			background-image: url('@/static/workTicketManage/index-icon6.png');
		}

		.u-steps__item__line {
			top: calc(72rpx / 2) !important;

			.u-line {
				border-color: #038EE4 !important;
				border-bottom: 4rpx solid #038EE4 !important;
			}
		}

		.u-steps__item__text--row {
			font-weight: 500;
			font-size: 30rpx;
			color: #1A1A1A !important;
			margin-top: 12rpx;
		}
	}

	/deep/ .steps_1 {
		.u-steps__item:nth-child(2) .u-steps__item__dot {
			background-color: #008DE4 !important;
		}

		.u-steps__item:nth-child(2) .u-steps__item__line .u-line {
			border-color: #038EE4 !important;
			border-bottom: 4rpx solid #038EE4 !important;
		}
	}

	/deep/ .steps_2 {
		.u-steps__item:nth-child(3) .u-steps__item__dot {
			background-color: #008DE4 !important;
		}

	}

	/deep/ .steps_3 {
		.u-steps__item:nth-child(1) .u-steps__item__line {
			width: 520rpx;
			left: 80%;
		}

		.u-steps__item:nth-child(2) .u-steps__item__line {
			opacity: 0;
		}

		.u-steps__item:nth-child(2) .u-steps__item__dot {
			opacity: 0;
		}

	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/ .headerBox {
			border-bottom: none;
		}

		.headerName {
			z-index: 1;
		}
	}

	.new-nodata_height {
		min-height: 500rpx;
		position: relative;
	}

	.new-nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>view {
			width: 300rpx;
			height: 300rpx;
			background-image: url('@/static/staffAttendance/nodata.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		>text {
			font-size: 22rpx;
			color: #808080;
			margin-top: 60rpx;
		}
	}

	.content_main-box1 {
		height: 224rpx;
		// background-color: #FFFFFF;
		padding: 26rpx;

		/deep/ .uni-checkbox-input {
			width: 32rpx;
			height: 32rpx;
		}

		>view:last-child {
			margin-top: 22rpx;
			display: flex;
			align-items: center;

			>image {
				width: 80rpx;
				height: 104rpx;
				border-radius: 6rpx;
			}

			>view:last-child {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 40rpx;
				height: 104rpx;

				>view {
					display: flex;

					>view:first-child {
						width: 84rpx;
						font-size: 28rpx;
						color: #4D4D4D;
						text-align: right;
					}

					>view:last-child {
						margin-left: 40rpx;
						font-size: 28rpx;
						color: #4D4D4D;
					}
				}
			}
		}

		>view:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view:first-child {
				font-weight: 800;
				font-size: 30rpx;
				color: #171717;
			}

			>view:last-child {
				width: 90rpx;
				height: 42rpx;
				background-color: rgba(71, 195, 147, 0.1);
				border-radius: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 21rpx;
				color: #47C393;
			}

			.boundalready {
				background-color: rgba(113, 75, 0, 0.1) !important;
				color: #714B00 !important;
			}
		}
	}
</style>