<template>
	<view class="mixSign">
		<head-view :title="title" url="/pages/shipWork/mixWork"></head-view>
		<view class="contentFixedr">
			<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
				<custom-tab-pane :label="item.name" v-for="(item, index) in tabsList" :name="'c1_' + index" :key="index">
					<view></view>
					<view style="padding: 16px; padding-bottom: 0;">
						<view class="container">
							<view class="head">
								<view class="leftHead">
									<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix" />
								</view>
								<view class="rightHead">
									<text class="p">上海海通国际汽车码头有限公司</text>
									<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO. LTD.</text>
								</view>
							</view>
							<view class="headTItle">
								<view class="titleLeft"></view>
								<view class="title">
									<view class="p">海通码头装卸和杂项作业单</view>
									<text>SHANGHAI HARBOUR BUREAU STEVEDORE WORKING RECORD</text>
								</view>
								<view class="titleRight">
									<view>
										<text>编号/N0:</text>
										<text>QR-7.5.1-01-05-M</text>
									</view>
								</view>
							</view>
							<view class="ul">
								<view class="li">
									<text>Name of ship:</text>
									<view class="lineBox">
										<text>{{ shipInfo.vslEnname }}</text>
										<view class="line"></view>
									</view>
								</view>
								<view class="li">
									<text>Voy No:</text>
									<view class="lineBox">
										<text>{{ vvyName }}</text>
										<view class="line"></view>
									</view>
								</view>
								<view class="li">
									<text>Weather:</text>
									<view class="lineBox">
										<text>{{ tqInfo }}</text>
										<view class="line"></view>
									</view>
								</view>
								<view class="li">
									<text>Date:</text>
									<view class="lineBox">
										<text>{{ dateId }}</text>
										<view class="line"></view>
									</view>
								</view>
								<view class="li">
									<text>Gangs:</text>
									<view class="lineBox">
										<text>{{ zyzsInfo }}</text>
										<view class="line"></view>
									</view>
								</view>
								<view class="li">
									<text>Foreman:</text>
									<view class="lineBox">
										<text>{{ dcrsInfo }}</text>
										<view class="line"></view>
									</view>
								</view>
								<!-- <view class="li">
									<p>Berthed at Haitong:</p><text>{{bwInfo}}</text>
								</view> -->
								<view class="li">
									<text>Foreman Working time:</text>
									<view class="lineBox">
										<text v-if="peopleList.length > 0">{{ peopleList[0].jobStartTime |
			textFilter }}-{{ peopleList[0].jobEndTime | textFilter }}</text>
										<view class="line"></view>
									</view>
								</view>
								<view class="li">
									<text>Berthed at {{ portInfo }}:</text><text>
										<checkbox-group>
											<label>
												1
												<checkbox style="margin: 0 10px 0 5px" value="cb"
													:checked="bwInfo == '一泊位'" />
											</label>
											<label>
												2
												<checkbox style="margin: 0 10px 0 5px" value="cb"
													:checked="bwInfo == '二泊位'" />
											</label>
											<label>
												3
												<checkbox style="margin: 0 10px 0 5px" value="cb"
													:checked="bwInfo == '三泊位'" />
											</label>
											<label>
												4
												<checkbox style="margin: 0 10px 0 5px" value="cb"
													:checked="bwInfo == '四泊位'" />
											</label>
											<label>
												5
												<checkbox style="margin: 0 10px 0 5px" value="cb"
													:checked="bwInfo == '五泊位'" />
											</label>
										</checkbox-group>
									</text>
								</view>
							</view>
							<view class="rowOne">
								<view class="left">
									<view class="cell">

									</view>
									<view class="cell cellY">
										<view class="item bo_b">
											Working time
										</view>
										<view class="item cellX">
											<view class="item bo_r">
												From
											</view>
											<view>
												To
											</view>
										</view>
									</view>
									<view class="cellB cellY bo_r">
										<view class="item bo_b">
											Kind Of Works
										</view>
										<view>
											Loading/UnLoading
										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">
										B/L
									</view>
									<view class="itemRight cellY">
										<view class="bo_b">
											Handling method
										</view>
										<view class="cellX">
											<text class="bo_r">Ro/Ro</text>
											<text class="bo_r">PortDevices</text>
											<text>Others</text>
										</view>
									</view>
								</view>
							</view>
							<view class="rowTwo" v-for="(item2, index2) in shiftInfo1" :key="index2 + 'shift'">
								<view class="left bo_r">
									<view class="cell bo_r">
										First Shift
									</view>
									<view class="cell cellX">
										<view class="item bo_r">
											{{ item2.workStartTime | textFilter }}
										</view>
										<view class="item bo_r">
											{{ item2.workEndTime | textFilter }}
										</view>
									</view>
									<view class="cellY">
										<view class="item" v-for="(item3, index3) in item2.infoArr" :key="index3">
											{{ item3.carTypeName }}*{{ item3.goodsNumber }}
										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">

									</view>
									<view class="itemRight">
										<!-- 没办法画个格子 -->
										<view class="gezi">
											<view></view>
											<view></view>
											<view></view>
										</view>
										<view class="itemList bo_b" v-for="(item3, index3) in item2.infoArr"
											:key="index3">
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'RO'">√</view>
											</view>
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'PR'">√</view>
											</view>
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'OT'">√</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rowTwo" v-show="shiftInfo1.length == 0">
								<view class="left bo_r">
									<view class="cell bo_r">
										First Shift
									</view>
									<view class="cell cellX">
										<view class="item bo_r">

										</view>
										<view class="item bo_r">

										</view>
									</view>
									<view class="cellY">
										<view class="item">

										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">

									</view>
									<view class="itemRight">
										<!-- 没办法画个格子 -->
										<view class="gezi">
											<view></view>
											<view></view>
											<view></view>
										</view>
										<view class="itemList bo_b">
											<view class="item">

											</view>
											<view class="item">
	
											</view>
											<view class="item">

											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rowTwo" v-for="(item2, index2) in shiftInfo2" :key="index2 + 'shift'">
								<view class="left bo_r">
									<view class="cell bo_r">
										Second Shift
									</view>
									<view class="cell cellX">
										<view class="item bo_r">
											{{ item2.workStartTime | textFilter }}
										</view>
										<view class="item bo_r">
											{{ item2.workEndTime | textFilter }}
										</view>
									</view>
									<view class="cellY">
										<view class="item" v-for="(item3, index3) in item2.infoArr" :key="index3">
											{{ item3.carTypeName }}*{{ item3.goodsNumber }}
										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">

									</view>
									<view class="itemRight">
										<!-- 没办法画个格子 -->
										<view class="gezi">
											<view></view>
											<view></view>
											<view></view>
										</view>
										<view class="itemList bo_b" v-for="(item3, index3) in item2.infoArr"
											:key="index3">
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'RO'">√</view>
											</view>
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'PR'">√</view>
											</view>
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'OT'">√</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rowTwo" v-show="shiftInfo2.length == 0">
								<view class="left bo_r">
									<view class="cell bo_r">
										Second Shift
									</view>
									<view class="cell cellX">
										<view class="item bo_r">

										</view>
										<view class="item bo_r">

										</view>
									</view>
									<view class="cellY">
										<view class="item">

										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">

									</view>
									<view class="itemRight">
										<!-- 没办法画个格子 -->
										<view class="gezi">
											<view></view>
											<view></view>
											<view></view>
										</view>
										<view class="itemList bo_b">
											<view class="item">

											</view>
											<view class="item">
	
											</view>
											<view class="item">

											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rowTwo" v-for="(item2, index2) in shiftInfo3" :key="index2 + 'shift'">
								<view class="left bo_r">
									<view class="cell bo_r">
										Third Shift
									</view>
									<view class="cell cellX">
										<view class="item bo_r">
											{{ item2.workStartTime | textFilter }}
										</view>
										<view class="item bo_r">
											{{ item2.workEndTime | textFilter }}
										</view>
									</view>
									<view class="cellY">
										<view class="item" v-for="(item3, index3) in item2.infoArr" :key="index3">
											{{ item3.carTypeName }}*{{ item3.goodsNumber }}
										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">

									</view>
									<view class="itemRight">
										<!-- 没办法画个格子 -->
										<view class="gezi">
											<view></view>
											<view></view>
											<view></view>
										</view>
										<view class="itemList bo_b" v-for="(item3, index3) in item2.infoArr"
											:key="index3">
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'RO'">√</view>
											</view>
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'PR'">√</view>
											</view>
											<view class="item">
												<view class="text" v-show="item3.loadingType == 'OT'">√</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rowTwo" v-show="shiftInfo3.length == 0">
								<view class="left bo_r">
									<view class="cell bo_r">
										Third Shift
									</view>
									<view class="cell cellX">
										<view class="item bo_r">

										</view>
										<view class="item bo_r">

										</view>
									</view>
									<view class="cellY">
										<view class="item">

										</view>
									</view>
								</view>
								<view class="right cellX">
									<view class="itemLeft bo_r">

									</view>
									<view class="itemRight">
										<!-- 没办法画个格子 -->
										<view class="gezi">
											<view></view>
											<view></view>
											<view></view>
										</view>
										<view class="itemList bo_b">
											<view class="item">

											</view>
											<view class="item">
	
											</view>
											<view class="item">

											</view>
										</view>
									</view>
								</view>
							</view>
							
							<view class="rowThree">
								<view class="title bo_r bo_b">
									Rehangdling
								</view>
								<view class="fclist">
									<view class="fcbt">
										<view class="bt">
											<view class="kind bo_r">
												Kind of Rehangdling
											</view>
											<view class="date">
												<view class="cellY bo_r">
													<view class="bo_b">DK/H</view>
													<view class="cellX">
														<view class="bo_r">From</view>
														<view>To</view>
													</view>
												</view>
												<view class="cellY  bo_r">
													<view class="bo_b">Working time</view>
													<view class="cellX">
														<view class="bo_r">From</view>
														<view>To</view>
													</view>
												</view>
											</view>
											<view class="weight">
												<view class="cellY">
													<view class="bo_b">Weight/Measure</view>
													<view class="cellX">
														<view class="bo_r">Vehicle type/Quantity</view>
														<view>Total W/M</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="fcbt">
										<view class="bt">
											<view class="kind bo_r">
												Shift Of Pier
											</view>
											<view class="ceY">
												<view class="concat" v-if="fcArr1.length == 0">
													<view class="date">
														<view class="item bo_r">
															<view class="sz bo_r"></view>
															<view class="sz"></view>
														</view>
														<view class="item">
															<view class="sz bo_r"></view>
															<view class="sz bo_r"></view>
														</view>
													</view>
													<view class="weight cellX">
														<view class="text  bo_r">

														</view>
														<view class="text">

														</view>
													</view>
												</view>
												<view class="concat" v-else v-for="(item, index) in fcArr1" :key="index">
													<view class="date">
														<view class="item bo_r">
															<view class="sz bo_r">{{ item.retallyOrigin }}</view>
															<view class="sz">{{ item.retallyOrigin }}</view>
														</view>
														<view class="item">
															<view class="sz bo_r">{{ item.retallyStartTime | textFilter }}
															</view>
															<view class="sz bo_r">{{ item.retallyEndTime | textFilter }}
															</view>
														</view>
													</view>
													<view class="weight cellX">
														<view class="text  bo_r">
															{{ item.carTypeName }}*{{ item.goodsNumber }}
														</view>
														<view class="text">
															{{ item.goodsWeight }}T/{{ item.goodsVolume }}m³
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="fcbt">
										<view class="bt">
											<view class="kind bo_r">
												Shift Of Deck
											</view>
											<view class="ceY">
												<view class="concat" v-if="fcArr2.length == 0">
													<view class="date">
														<view class="item bo_r">
															<view class="sz bo_r"></view>
															<view class="sz"></view>
														</view>
														<view class="item">
															<view class="sz bo_r"></view>
															<view class="sz bo_r"></view>
														</view>
													</view>
													<view class="weight cellX">
														<view class="text  bo_r">

														</view>
														<view class="text">

														</view>
													</view>
												</view>
												<view class="concat" v-else v-for="(item, index) in fcArr2" :key="index">
													<view class="date">
														<view class="item bo_r">
															<view class="sz bo_r">{{ item.retallyOrigin }}</view>
															<view class="sz">{{ item.retallyOrigin }}</view>
														</view>
														<view class="item">
															<view class="sz bo_r">{{ item.retallyStartTime | textFilter }}
															</view>
															<view class="sz bo_r">{{ item.retallyEndTime | textFilter }}
															</view>
														</view>
													</view>
													<view class="weight cellX">
														<view class="text  bo_r">
															{{ item.carTypeName }}*{{ item.goodsNumber }}
														</view>
														<view class="text">
															{{ item.goodsWeight }}T/{{ item.goodsVolume }}m³
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="fcbt">
										<view class="bt">
											<view class="kind bo_r">
												Reloading
											</view>
											<view class="ceY">
												<view class="concat" v-if="fcArr3.length == 0">
													<view class="date">
														<view class="item bo_r">
															<view class="sz bo_r"></view>
															<view class="sz"></view>
														</view>
														<view class="item">
															<view class="sz bo_r"></view>
															<view class="sz bo_r"></view>
														</view>
													</view>
													<view class="weight cellX">
														<view class="text  bo_r">

														</view>
														<view class="text">

														</view>
													</view>
												</view>
												<view class="concat" v-else v-for="(item, index) in fcArr3" :key="index">
													<view class="date">
														<view class="item bo_r">
															<view class="sz bo_r">{{ item.retallyOrigin }}</view>
															<view class="sz">{{ item.retallyOrigin }}</view>
														</view>
														<view class="item">
															<view class="sz bo_r">{{ item.retallyStartTime }}</view>
															<view class="sz bo_r">{{ item.retallyEndTime }}</view>
														</view>
													</view>
													<view class="weight cellX">
														<view class="text  bo_r">
															{{ item.carTypeName }}*{{ item.goodsNumber }}
														</view>
														<view class="text">
															{{ item.goodsWeight }}T/{{ item.goodsVolume }}m³
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rowFour">
								<view class="row">
									<view class="title bo_l bo_r">
									</view>
									<view class="kind bo_r">
										Reason
									</view>
									<view class="date">
										<view class="bo_r">Tech Stev</view>
										<view class="bo_r">Men</view>
										<view class="bo_r">From</view>
										<view class="bo_r">To</view>
									</view>
									<view class="weight bo_r">
										Weight/Measure
									</view>
								</view>

								<view class="rowC">
									<view class="title bo_l bo_r">
										Extra Labour
									</view>
									<view class="kind bo_r">
									</view>
									<view class="date">
										<view class="cellY">
											<view class="sz bo_b">{{ JSGR[0].totalTecNum }}</view>
											<view class="sz"></view>
										</view>
										<view class="cellY">
											<view class="sz bo_b"></view>
											<view class="sz">{{ PTGR[0].totalGenNum }}</view>
										</view>
										<view class="cellY">
											<view class="sz bo_b">{{ JSGR[0].minStartTime | textFilter }}</view>
											<view class="sz">{{ PTGR[0].minStartTimePt | textFilter }}</view>
										</view>
										<view class="cellY">
											<view class="sz bo_b">{{ JSGR[0].maxEndTime | textFilter }}</view>
											<view class="sz">{{ PTGR[0].maxEndTimePt | textFilter }}</view>
										</view>
									</view>
									<view class="weight cellY bo_r">
										<view class="sz bo_b">{{ JSGR[0].totalWeight }}/{{ JSGR[0].totalvolume }}</view>
										<view class="sz">{{ PTGR[0].totalWeightPt }}/{{ PTGR[0].totalvolumePt }}</view>
									</view>
								</view>
								<view class="row">
									<view class="title bo_l bo_r">
										Stand by
									</view>
									<view class="rownr bo_r">
										{{ JSGR[0].allWaitRemark }}
									</view>
								</view>
								<view class="row">
									<view class="title bo_l bo_r">
										Remark
									</view>
									<view class="rownr bo_r">
										{{ JSGR[0].allAuxRemark }}
									</view>
								</view>

							</view>
						</view>

						<view class="signBox">
							<view class="signContent">
								<view class="signTitle">
									<p>指导员:</p>
									<p>Foreman:</p>
								</view>
								<view class="signInfo" v-if="zdySign.url == ''" @click="togoSign('0')">
									去签名/Signature
								</view>
								<view class="signImg" v-else @click="togoSign('0')">
									<image :src="zdySign.url"></image>
									<!-- <text class="del" @click="delSign(zdySign.id)">删除</text> -->
								</view>
							</view>
							<view class="row"></view>
							<view class="signContent">
								<view class="signTitle">
									<p>船长/大副:</p>
									<p>Capt/Chief Mate:</p>
								</view>
								<view class="signInfo" v-if="czSign.url == ''" @click="togoSign('1')">
									去签名/Signature
								</view>
								<view class="signImg" v-else @click="togoSign('1')">
									<image :src="czSign.url"></image>
									<!-- <text class="del" @click="delSign(czSign.id)">删除</text> -->
								</view>
							</view>
						</view>
					</view>
				</custom-tab-pane>
			</custom-tabs>
		</view>
		<uni-popup ref="delPopup" type="dialog">
			<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
				@confirm="delConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import sqlite from "../../common/sqlite.js"
