<template>
	<view class="app">
		<head-info :navIndex="4"></head-info>
		<view class="container">
			<custom-tabs type="c1" :value="tabsValue" @change="changeTabs">
				<custom-tab-pane label="场位图" name="c1_1">
					<view></view>
					<view class="tab1" v-if="isCwnum == 0">
						<view class="form">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
										@iconClick="search" @input="inputChange"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>船名<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>航次<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>作业状态<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view style="padding: 0 8px;">
							<view class="dataTitle" @click="isShowData = !isShowData">
								<text>数据概况</text>
								<p v-if="isShowData">
									<uni-icons type="bottom" color="#1890FF" size="16"></uni-icons>
									<text style="margin-left: 4px;">收起</text>
								</p>
								<p v-if="!isShowData">
									<uni-icons type="top" color="#1890FF" size="16"></uni-icons>
									<text style="margin-left: 4px;">展开</text>
								</p>
							</view>
							<view class="dataBox" v-if="isShowData">
								<view class="boxTop">
									<view class="topContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop1.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>总车位数</text>
											<p>{{surveyList.totalSeatAmout}}</p>
										</view>
									</view>
									<view class="topContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop2.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>使用车位数</text>
											<p>{{surveyList.useSeatAmout}}</p>
										</view>
									</view>
									<view class="topContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop3.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>剩余车位数</text>
											<p>{{surveyList.remainSeatAmout}}</p>
										</view>
									</view>
									<view class="topContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop4.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>虚拟车位数</text>
											<p>{{surveyList.virtuaSeatAmout}}</p>
										</view>
									</view>
									<view class="topContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop5.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>可停放货物数量</text>
											<p>{{surveyList.unparkGoodsAmout}}</p>
										</view>
									</view>
									<view class="topContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop6.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>已停放货物数量</text>
											<p>{{surveyList.stopGoodsAmout}}</p>
										</view>
									</view>
								</view>
								<view class="boxBottom">
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop7.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>车辆总数(辆)</text>
											<p>{{carList.carAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop8.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>外贸出口(辆)</text>
											<p>{{carList.externalExportCarAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop9.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>外贸进口(辆)</text>
											<p>{{carList.externalImportCarAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop10.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>内贸出口(辆)</text>
											<p>{{carList.domesticExportCarAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop11.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>内贸进口(辆)</text>
											<p>{{carList.domesticImportCarAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop12.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>备件总数(件)</text>
											<p>{{partsList.partAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop13.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>外贸出口(件)</text>
											<p>{{partsList.externalExportPartAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop14.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>外贸进口(件)</text>
											<p>{{partsList.externalImportPartAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop15.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>内贸出口(件)</text>
											<p>{{partsList.domesticExportPartAmout}}</p>
										</view>
									</view>
									<view class="bottomContent">
										<view class="contentLeft">
											<image src="../../static/images/cwTop16.png" mode=""></image>
										</view>
										<view class="contentRight">
											<text>内贸进口(件)</text>
											<p>{{partsList.domesticImportPartAmout}}</p>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="sortBox">
							<view class="title">场位信息</view>
							<view class="combox">
							 <superwei-combox :candidates="sortList" :isJSON="true" keyName="text" placeholder="排序选择"
								v-model="sortName" @select="sortSelect"></superwei-combox>
							</view>
						</view>
						<view class="cwMain">
							<view class="cwLeft">
								<view class="leftData" v-for="(item,index) in dcList" :key="index"
									@click="clickLeft(item,index)"
									:class="{active:activeIndex == index,gl:item.existFlag == 1}">
									<p>{{item.pymName}}
									</p>
								</view>
							</view>
							<view class="cwRight">
								<view class="rightBox" v-for="(item,index) in qyList" :key="index">
									<view class="boxTop">
										<p>{{item.pyaAreaCode}}区（{{item.useSeatAmount}}/{{item.totalSeatAmount}}）</p>
										<text @click="clickLine(item)">车道</text>
									</view>
									<view class="boxContent">
										<view class="empty" v-show="item.emptyLaneList.length">
										 <view class="dataList" v-for="(ite,inde) in item.emptyLaneList" :key="inde">
                                             {{ ite }}道 （空道）
										 </view>
										</view>
										<view class="data" v-show="item.goodsInfoList.length">
                                          <view class="dataList" v-for="(ite,inde) in item.goodsInfoList" :key="inde">
											<view class="goOut" v-show="ite.importExportType == 'E'">出</view>
											<view class="advance" v-show="ite.importExportType == 'I'">进</view>
                                            <view class="spmName">{{ ite.spmName }}/{{ ite.vvyName }}</view>
											<view class="brdName">{{ ite.brdName }}</view>
											<view style="margin-left: 16px;">{{ ite.amount }}辆</view>
											<view class="lane">{{ ite.lane }}道</view>
										  </view>
										</view>
										<!-- <view class="boxJd">
											<lx-progress-bar title="" :total="item.totalSeatAmout"
												:firstValue="item.stopGoodsAmout" contentColor="#0067CF" />
											<text>{{item.stopGoodsAmout}}/{{item.totalSeatAmout}}</text>
										</view> -->
										<!-- <view class="carUl">
											<view class="carLi" v-for="(v,index2) in item.carStatisticsList"
												:key="index2" @click="clickCar(v)">
												<zb-tooltip placement="top-start" color="white"
													:visible.sync="v.isShow">
													<view slot="content">
														<view class="tipBox">
															<view class="li" v-for="(item2,idx) in v.carDetailList"
																:key="idx">
																<p>{{item2.storeLine}}道</p>
																<text>{{item2.storeSeatAmout}}车位</text>
															</view>
														</view>
													</view>
													<view style="width: 100%; height: 100%;">
														<p class="carTitle">{{v.brdName}}
															<template v-if="v.bvmName != ''">
																-
															</template>
															{{v.bvmName}}
														</p>
														<text>共{{v.carAmout}}辆</text>
													</view>
												</zb-tooltip>
											</view>
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<template v-else>
						<place @modifyPlaceTabs="modifyPlaceTabs" :vvyId="vvyId" :pyaObj="pyaObj" :brdId="brdId"
							:potId="potId" :vinCode="vinCode" :workId="workId" :dcId="dcId"></place>
					</template>
				</custom-tab-pane>
				<custom-tab-pane :label="tabsTitle1" name="c1_2">
					<view></view>
					<view class="tabs2">
						<view class="form">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
										@iconClick="search"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>堆场<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>进出口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>贸易类型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>船名<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>航次<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>作业状态<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view class="itemList">
							<template v-if="goodsList.length > 0">
								<view class="item" v-for="(item,index) in goodsList" :key="index">
									<view class="headTop">
										<view class="leftHead">
											<image src="../../static/images/zlIcon.png" mode=""></image>
											<text>车架号/条形码：{{item.vinCode}}</text>
										</view>
										<view class="rightHead">
											<view class="btn">
												<image src="../../static/images/cwCs.png"></image>
												<text>残损</text>
											</view>
											<view class="btn">
												<image src="../../static/images/cwJl.png"></image>
												<text>作业记录</text>
											</view>
										</view>
									</view>
									<view class="row">
										<view class="col">
											港区：<text>{{item.pamName == null ? "-" : item.pamName}}</text>
										</view>
										<view class="col">
											提单号：<text>{{item.mnfBl == null ? "-" : item.mnfBl}}</text>
										</view>
										<view class="col">
											收车状态：<text>{{item.godStatus == null ? "-" : item.godStatus}}</text>
										</view>
										<view class="col">
											作业时间：<text>{{item.updateTime == null ? "-" : item.updateTime}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											船名：<text>{{item.vslCnname == null ? "-" : item.vslCnname}}</text>
										</view>
										<view class="col">
											作业状态：<text>{{item.workStatus == null ? "-" : item.workStatus}}</text>
										</view>
										<view class="col">
											港口：<text>{{item.potName == null ? "-" : item.potName}}</text>
										</view>
										<view class="col">
											作业人员：<text>{{item.updateUser == null ? "-" : item.updateUser}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											航次：<text>{{item.vvyName == null ? "-" : item.vvyName}}</text>
										</view>
										<view class="col">
											堆场名称：<text>{{item.yardName == null ? "-" : item.yardName}}</text>
										</view>
										<view class="col">
											品牌：<text>{{item.brdName == null ? "-" : item.brdName}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											贸易类型：<text>{{item.tradeType == null ? "-" : item.tradeType}}</text>
										</view>
										<view class="col">
											场位：<text>{{item.posYard == null ? "-" : item.posYard}}</text>
										</view>
										<view class="col">
											型号：<text>{{item.model == null ? "-" : item.model}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											进出口：<text>{{item.importExportType == null ? "-" : item.importExportType}}</text>
										</view>
										<view class="col">
											车型：<text>{{item.bvmName == null ? "-" : item.bvmName}}</text>
										</view>
										<view class="col">
											车型明细：<text>{{item.bvdName == null ? "-" : item.bvdName}}</text>
										</view>
									</view>
								</view>
							</template>
							<o-empty v-else height="70vh" bg="#f5f6fa" />
						</view>
						<view class="pageBox" v-if="goodsList.length > 0">
							<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
								@change="changePage" />
						</view>
					</view>
				</custom-tab-pane>
				<custom-tab-pane :label="tabsTitle2" name="c1_3">
					<view></view>
					<view class="tabs2">
						<view class="form">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
										@iconClick="search"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>堆场<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>进出口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>贸易类型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>船名<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>航次<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>作业状态<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view class="itemList">
							<template v-if="ycGoodsList.length > 0">
								<view class="item" v-for="(item,index) in ycGoodsList" :key="index">
									<view class="headTop">
										<view class="leftHead">
											<image src="../../static/images/zlIcon.png" mode=""></image>
											<text>车架号/条形码：{{item.vinCode}}</text>
										</view>
										<view class="rightHead">
											<view class="btn">
												<image src="../../static/images/cwCs.png"></image>
												<text>残损</text>
											</view>
											<view class="btn">
												<image src="../../static/images/cwJl.png"></image>
												<text>作业记录</text>
											</view>
										</view>
									</view>
									<view class="row">
										<view class="col">
											港区：<text>{{item.pamName == null ? "-" : item.pamName}}</text>
										</view>
										<view class="col">
											提单号：<text>{{item.mnfBl == null ? "-" : item.mnfBl}}</text>
										</view>
										<view class="col">
											收车状态：<text>{{item.godStatus == null ? "-" : item.godStatus}}</text>
										</view>
										<view class="col">
											作业时间：<text>{{item.updateTime == null ? "-" : item.updateTime}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											船名：<text>{{item.vslCnname == null ? "-" : item.vslCnname}}</text>
										</view>
										<view class="col">
											作业状态：<text>{{item.workStatus == null ? "-" : item.workStatus}}</text>
										</view>
										<view class="col">
											港口：<text>{{item.potName == null ? "-" : item.potName}}</text>
										</view>
										<view class="col">
											作业人员：<text>{{item.updateUser == null ? "-" : item.updateUser}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											航次：<text>{{item.vvyName == null ? "-" : item.vvyName}}</text>
										</view>
										<view class="col">
											堆场名称：<text>{{item.yardName == null ? "-" : item.yardName}}</text>
										</view>
										<view class="col">
											品牌：<text>{{item.brdName == null ? "-" : item.brdName}}</text>
										</view>
										<view class="col">
											备注：<text>{{item.remark == null ? "-" : item.remark}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											贸易类型：<text>{{item.tradeType == null ? "-" : item.tradeType}}</text>
										</view>
										<view class="col">
											场位：<text>{{item.posYard == null ? "-" : item.posYard}}</text>
										</view>
										<view class="col">
											型号：<text>{{item.model == null ? "-" : item.model}}</text>
										</view>
									</view>
									<view class="row">
										<view class="col">
											进出口：<text>{{item.importExportType == null ? "-" : item.importExportType}}</text>
										</view>
										<view class="col">
											车型：<text>{{item.bvmName == null ? "-" : item.bvmName}}</text>
										</view>
										<view class="col">
											车型明细：<text>{{item.bvdName == null ? "-" : item.bvdName}}</text>
										</view>
									</view>
								</view>
							</template>
							<o-empty v-else height="70vh" bg="#f5f6fa" />
						</view>
						<view class="pageBox" v-if="ycGoodsList.length > 0">
							<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
								@change="changePage" />
						</view>
					</view>
				</custom-tab-pane>
			</custom-tabs>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="drawerTop" @click="back">
							<image src="../../static/images/leftJt.png" mode=""></image>
							<text>返回</text>
						</view>
						<template v-if="tabsValue == 1 || tabsValue == 2">
							<view class="drawerTitle">
								堆场
							</view>
							<superwei-combox :candidates="yardList" :isJSON="true" keyName="pymName" placeholder="堆场"
								v-model="yardName" @select="yardSelect"></superwei-combox>
							<view class="drawerTitle">
								进出口
							</view>
							<superwei-combox :candidates="jckList" :isJSON="true" keyName="text" placeholder="进出口"
								v-model="jckName" @select="jckSelect"></superwei-combox>
							<view class="drawerTitle">
								贸易类型
							</view>
							<superwei-combox :candidates="myList" :isJSON="true" keyName="text" placeholder="贸易类型"
								v-model="myName" @select="mySelect"></superwei-combox>
						</template>
						<view class="drawerTitle">
							船名
						</view>
						<superwei-combox :candidates="shipList" :isJSON="true" keyName="vslCnname" placeholder="船名"
							v-model="shipName" @select="shipSelect" @input="shipInput"></superwei-combox>
						<view class="drawerTitle">
							航次
						</view>
						<superwei-combox :candidates="vvyList" :isJSON="true" keyName="vvyName" placeholder="航次"
							v-model="vvyName" @input="vvyInput" @select="vvySelect"></superwei-combox>
						<view class="drawerTitle">
							品牌
						</view>
						<superwei-combox :candidates="brandList" :isJSON="true" keyName="brdName" placeholder="品牌"
							v-model="brdName" @select="brandSelect"></superwei-combox>
						<view class="drawerTitle">
							港口
						</view>
						<superwei-combox :candidates="potList" :isJSON="true" keyName="potCnname" placeholder="港口"
							v-model="potName" @select="potSelect"></superwei-combox>
						<view class="drawerTitle">
							作业状态
						</view>
						<superwei-combox :candidates="workList" :isJSON="true" keyName="ptrDesc" placeholder="作业状态"
							v-model="workName" @select="workSelect"></superwei-combox>
						<view class="bottomBtn">
							<view class="btn czBtn" @click="reset">
								重置
							</view>
							<view class="btn qrBtn" @click="confirm">
								确认
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import HeadInfo from '@/components/head-info/head-info';
	import place from './place.vue';
	let timerId
	export default {
		data() {
			return {
				tabsValue: 0,
				tabsTitle1: "货物列表",
				tabsTitle2: "场位异常货物列表",
				loginObj: {},
				portObj: {},
				// 查询条件
				// 车架号/备件号
				vinCode: "",
				// 货物列表下拉堆场
				yardId: "",
				yardName: "",
				yardList: [],
				// 进出口
				jckId: "",
				jckName: "",
				jckList: [{
						id: "I",
						text: "进口"
					},
					{
						id: "E",
						text: "出口"
					}
				],
				// 贸易类型
				myId: "",
				myName: "",
				myList: [{
						id: "W",
						text: "外贸"
					},
					{
						id: "N",
						text: "内贸"
					}
				],
				// 航次
				vvyId: "",
				vvyName: "",
				vvyList: [],
				// 航次下拉出来船ID
				vvySpmId: "",
				// 船名
				shipId: "",
				shipName: "",
				shipList: [],
				// 品牌
				brdId: "",
				brdName: "",
				brandList: [],
				// 港口
				potId: "",
				potName: "",
				potList: [],
				// 作业状态
				workId: "",
				workName: "",
				workList: [],

				// 场位概况
				surveyList: {},
				carTabsValue: 0,
				// 车辆
				carList: {},
				// 备件
				partsList: {},
				// 是否展开
				isShowData: false,
				// 选中左侧堆场
				activeIndex: 0,
				// 场位图左侧堆场
				dcId: "",
				dcName: "",
				dcList: [],
				// 区域
				pyaObj: "",
				qyList: [],
				// 场位的状态 是否进入车道
				isCwnum: 0,

				// 货物列表数据
				goodsList: [],

				// 场位异常货物列表
				ycGoodsList: [],

				// 分页
				total: 0,
				pageSize: 10,
				current: 1,
				sortList:[
					{
						id: "ASC",
						text: "正序排列"
					},
					{
						id: "DESC",
						text: "倒序排列"
					},
					{
						id: "DEFAULT",
						text: "默认"
					},
				],
				sortName:'默认',
				trendPlansOrderRule:'DEFAULT'
			}
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				return true;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		onLoad() {
			this.loginObj = uni.getStorageSync('loginObj')
			this.portObj = uni.getStorageSync('portObj')
			this.getShip("")
			this.getVvy("")
			this.getBrand()
			this.getPot()
			this.getWork()
			this.getDc()
			this.getYard()
			this.getGoodsInfo()
			this.getYcGoodsInfo()
		},
		components: {
			HeadInfo,
			place
		},
		methods: {
			// tabs切换
			changeTabs(e) {
				this.tabsValue = e.value
				this.yardId = ""
				this.yardName = ""
				this.vinCode = ""
				this.vvyId = ""
				this.vvyName = ""
				this.vvySpmId = ""
				this.shipId = ""
				this.shipName = ""
				this.brdId = ""
				this.brdName = ""
				this.potId = ""
				this.potName = ""
				this.workId = ""
				this.workName = ""
				this.jckId = ""
				this.jckName = ""
				this.myId = ""
				this.myName = ""
				this.activeIndex = 0
				this.current = 1
				if (this.tabsValue == 0) {
					this.getDc()
					this.getGoodsInfo()
					this.getYcGoodsInfo()
				} else if (this.tabsValue == 1) {
					this.getGoodsInfo()
				} else if (this.tabsValue == 2) {
					this.getYcGoodsInfo()
				}
			},
			// 查询条件
			// 点击筛选
			screen() {
				this.$refs.showRight.open();
			},
			// 返回
			back() {
				this.$refs.showRight.close();
			},
			// 重置
			reset() {
				// 船名
				this.shipId = ""
				this.shipName = ""
				// 航次
				this.vvyId = ""
				this.vvyName = ""
				this.vvySpmId = ""
				// 品牌
				this.brdId = ""
				this.brdName = ""
				// 港口
				this.potId = ""
				this.potName = ""
				// 作业状态
				this.workId = ""
				this.workName = ""
				// 堆场
				this.yardId = ""
				this.yardName = ""
				// 进出口
				this.jckId = ""
				this.jckName = ""
				// 贸易类型
				this.myId = ""
				this.myName = ""
			},
			// 筛选确认
			confirm() {
				this.itemList = []
				this.current = 1
				if (this.tabsValue == 0) {
					this.getQy()
					this.getDc()
				} else if (this.tabsValue == 1) {
					this.getGoodsInfo()
				} else if (this.tabsValue == 2) {
					this.getYcGoodsInfo()
				}
				this.$refs.showRight.close();
			},
			// 查询框
			search() {
				if (this.tabsValue == 0) {
					this.getQy()
				} else if (this.tabsValue == 1) {
					this.getGoodsInfo()
				} else if (this.tabsValue == 2) {
					this.getYcGoodsInfo()
				}
			},
			// 获取船名
			getShip(query) {
				uni.request({
					url: `${this.$local}/api/shipManage/queryLikeShipManage?query=${query}&spmId=${this.vvySpmId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.shipList = res.data.data
						}
					}
				})
			},
			// 船名模糊查询
			shipInput(e) {
				if(e) {
					this.getShip(e)
				} else {
					this.vvySpmId = ''
					this.getShip('')
				}
			},
			// 选择船名
			shipSelect(e) {
				this.shipId = e.spmId
				this.shipName = e.vslCnname
				this.getVvy("")
			},
			// 获取航次
			getVvy(key) {
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?key=${key}&spmId=${this.shipId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.vvyList = res.data.data
						}
					}
				})
			},
			// 航次模糊查询
			vvyInput(e) {
				this.getVvy(e)
			},
			// 选择航次
			vvySelect(e) {
				this.vvyId = e.vvyId
				this.vvyName = e.vvyName
				this.vvySpmId = e.spmId
				this.getShip("")
			},
			// 获取品牌
			getBrand() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/goods/brand`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.brandList = res.data.data
						}
					}
				})
			},
			// 选择品牌
			brandSelect(e) {
				this.brdId = e.brdId
				this.brdName = e.brdName
			},
			// 获取港口
			getPot() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/goods/pot`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.potList = res.data.data
						}
					}
				})
			},
			// 选择港口
			potSelect(e) {
				this.potId = e.potId
				this.potName = e.potCnname
			},
			// 获取作业状态
			getWork() {
				uni.request({
					url: `${this.$local}/api/miniapp/typeRef/domain/WORK_STATUS`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.workList = res.data.data
						}
					}
				})
			},
			// 选择作业状态
			workSelect(e) {
				this.workId = e.ptrCode
				this.workName = e.ptrDesc
			},
			// 获取堆场数据
			getYard() {
				uni.request({
					url: `${this.$local}/api/yard/sel/query/yard?pamId=${this.portObj.portId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.yardList = res.data.data
						}
					}
				})
			},
			// 选择堆场
			yardSelect(e) {
				this.yardId = e.pymId
				this.yardName = e.pymName
			},
			// 选择进出口
			jckSelect(e) {
				this.jckId = e.id
				this.jckName = e.text
			},
			// 选择贸易类型
			mySelect(e) {
				this.myId = e.id
				this.myName = e.text
			},
			// 场位图
			// 获取场位概况
			getSurvey() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/v2/situation?pamId=${this.portObj.portId}&pymId=${this.dcId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.surveyList = res.data.data
							if (this.surveyList.carSituation != null) {
								this.carList = this.surveyList.carSituation
							}
							if (this.surveyList.partSituation != null) {
								this.partsList = this.surveyList.partSituation
							}
						}
					}
				})
			},
			// 获取左侧堆场列表
			getDc() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/v2/yard/list?displayFlag=0&pamId=${this.portObj.portId}&vvyId=${this.vvyId}&brdId=${this.brdId}&potId=${this.potId}&spmId=${this.shipId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=100`,
					// url: `${this.$local}/api/yardGoods/monitor/goods/manage/page?displayFlag=0&pamId=${this.portObj.portId}&vvyId=${this.vvyId}&brdId=${this.brdId}&potId=${this.potId}&spmId=${this.shipId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=100`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.dcList = res.data.data
							this.dcId = this.dcList[0].pymId
							this.dcName = this.dcList[0].pymName
							this.getSurvey()
							this.getQy()
						}
					}
				})
			},
			// 点击左侧列表
			clickLeft(item, index) {
				this.dcId = item.pymId
				this.dcName = item.pymName
				this.activeIndex = index
				this.getSurvey()
				this.getQy()
			},
			// 获取右侧区域数据
			getQy() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/v2/region/list?spmId=${this.shipId}&vvyId=${this.vvyId}&pymId=${this.dcId}&displayFlag=0&brdId=${this.brdId}&potId=${this.potId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=1000&trendPlansOrderRule=${this.trendPlansOrderRule}`,
					// url: `${this.$local}/api/yardGoods/monitor/region/statistics?spmId=${this.shipId}&vvyId=${this.vvyId}&pymId=${this.dcId}&displayFlag=0&brdId=${this.brdId}&potId=${this.potId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=1000`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.qyList = res.data.data
							// console.log(this.qyList);
							this.qyList.forEach(v => {
								if (v.totalSeatAmount == null) {
									this.$set(v, "totalSeatAmount", 0)
								}
								if (v.useSeatAmount == null) {
									this.$set(v, "useSeatAmount", 0)
								}
								if (v.carStatisticsList != null) {
									v.carStatisticsList.forEach(e => {
										this.$set(e, "isShow", false)
									})
								}
							})
						}
					}
				})
			},
			// 点击车位查看详情
			clickCar(item) {
				item.isShow = !item.isShow
			},
			// 点击车道
			clickLine(item) {
				this.pyaObj = item
				this.isCwnum = 1;
			},
			// 子组件修改值
			modifyPlaceTabs(data) {
				this.isCwnum = data;
			},
			// 货物列表
			// 获取货物列表货物信息数据
			getGoodsInfo() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/goods/list?brdId=${this.brdId}&pamId=${this.portObj.portId}&potId=${this.potId}&pymId=${this.yardId}&spmId=${this.shipId}&vinCode=${this.vinCode}&vvyId=${this.vvyId}&workStatuss=${this.workId}&importExportType=${this.jckId}&tradeType=${this.myId}&current=${this.current}&size=${this.pageSize}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.goodsList = res.data.data.records
							this.total = res.data.data.total
							this.tabsTitle1 = `货物列表(${this.total})`
						}
					}
				})
			},
			// 获取场位异常货物列表
			getYcGoodsInfo() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/error/list?brdId=${this.brdId}&pamId=${this.portObj.portId}&potId=${this.potId}&pymId=${this.yardId}&spmId=${this.shipId}&vinCode=${this.vinCode}&vvyId=${this.vvyId}&workStatuss=${this.workId}&importExportType=${this.jckId}&tradeType=${this.myId}&current=${this.current}&size=${this.pageSize}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.ycGoodsList = res.data.data.records
							this.total = res.data.data.total
							this.tabsTitle2 = `场位异常货物列表(${this.total})`
						}
					}
				})
			},
			// 点击分页
			changePage(e) {
				this.current = e.current;
				if (this.tabsValue == 1) {
					this.getGoodsInfo()
				} else if (this.tabsValue == 2) {
					this.getYcGoodsInfo()
				}
			},
			// 排序切换
			sortSelect(e) {
			 this.trendPlansOrderRule = e.id
			this.getQy()
						},
			// 输入框值发生改变
			inputChange(e) {
				clearTimeout(timerId)
				timerId = setTimeout(() => {
				 this.vinCode = e
				 this.confirm()
				},1000)
			}
		}
	};
</script>

<style lang="less" scoped>
	.container {
		height: 100vh;
		margin-top: 68px;
		background-color: #fff;

		/deep/.tab .tab-bar {
			height: 66px;
			line-height: 66px;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			position: fixed;
			left: 0;
			top: 68px;
			z-index: 996;
		}

		/deep/.tab .tab-bar-item {
			font-size: 18px;
			height: 66px;
			line-height: 66px;
		}

		/deep/.tab .tab-bar-item .active-line {
			height: 4px;
			width: calc(100% - 40px);
			padding: 0 10px;
		}

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

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

		.form {
			background: #FAFAFA;
			border-top: 1px solid #EEEEEE;
			border-bottom: 1px solid #EEEEEE;

			.inputBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 5px 10px;

				.leftInput {
					width: 200px;
				}

				/deep/.uni-easyinput {
					width: 200px;
				}

				/deep/.content-clear-icon {
					display: none;
				}

				/deep/.is-input-border {
					border-radius: 18.5px;
				}

				/deep/.uni-easyinput__placeholder-class {
					font-size: 14px;
					color: #666;
				}

				.rightInput {
					display: flex;

					p {
						margin-left: 10px;
						line-height: 40px;
					}
				}
			}

			.btn {
				height: 35px;
				line-height: 35px;
				margin-right: 10px;

			}
		}

		.tab1 {
			margin-top: 66px;

			.dataTitle {
				margin-top: 14px;
				width: 100%;
				height: 42px;
				line-height: 42px;
				font-size: 14px;
				color: #1890FF;
				padding: 0 16px;
				display: flex;
				justify-content: space-between;
				background: #FFFFFF;
				border: 1px solid #E1E5ED;

				text:first-child {
					font-size: 16px;
					color: #0D518B;
				}
			}

			.dataBox {
				width: 100%;
				padding: 0 8px;
				margin-top: 8px;

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

					.topContent {
						width: calc(100% / 6 - 8px);
						height: 70px;
						background-color: #fff;
						box-shadow: 0 4px 14px 0 rgba(228, 228, 228, 0.50);
						border-radius: 4px;
						display: flex;
					}
				}

				.boxBottom {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					gap: 16px;
					margin-top: 16px;

					.bottomContent {
						width: calc(100% / 5 - 16px);
						height: 70px;
						background-color: #fff;
						box-shadow: 0 4px 14px 0 rgba(228, 228, 228, 0.50);
						border-radius: 4px;
						display: flex;
					}
				}

				.contentLeft {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-right: 8px;
					margin-left: 14px;

					image {
						width: 50px;
						height: 50px;
					}
				}

				.contentRight {
					display: flex;
					flex-direction: column;
					justify-content: center;

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

					p {
						margin-top: 4px;
						ont-family: D-DINExp;
						font-size: 24px;
						color: #252525;
					}
				}
			}

			.cwMain {
				display: flex;
				width: 100%;
				height: calc(100vh - 66px - 68px - 47px);
				margin-top: 10px;

				.cwLeft {
					width: 128px;
					height: 100%;
					background-color: #fff;
					overflow: scroll;

					.leftData {
						width: 116px;
						height: 42px;
						text-align: center;
						line-height: 42px;
						margin: 4px 6px;
						overflow: hidden;
					}

					.gl {
						box-shadow: 5px 5px 20px 1px #0371e024 inset;
						border: 1px solid rgba(3, 114, 224);
					}

					.active {
						color: #fff;
						background-color: #0372E0;
						border-radius: 4px;
					}
				}

				.cwRight {
					width: calc(100% - 128px);
					height: 100%;
					overflow: scroll;
					padding-left: 18px;
					background: #FAFAFA;
					display: flex;
					flex-wrap: wrap;
					padding-bottom: 16px;

					.rightBox {
						width: 33.3%;
						height: 214px;
						border: 1px solid #E1E5ED;

						/deep/.zb_tooltip_content {
							width: 100%;
						}

						.boxTop {
							width: 100%;
							height: 32px;
							border-bottom: 1px solid #E1E5ED;
							line-height: 32px;
							display: flex;
							justify-content: space-between;
							padding: 0 8px;
							background: #FAFAFA;

							p {
								font-size: 14px;
								color: #0D518B;
							}

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

						.boxContent {
							height: 180px;
							overflow: scroll;
							padding: 5px 8px;
                            .empty {
								display: flex;
								width: 100%;
								padding: 8px 6px;
								background: #E1E5ED;
								align-items: center;
								justify-content: center;
								.dataList {
                              
							   }
							}
							.data {
								font-size: 12px;
								.dataList {
									width: 100%;
								    padding: 8px 9px;
								    background: white;
								    margin-top: 6px;
									display: flex;
									align-items: center;
									position: relative;
									.goOut {
										color: #FF6B3B;
										border: 1px solid #FF6B3B;
										border-radius: 50%;
										padding: 3px;
										font-size: 8px;
									}
									.advance {
										color: #2CC68B;
										border: 1px solid #2CC68B;
										border-radius: 50%;
										padding: 3px;
										font-size: 8px;
									}
									.spmName {
										margin-left: 10px;
									    width:77px;
										white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
									}
									.brdName {
										margin-left: 12px;
										width:50px;
										white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
									}
									.lane {
										position: absolute;
										right: 9px;
									}
							    }
							}

							.boxJd {
								display: flex;
								margin-top: 10px;

								text {
									margin-left: 10px;
									font-size: 14px;
									color: #333333;
								}

								/deep/.progress-bar-title {
									margin: 0;
								}

								/deep/.bar {
									height: 8px;
									margin-top: 5px;
									width: 240px;
									border-radius: 50%;
								}

								/deep/.progress-bar .bar-single {
									width: 100%;
									height: 100%;
									border-radius: 8px;
									background-color: #e1e5ed !important;
								}

								/deep/.progress-bar .bar-double {
									height: 100%;
								}

								/deep/.progress-bar .bar-interval {
									width: 0;
								}

								/deep/.bar-text span {
									display: none;
								}
							}

							.carUl {
								width: 100%;
								display: flex;
								flex-wrap: wrap;

								.carLi {
									width: calc(50% - 12px);
									height: 42px;
									margin: 8px 12px;
									margin-left: 0;
									background: #ffffff;
									border: 1px solid #e1e5ed;
									font-family: PingFangSC-Regular;
									font-size: 12px;
									line-height: 15px;
									padding: 4px 8px;

									.carTitle {
										font-size: 12px;
										color: #1677FF;
										margin-bottom: 4px;
									}

									.tipBox {
										width: 150px;
										height: 50px;
										overflow: scroll;

										.li {
											width: 100%;
											display: flex;
											justify-content: space-between;
											padding: 10px 0;
											border-bottom: 1px solid #999;
											font-size: 16px;

											p {
												color: #999;
											}

											text {
												color: #23262E;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.tabs2 {
			background-color: #f5f6fa;
			margin-top: 66px;
			padding-bottom: 20px;

			.itemList {
				padding: 16px;
				display: flex;
				flex-direction: column;

				.item {
					padding: 15px;
					border-radius: 8px;
					background-color: #fff;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					font-family: PingFangSC-Regular;
					font-size: 14px;
					color: #23262E;
					margin-bottom: 16px;

					.headTop {
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-bottom: 10px;

						.leftHead {
							font-size: 16px;
							color: #23262E;
							font-weight: bold;
							display: flex;

							image {
								width: 18px;
								height: 18px;
								margin-right: 7px;
							}
						}

						.rightHead {
							font-size: 16px;
							color: #1677FF;
							display: flex;

							.btn {
								display: flex;
								margin-left: 16px;

								image {
									width: 16px;
									height: 16px;
									margin-right: 8px;
									margin-top: 3px;
								}
							}
						}
					}

					.row {
						width: 19%;
						flex-direction: column;
						display: flex;
					}

					.col {
						margin-bottom: 10px;
						color: #999999;

						text {
							color: #23262E;
						}
					}
				}
			}

		}

		// 右侧抽屉筛选
		/deep/.uni-drawer__content {
			width: 300px;
		}

		.scroll-view {
			/* #ifndef APP-NVUE */
			width: 100%;
			height: 100%;
			/* #endif */
			flex: 1
		}

		// 处理抽屉内容滚动
		.scroll-view-box {
			flex: 1;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 0 16px 80px;

			.drawerTop {
				display: flex;
				margin-top: 24px;
				margin-bottom: 30px;

				image {
					width: 10px;
					height: 14px;
					margin-right: 10px;
					margin-top: 6px;
				}

				text {
					font-size: 20px;
					color: #23262E;
					font-weight: bold;
				}
			}

			.drawerTitle {
				font-size: 14px;
				color: #23262E;
				margin: 8px 0;
			}

			.bottomBtn {
				width: 100%;
				height: 60px;
				display: flex;
				justify-content: space-between;
				padding: 12px 16px;
				background: #FFFFFF;
				box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
				position: fixed;
				bottom: 0px;
				right: 0px;

				.btn {
					width: 116px;
					height: 36px;
					font-size: 16px;
					text-align: center;
					line-height: 36px;
					border-radius: 4px;
				}

				.czBtn {
					color: #0067CF;
					border: 1px solid #0067CF;
				}

				.qrBtn {
					color: #fff;
					background: #0067CF;
				}
			}
		}
		.sortBox {
			height: 36px;
			display: flex;
			align-items: center;
			padding: 0px 8px;
            margin-top: 10px;
			position: relative;
			.title {
				margin-left: 17px;
				font-size: 16px;
                color: #0D518B;
			}
			.combox {
			 position: absolute;	
             right: 8px;
			}
		}
	}
</style>