import api from "../../common/api.js"
export default {
	data() {
		return {
			title: "杂项单证签名",
			tabsValue: 0,
			tabsList: [],
			vvyId: "",
			vvyName: "",
			webId: "",
			aIdList: [],
			aId: "",
			vtpId: "",
			// 时间段数组
			timeArr: [],
			// 一天开始时间
			startTime: "",
			// 一天结束时间
			endTime: "",
			// 人员信息
			peopleList: [],
			// peopleArr: [],
			tqInfo: "",
			bwArr: [],
			bwInfo: "",
			zyzsInfo: 0,
			dcrsInfo: 0,
			// 单证数量
			tabsArr: [],
			gbArr: [],
			// 船舶信息
			shipInfo: {},
			shiftInfo: [],
			shiftInfo1: [],
			shiftInfo2: [],
			shiftInfo3: [],
			// 翻仓信息
			fcList: [],
			fcArr1: [],
			fcArr2: [],
			fcArr3: [],
			// 其他信息
			qtList: [],
			qtArr: [],
			// 签名信息
			zdySign: {
				url: "",
				id: ""
			},
			dateId: "",
			czSign: {
				url: "",
				id: ""
			},
			delId: "",
			PTGR: [],
			JSGR: [],
			// RYSJ: [],
			carList:[],
			weatherList:[],
			portInfo:'',
			portObj:{}
		}
	},
	onLoad(option) {
		if ('params' in option) {
			this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
		}
	},
	mounted() {
		this.vtpId = uni.getStorageSync('vtpId')
		this.portObj = uni.getStorageSync('portObj')
		let that = this
		that.executeSql2()
		that.executeSql('shipInfoTable')
		this.executeSql('shipOption')
		that.aaa()
		setTimeout(function () {
			that.fcList.forEach(v => {
				// 车型转英文
				that.carList.forEach(item2 => {
			     	if(v.carTypeName == item2.ptrDesc) {
						v.carTypeName = item2.ptrEnDesc
			     	}
			     })
				let endT = v.retallyEndTime.slice(0, 10)
				if (endT == that.dateId) {
					if (v.retallyTypeName == '舱内翻') {
						that.fcArr1.push(v)
					} else if (v.retallyTypeName == '舱外翻') {
						that.fcArr2.push(v)
					} else if (v.retallyTypeName == '货物重装') {
						that.fcArr3.push(v)
					}
				}
			})
			that.qtList.forEach(v => {
				let endT = ""
				if (v.endTm != "") {
					endT = v.endTm.slice(0, 10)
				} else if (v.endTmPt != "") {
					endT = v.endTmPt.slice(0, 10)
				}
				if (endT == that.dateId) {
					that.qtArr.push(v)
				}
			})
			if (that.qtArr.length == 0) {
				that.qtArr.push({})
			}
			that.shiftInfo.forEach(v => {
				// 车型转英文
				v.infoArr.forEach(item1 => {
					that.carList.forEach(item2 => {
			        	if(item1.carTypeName == item2.ptrDesc) {
			        		item1.carTypeName = item2.ptrEnDesc
			        	}
			        })
				})
				let arr = api.arrFrom(v.infoArr, "webId")
				that.$set(v, "infoArr", arr)
				if(v.pwcTypeName == '一工班') {
					that.shiftInfo1.push(v)
				} else if(v.pwcTypeName == '二工班'){
					that.shiftInfo2.push(v)
				} else if(v.pwcTypeName == '三工班') {
					that.shiftInfo3.push(v)
				}
			})
               console.log('that.peopleList',that.peopleList);
			that.peopleList.forEach(v => {
				// let endT = v.jobEndTime.slice(0, 10)
				// if (endT == that.dateId) {
				// 	that.peopleArr.push(v)
				// }
				that.zyzsInfo += Number(v.workSuite)
				that.dcrsInfo += Number(v.shipPerson)
				that.bwArr.push(v.bthIdName)
			})
			// that.tqInfo = that.peopleArr[0].weatherType
			that.weatherList.forEach(item => {
				if(that.peopleList[0]?.weatherType == item.ptrDesc) {
					that.tqInfo = item.ptrEnDesc
				}
			})
			// that.peopleArr.forEach(v => {
			// 	that.zyzsInfo += Number(v.workSuite)
			// 	that.dcrsInfo += Number(v.shipPerson)
			// 	that.bwArr.push(v.bthIdName)
			// })
			that.bwInfo = that.bwArr.join(",")
		}, 300)
	},
	filters: {
		textFilter(value) {
		   if(value) {
			let split_s = value.split(" ")
			let result = split_s[1].split(":")
			let date = split_s[0].split("-")
			let sum = result[0] + ":" + result[1] + "(" + date[2] + ")"
			return sum
		   }
		},
	},
	methods: {
		// 查船舶信息/人员信息
		executeSql(tableName) {
			let sql = `select * from ${tableName}  WHERE vtpId = '${this.vtpId}'`
			sqlite.executeSqlCeshi(sql).then((value) => {
				// 在resolve时执行的回调函数
				if (tableName == 'shipInfoTable') {
					this.shipInfo = value[0]
				} else if(tableName == 'shipOption'){
					value.forEach(item => {
						if(item.dictionariesName == 'carList') {
							this.carList.push(item)
						} else if(item.dictionariesName == 'weather') {
							this.weatherList.push(item)
						} else if(item.dictionariesName == 'portDetail') {
							if(item.ptrDesc == this.portObj.portName) {
                               this.portInfo = item.ptrEnDesc
							}
						}
					})
				}
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 查工班信息
		executeSql2(type) {
			// let sql = `SELECT 
			// 		strftime('%Y-%m-%d %H:00:00',  datetime(workEndTime, '0 day', 'start of day', '+22 hours')) || ',' || strftime('%Y-%m-%d %H:00:00',  datetime(workEndTime, '1 day', 'start of day', '+22 hours')) AS work_shift 
			// 		FROM workMessageRespList WHERE workMessageRespList.vtpId='${this.vtpId}'
			// 		GROUP BY work_shift
			// 		UNION SELECT strftime('%Y-%m-%d %H:00:00',  datetime(workEndTime, '-1 day', 'start of day', '+22 hours')) || ',' || strftime('%Y-%m-%d %H:00:00',  datetime(workEndTime, '0 day', 'start of day', '+22 hours')) AS work_shift 
			// 		FROM workMessageRespList WHERE workMessageRespList.vtpId='${this.vtpId}'
			// 		GROUP BY work_shift;`
			let sql = `WITH RECURSIVE date_ranges AS(
                       SELECT DISTINCT date
                       FROM (SELECT DATE(DATETIME(workStartTime, '+2 hour')) AS date FROM workMessageRespList WHERE vtpId='${this.vtpId}'
                       UNION
                       SELECT DATE(DATETIME(retallyStartTime, '+2 hour')) AS date FROM retallyMessageRespList WHERE vtpId='${this.vtpId}'
                       UNION
                       SELECT DATE(DATETIME(startTm, '+2 hour')) AS date FROM infoRespList  WHERE vtpId='${this.vtpId}'
                       UNION
                       SELECT DATE(DATETIME(startTmPt, '+2 hour')) AS date FROM infoRespList WHERE vtpId='${this.vtpId}'
                       UNION
                       SELECT DATE(DATETIME(jobStartTime, '+2 hour')) AS date FROM messageRespList WHERE vtpId='${this.vtpId}')
                       WHERE date IS NOT Null)
                       SELECT DISTINCT
                         datetime(date(date,'-1 day') || ' 22:00:00') AS start_time,
                         datetime(date || ' 21:59:59') AS end_time
                       FROM date_ranges WHERE start_time is not NULL
                       ORDER BY start_time ASC;`
			sqlite.executeSqlCeshi(sql).then((value) => {
				this.timeArr = value
				console.log('this.timeArr',this.timeArr);
				value.forEach((v, index) => {
					// console.log('v', v);
					// this.startTime = v.work_shift.split(",")[0]
					// this.endTime = v.work_shift.split(",")[1]
					this.startTime = v.start_time
					this.endTime = v.end_time
					let sql2 =
						`Select COUNT(*),pwcTypeName,vvyId,vvyName,MIN(workStartTime) AS workStartTime, MAX(workEndTime) 
							AS workEndTime FROM (SELECT * FROM workMessageRespList WHERE workStartTime>='${this.startTime}' and 
							workEndTime<'${this.endTime}' and workMessageRespList.vtpId='${this.vtpId}') 
							GROUP BY pwcTypeName  ORDER BY workStartTime asc;`
					this.executeSql22(sql2, index)
					let sql3 = `SELECT * FROM retallyMessageRespList WHERE retallyMessageRespList.retallyStartTime>='${this.startTime}' and 
								retallyMessageRespList.retallyEndTime<'${this.endTime}' and vtpId = '${this.vtpId}'`
					this.executeSql3(sql3)
					// let sql4 = `SELECT * FROM infoRespList WHERE infoRespList.startTm>='${this.startTime}' and 
					// 		infoRespList.endTm<'${this.endTime}' and vtpId = '${this.vtpId}'`
					// 普通工人查询
					let sql4 = `SELECT MIN(startTmPt) AS minStartTimePt,MAX(endTmPt) AS maxEndTimePt,SUM(genNum) AS totalGenNum,SUM(weightPt) AS totalWeightPt,SUM(volumePt) AS totalvolumePt,GROUP_CONCAT(waitRemark, ', ') AS allWaitRemark,GROUP_CONCAT(auxRemark, ', ') AS allAuxRemark
						 FROM infoRespList WHERE vtpId = '${this.vtpId}' AND startTmPt>='${this.startTime}' AND endTmPt<='${this.endTime}'`
					this.executeSql4(sql4)
					// let sql5 = `SELECT * FROM messageRespList WHERE messageRespList.jobStartTime>='${this.startTime}' and
					// 			messageRespList.jobEndTime<'${this.endTime}' and vtpId = '${this.vtpId}'`
					// this.executeSql6(sql5)
					// 技术工人查询
					let sql6 = `SELECT MIN(startTm) AS minStartTime,MAX(endTm) AS maxEndTime,SUM(tecNum) AS totalTecNum,SUM(weight) AS totalWeight,SUM(volume) AS totalvolume,GROUP_CONCAT(waitRemark, ', ') AS allWaitRemark,GROUP_CONCAT(auxRemark, ', ') AS allAuxRemark
						FROM infoRespList WHERE vtpId = '${this.vtpId}' AND startTm>='${this.startTime}'AND endTm<='${this.endTime}'`
					this.executeSql7(sql6)
					// 人员信息作业时间
					// let sql7 = `SELECT MIN(jobStartTime) AS minStartTime,MAX(jobEndTime) AS maxEndTime
					// 	            FROM messageRespList
                    //                 WHERE vtpId = '${this.vtpId}'
                    //                 AND jobStartTime>='${this.startTime}'
                    //                 AND jobEndTime<='${this.endTime}'`
					// this.executeSql8(sql7)
				})
				// 人员信息
				let sql5 = `SELECT * FROM messageRespList WHERE vtpId = '${this.vtpId}'`
				this.executeSql6(sql5)

				let that = this
				setTimeout(function () {
					if (type != 0) {
						that.tabsArr.forEach((v, index) => {
							let _index = index + 1
							that.$set(v, "name", `杂项单证${_index}`)
						})
					}
					that.tabsList = that.tabsArr
					that.shiftInfo = that.tabsList[that.tabsValue].shiftArr
					that.shiftList = that.tabsList[that.tabsValue].shiftArr
					that.vvyId = that.tabsList[0].shiftArr[0].vvyId
					that.vvyName = that.tabsList[0].shiftArr[0].vvyName
					let dateId = that.tabsList[that.tabsValue].shiftArr[0].workEndTime
					that.dateId = dateId.slice(0, 10)
					that.executeSql5()
					that.shiftList.forEach(v => {
						that.executeSql222(v.workStartTime, v.workEndTime, v.pwcTypeName)
					})
					setTimeout(function () {
						that.shiftList = that.shiftList
					}, 100)
				}, 100)
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		executeSql22(sql, index) {
			sqlite.executeSqlCeshi(sql).then((value) => {
				if (value.length > 0) {
					this.tabsArr.push({
						shiftArr: value
					})
					console.log('value',value);
				}
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		executeSql222(sTime, eTime, pwcTypeName) {
			let sql = `SELECT * FROM workMessageRespList 
						WHERE workStartTime>='${sTime}' 
						and workEndTime<='${eTime}' 
						and workMessageRespList.vtpId='${this.vtpId}' 
						and workMessageRespList.pwcTypeName='${pwcTypeName}';`
			sqlite.executeSqlCeshi(sql).then((value) => {
				this.gbArr.push(...value)
				this.shiftInfo.forEach((i, index) => {
					this.$set(i, "infoArr", [])
					this.gbArr.forEach((v, index2) => {
						if (i.pwcTypeName == v.pwcTypeName) {
							this.aaa(v.webId, index)
						}
					})
				})
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		aaa(id, index) {
			let sql =
				`SELECT * FROM workMessageRespInfoList WHERE workMessageRespInfoList.contactId = '${id}'`
			sqlite.executeSqlCeshi(sql).then((value) => {
				// this.$set(this.gbArr[index], "infoArr", value)
				this.shiftInfo[index]?.infoArr.push(...value)
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 查翻仓信息
		executeSql3(sql) {
			sqlite.executeSqlCeshi(sql).then((value) => {
				if (value.length > 0) {
					this.fcList.push(...value)
				}
				this.fcList = api.arrFrom(this.fcList, "webId")
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 查普通工人信息
		executeSql4(sql) {
			sqlite.executeSqlCeshi(sql).then((value) => {
				// 在resolve时执行的回调函数
				if (value.length > 0) {
					this.PTGR.push(...value)
				}
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 查技术工人信息
		executeSql7(sql) {
			sqlite.executeSqlCeshi(sql).then((value) => {
				// 在resolve时执行的回调函数
				if (value.length > 0) {
					this.JSGR.push(...value)
				}
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 人员信息作业时间
		// executeSql8(sql) {
		// 	sqlite.executeSqlCeshi(sql).then((value) => {
		// 		// 在resolve时执行的回调函数
		// 		if (value.length > 0) {
		// 			this.RYSJ.push(...value)
		// 		}
		// 	}).catch((error) => {
		// 		// 在reject时执行的回调函数
		// 		console.error(error);
		// 	});
		// },
		// 查人员信息
		executeSql6(sql) {
			sqlite.executeSqlCeshi(sql).then((value) => {
				// 在resolve时执行的回调函数
				if (value.length > 0) {
					this.peopleList.push(...value)
				}
				this.peopleList = api.arrFrom(this.peopleList, "pmeId")
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 查单证签字表
		executeSql5() {
			let signId = this.dateId.split('-')
			signId = signId[0] + signId[1] + signId[2]
			let sql = `select * from workSignTable WHERE bizId = '${signId}';`
			sqlite.executeSqlCeshi(sql).then((value) => {
				// 在resolve时执行的回调函数
				let zdyList = []
				let czList = []
				if (value.length > 0) {
					value.forEach(v => {
						if (v.sort == 0) {
							this.zdySign = {
								url: v.signFile,
								id: v.webId
							}
							zdyList.push(v)
						} else {
							this.czSign = {
								url: v.signFile,
								id: v.webId
							}
							czList.push(v)
						}
					})
				}
				if (zdyList.length == 0) {
					this.zdySign = {
						url: "",
						id: ""
					}
				}
				if (czList.length == 0) {
					this.czSign = {
						url: "",
						id: ""
					}
				}
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 删除当前签名
		delSign(id) {
			this.$refs.delPopup.open()
			this.delId = id
		},
		// 弹框删除
		delConfirm() {
			let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
			sqlite.executeSqlCeshi(sql).then((value) => {
				// 在resolve时执行的回调函数
				this.executeSql5()
			}).catch((error) => {
				// 在reject时执行的回调函数
				console.error(error);
			});
		},
		// 点击标签
		tabsChange(e) {
			this.tabsValue = e.value
			this.shiftList = this.tabsList[e.value].shiftArr
			this.dateId = this.tabsList[e.value].shiftArr[0].workEndTime.slice(0, 10)
			this.vvyName = this.tabsList[e.value].shiftArr[0].vvyName
			this.gbArr = []
			this.tabsArr = []
			this.tabsList = []
			this.shiftList = []
			this.shiftInf = []
			this.fcArr1 = []
			this.fcArr2 = []
			this.fcArr3 = []
			this.qtArr = []
			// this.peopleArr = []
			// this.tqInfo = ""
			// this.zyzsInfo = 0
			// this.dcrsInfo = 0
			// this.bwArr = []
			this.shiftInfo1 = []
			this.shiftInfo2 = []
			this.shiftInfo3 = []
			this.bwInfo = ""
			this.executeSql2(0)
			this.executeSql5()
			setTimeout(() => {
			this.shiftInfo.forEach(v => {
				// 车型转英文
				v.infoArr.forEach(item1 => {
					this.carList.forEach(item2 => {
			        	if(item1.carTypeName == item2.ptrDesc) {
			        		item1.carTypeName = item2.ptrEnDesc
			        	}
			        })
				})
				let arr = api.arrFrom(v.infoArr, "webId")
				this.$set(v, "infoArr", arr)
				if(v.pwcTypeName == '一工班') {
					this.shiftInfo1.push(v)
				} else if(v.pwcTypeName == '二工班'){
					this.shiftInfo2.push(v)
				} else if(v.pwcTypeName == '三工班') {
					this.shiftInfo3.push(v)
				}
			})
		    },300)
			this.fcList.forEach(v => {
				// 车型转英文
				this.carList.forEach(item2 => {
			     	if(v.carTypeName == item2.ptrDesc) {
						v.carTypeName = item2.ptrEnDesc
			     	}
			     })
				let endT = v.retallyEndTime.slice(0, 10)
				if (endT == this.dateId) {
					if (v.retallyTypeName == '舱内翻') {
						this.fcArr1.push(v)
					} else if (v.retallyTypeName == '舱外翻') {
						this.fcArr2.push(v)
					} else if (v.retallyTypeName == '货物重装') {
						this.fcArr3.push(v)
					}
				}
			})
			this.qtList.forEach(v => {
				let endT = ""
				if (v.endTm != "") {
					endT = v.endTm.slice(0, 10)
				} else if (v.endTmPt != "") {
					endT = v.endTmPt.slice(0, 10)
				}
				if (endT == this.dateId) {
					this.qtArr.push(v)
				}
			})
			if (this.qtArr.length == 0) {
				this.qtArr.push({})
			}
			// this.peopleList.forEach(v => {
			// 	let endT = v.jobEndTime.slice(0, 10)
			// 	if (endT == this.dateId) {
			// 		this.peopleArr.push(v)
			// 	}
			// })
			// // this.tqInfo = this.peopleArr[0].weatherType
			// this.weatherList.forEach(item => {
			// 	if(this.peopleArr[0].weatherType == item.ptrDesc) {
			// 		this.tqInfo = item.ptrEnDesc
			// 	}
			// })
			// this.peopleArr.forEach(v => {
			// 	this.zyzsInfo += Number(v.workSuite)
			// 	this.dcrsInfo += Number(v.shipPerson)
			// 	this.bwArr.push(v.bthIdName)
			// })
			this.bwInfo = this.bwArr.join(",")
		},
		// 点击签名
		togoSign(signType) {
			let obj = {
				id: this.dateId,
				url: "mixSign",
				signType: Number(signType), // 0 指导员  1 船长/大副
				signTable: "2",
				tabsValue: this.tabsValue,
				vvyId: this.vvyId,
			}
			const params = encodeURIComponent(JSON.stringify(obj));
			uni.navigateTo({
				url: `/pages/shipWork/sign?params=${params}`
			})
		},
	}
}
</script>

<style lang="less" scoped>
@import "../../style/css/main-dz.css";

.contentFixedr {
	margin-top: 68px !important;

	/deep/.tab .tab-bar {
		height: 66px;
		line-height: 66px;
		position: relative;
	}

	/deep/.tab .tab-bar-item {
		height: 66px;
		line-height: 66px;
		font-size: 18px;
		color: #23262E;
		font-weight: bold;
		font-family: PingFangSC-Semibold;
		padding: 0 24px !important;
	}

	/deep/.tab .tab-bar-item.active {
		color: #0067CF
	}

	/deep/.tab .tab-bar-item .active-line {
		color: #0067CF;
		width: 54px;
		height: 4px;
	}

	/deep/.tab-pane {
		width: 100%;
	}

	/deep/.tab .tab-cont {
		padding-bottom: 0;
	}
}

.container {
	padding: 0px 16px;
	background: #FFFFFF;
	border-radius: 8px;

	.head {
		height: 85px;
		padding: 16px 0;
		margin: 0 8px;
		border-bottom: 1px solid #999;
		display: flex;
		justify-content: space-between;

		.rightHead {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: right;

			.p {
				font-size: 22px;
				color: #0052A4;
				font-weight: bold;
			}

			text {
				font-size: 14px;
				color: #666666;
			}
		}
	}

	.headTItle {
		display: flex;
		justify-content: space-around;
		padding: 24px 0;
		margin: 0 8px;
		border-bottom: 1px solid #EEEEEE;

		.title {
			flex: 3;
			text-align: center;

			.p {
				font-size: 24px;
				color: #23262E;
				font-weight: bold;
			}

			text {
				font-size: 18px;
				color: #23262E;
			}
		}

		.titleLeft {
			flex: 1;
		}

		.titleRight {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			text:first-child {
				font-size: 14px;
				color: #666666;
			}

			text:last-child {
				font-size: 18px;
				color: #0052A4;
				font-weight: bold;
			}
		}
	}

	.ul {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 15px 0;

		.li {
			width: 33.33%;
			display: flex;
			justify-content: center;

			text {
				color: #23262E;
				font-weight: bold;
				font-size: 14px;
				width: 50%;
			}

			text:first-child {
				text-align: right;
			}
			.lineBox {
				width: 150px;
				text-align: center;
				.line {
				  height: 1px;
				  width: 150px;
				  background: black;
			    }
			}
		}

		.li:last-child {
			width: 66.67%;

			text {

				width: 75%;
			}

			text:first-child {
				width: 25%;
			}
		}
	}

	table {
		margin-bottom: 0 !important;
	}
}

.bo_r {
	border-right: 1px solid #000;
}

.bo_b {
	border-bottom: 1px solid #000;
}

.bo_l {
	border-left: 1px solid #000;
}

.cellX {
	display: flex;
}

.rowOne {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	border: 1px solid #000;
	border-bottom: 0;
	text-align: center;
	background-color: #e9e9e9;

	.left {
		width: 55%;
		display: flex;

		.cell {
			width: 25%;
			border-right: 1px solid #000;
		}

		.cellY {
			display: flex;
			flex-direction: column;

			.item {
				height: 30px;
				line-height: 30px;
			}

			.cellX {
				height: 30px;
				line-height: 30px;
				display: flex;
				justify-content: space-around;

				view {
					width: 50%;
				}
			}

		}

		.cellB {
			width: 50%;

			view {
				height: 30px;
				line-height: 30px;
			}
		}
	}

	.right {
		width: 45%;
		text-align: center;

		.itemLeft {
			width: 30%;
			line-height: 60px;
		}

		.cellY {
			height: 30px;
			line-height: 30px;
			display: flex;
			flex-direction: column;
		}

		.itemRight {
			width: 70%;

			text {
				width: 33.3333%;
			}
		}
	}
}

.rowTwo {
	width: 100%;
	display: flex;
	justify-content: space-between;
	border: 1px solid #000;
	border-bottom: 0;
	text-align: center;

	.left {
		width: 55%;
		display: flex;
		min-height: 30px;
		line-height: 30px;

		.cell {
			width: 25%;
			vertical-align: middle;
		}

		.cellX {
			display: flex;
			justify-content: space-between;

			.item {
				width: 50%;
			}
		}

		.cellY {
			width: 50%;
			text-align: center;

			.item {
				width: 100%;
				line-height: 30px;
				border-bottom: 1px solid #000;
			}

			.item:last-child {
				border-bottom: 0;
			}
		}
	}

	.right {
		width: 45%;
		line-height: 30px;

		.itemLeft {
			width: 30%;
		}

		.itemRight {
			width: 70%;
			position: relative;

			.gezi {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;

				view {
					width: 33.33%;
					border-right: 1px solid #000;
				}

				view:last-child {
					width: 33.34%;
					border-right: 0;
				}
			}

			.itemList {
				width: 100%;
				height: auto;
				display: flex;

				.item {
					width: 33.3333%;
				}
			}

			.itemList:last-child {
				border: 0;
			}

		}
	}
}

.rowThree {
	display: flex;
	border: 1px solid #000;
	border-bottom: 0;
	text-align: center;

	.title {
		// 0.55*0.25
		width: 13.75%;
		line-height: 30px;
	}

	.fclist {
		display: flex;
		width: 86.25%;
		flex-direction: column;

		.fcbt {
			line-height: 30px;
			text-align: center;
			border-bottom: 1px solid #000;

			.bt {
				display: flex;

				.kind {
					width: 15.96%;
				}

				.ceY {
					width: 84.04%;

					.concat {
						width: 100%;
						min-height: 30px;
						display: flex;
						border-bottom: 1px solid #000;

						.date {
							width: 37.84%;
						}

						.weight {
							width: 62.16%;
						}
					}

					.concat:last-child {
						border-bottom: 0;
					}
				}


				.date {
					width: 31.8%;
					display: flex;

					.item {
						width: 50%;
						display: flex;

						.sz {
							width: 50%;
						}
					}

					.cellY {
						width: 100%;

						.cellX view {
							width: 50%;
						}
					}
				}

				.weight {
					width: 52.24%;

					.text {
						width: 50%;
					}

					.cellX view {
						width: 50%;
					}
				}

			}
		}

	}
}

.rowFour {
	text-align: center;
	line-height: 30px;

	.row {
		display: flex;
		height: 30px;
		width: 100%;
		border-bottom: 1px solid #000;
	}

	.rowC {
		display: flex;
		height: 60px;
		width: 100%;
		border-bottom: 1px solid #000;

		.date {
			.sz {
				height: 30px;
				width: 100%;
				border-right: 1px solid #000;
			}
		}
	}

	.title {
		// 0.55*0.25
		width: 13.75%;
	}

	.kind {
		width: 13.78%;
	}

	.rownr {
		// 0.55*0.25
		width: 86.25%;
	}

	.date {
		width: 27.45%;
		display: flex;
		justify-content: space-around;

		view {
			width: 25%;
		}
	}

	.weight {
		width: 45%;
		text-align: center;

		.sz {
			height: 30px;
		}
	}

}



.headZx {
	background: #E9E9E9;
}

.t-zx td {
	height: 36px;
}

/deep/.uni-scroll-view-content {
	display: flex;
}

.rowBox {
	width: calc(100% - 1px);
	display: flex;
	border: 1px solid #000;
	box-sizing: border-box;

	.name {
		border-right: 1px solid #000;
		width: 200px;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10px;
	}

	.time {
		border-right: 1px solid #000;
		width: 203px;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.infoBox {
		width: calc(100% - 476px);
		display: flex;
		flex-direction: column;
		justify-items: center;

		.iBox {
			flex: 1;
			display: flex;
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;

			.carCss {
				border-right: 1px solid #000;
				width: 209px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.remark {
				border-right: 1px solid #000;
				width: 63px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.gx {
				border-right: 1px solid #000;
				width: 61px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.ro {
				width: 87.5px;
			}

			.pr {
				width: 139px;
			}

			.ot {
				width: 90px;
				border: none;
			}
		}

		.iBox:first-child {
			border-top: none;
		}

		.iBox:last-child {
			border-bottom: none;
		}
	}
}

.signBox {
	width: 100%;
	height: 66px;
	background: #FFFFFF;
	border: 1px solid #E1E5ED;
	box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: flex-end;
	padding: 0 70px;

	.row {
		width: 1px;
		height: 30px;
		background-color: #ccc;
		margin-top: 18px;
	}

	.signContent {
		display: flex;
		margin: 0 54px;

		.signTitle {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: right;
		}

		.signInfo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 18px;
			color: #0052A4;
			margin-left: 16px;
		}

		.signImg {
			width: 100px;
			height: 54px;
			margin-top: 5px;
			margin-left: 10px;
		}
	}

	.signContent:last-child {
		margin-right: 0;
	}
}
</style>