<template>
	<view class="app">
		<head-view title="装船指令"></head-view>
		<view class="content contentFixed">
			<custom-tabs type="c1" :value="tabsValue" @change="changeTabs">
				<custom-tab-pane label="总指令" name="c1_1">
					<view></view>
					<view class="main">
						<view class="form">
							<view class="inputBox">
								<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
									placeholder="船名/航次/提单号" @iconClick="search"></uni-easyinput>
								<superwei-combox class="input" :candidates="brandList" :isJSON="true" keyName="brdName"
									placeholder="品牌" v-model="brdName" @select="brandSelect"></superwei-combox>
								<superwei-combox class="input" :candidates="bvmList" :isJSON="true" keyName="name"
									placeholder="车型" v-model="bvmName" @select="bvmSelect"></superwei-combox>
								<superwei-combox class="input" :candidates="potList" :isJSON="true" keyName="potCnname"
									placeholder="港口" v-model="potName" @select="potSelect"></superwei-combox>
							</view>
						</view>
						<view class="buttonlist">
							<button class="button" type="default" @click="distribute('center','all')">指令下发</button>
							<button class="button" type="default" @click="ask">装船要求</button>
						</view>
						<template v-if="itemList.length > 0">
							<view class="itemList">
								<view class="exp" v-for="(item,index) in itemList" :key="item.index">
									<view class="item">
										<view class="row">
											<view class="title">
												<image class="titleImg" src="../../static/images/zlIcon.png"
													mode="widthFix">
												</image>
												<view class="text">
													目的港:{{item.destPortDesc}}
												</view>
											</view>
											<view class="schedule">
												<text class="text">装船进度</text>
												<view class="progressBox">
													<van-progress color="#0067CF" stroke-width="6px" :show-pivot="false"
														track-color="#DEE9F5"
														:percentage="itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)" />
												</view>
												<text>{{itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)}}%</text>
											</view>
											<view class="planStatus planStatus0" v-if="item.totalPlanStatus == 0">
												<text class="text">{{item.totalPlanStatusDesc}}</text>
											</view>
											<view class="planStatus planStatus3" v-else-if="item.totalPlanStatus == 3">
												<text class="text">{{item.totalPlanStatusDesc}}</text>
											</view>
											<view class="planStatus planStatus5" v-else-if="item.totalPlanStatus == 5">
												<text class="text">{{item.totalPlanStatusDesc}}</text>
											</view>
											<view class="planStatus planStatus1" v-else>
												<text class="text">{{item.totalPlanStatusDesc}}</text>
											</view>
										</view>
										<view class="row">
											<view class="rowInfo">
												<view class="col">
													<text>车辆数：</text>
													<text>{{item.vehicleCount}}</text>
												</view>
												<view class="col">
													<text>始发港：</text>
													<text>{{item.originPortDesc}}</text>
												</view>
											</view>
											<view class="rowInfo">
												<view class="col">
													<text>负责人：</text>
													<text>{{item.responsiblePerson}}</text>
												</view>
												<view class="col">
													<text>发送时间：</text>
													<text>{{item.totalSendTime}}</text>
												</view>
											</view>
											<view class="rowInfo">
												<view class="col">
													<text>总指令发送人：</text>
													<text>{{item.totalSendUser}}</text>
												</view>
											</view>
										</view>
										<view class="expand" v-if="itemActive != index" @click="isActive(index)">
											展开
										</view>
										<view class="expand" v-else @click="itemActive = '-1'">
											收起
										</view>
									</view>
									<view class="details">
										<view class="itemDetails" v-show="itemActive == index">
											<template v-for="(item2,index2) in item.infoList">
												<view class="detailsBox" :key="index2">
													<view class="title">
														<text>{{item2.mnfBl}}</text>
														<button @click="toDetails(item,item2)">详情</button>
													</view>
													<view class="info">
														<view class="cell">
															<text>中转港：</text>
															<text>{{item2.transitPortName}}</text>
														</view>
														<view class="cell">
															<text>品牌：</text>
															<text>{{item2.brdName}}</text>
														</view>
														<view class="cell">
															<text>车型：</text>
															<text>{{item2.goodsTypeName}}</text>
														</view>
														<view class="cell">
															<text>型号：</text>
															<text>{{item2.bvdName}}</text>
														</view>
													</view>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
						</template>
						<o-empty v-else height="70vh" bg="#f5f6fa" />
					</view>
					<view class="pageBox" v-if="itemList.length > 0">
						<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
							@change="changePage" />
					</view>
				</custom-tab-pane>
				<custom-tab-pane label="分指令" name="c1_2">
					<view></view>
					<view class="main">
						<view class="form">
							<view class="inputBox">
								<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
									placeholder="船名/航次/提单号" @iconClick="search"></uni-easyinput>
								<superwei-combox class="input" :candidates="brandList" :isJSON="true" keyName="brdName"
									placeholder="品牌" v-model="brdName" @select="brandSelect"></superwei-combox>
								<superwei-combox class="input" :candidates="bvmList" :isJSON="true" keyName="bvmName"
									placeholder="车型" v-model="bvmName" @select="bvmSelect"></superwei-combox>
								<superwei-combox class="input" :candidates="potList" :isJSON="true" keyName="potCnname"
									placeholder="港口" v-model="potName" @select="potSelect"></superwei-combox>
							</view>
						</view>
						<view class="buttonlist">
							<button class="button" type="default" @click="distribute('center','solo','')">指令下发</button>
							<button class="button" type="default" @click="ask">装船要求</button>
						</view>
						<custom-tabs type="c2" :value="tabsValue2" @change="changeTabs2">
							<custom-tab-pane label="未发送" name="c2_1">
								<template v-if="itemList.length > 0">
									<checkbox-group @change="checkChange">
										<view class="itemList">
											<view class="exp" v-for="(item,index) in itemList" :key="item.ndex">
												<view class="item">
													<view class="row">
														<view class="title">
															<view class="rowHead">
																<checkbox :value="item.dlcId" :checked="false" />
															</view>
															<image class="titleImg" src="../../static/images/zlIcon.png"
																mode="widthFix">
															</image>
															<view class="text">
																目的港:{{item.destPortDesc}}
															</view>
														</view>
														<view class="schedule">
															<text class="text">装船进度</text>
															<view class="progressBox">
																<van-progress color="#0067CF" stroke-width="6px"
																	:show-pivot="false" track-color="#DEE9F5"
																	:percentage="itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)" />
															</view>
															<text>{{itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)}}%</text>
														</view>
														<view class="planStatus planStatus0"
															v-if="item.branchPlanStatus == 0">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus3"
															v-else-if="item.branchPlanStatus == 2">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus5"
															v-else-if="item.branchPlanStatus == 4">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus1" v-else>
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
													</view>
													<view class="row">
														<view class="rowInfo">
															<view class="col">
																<text>车辆数：</text>
																<text>{{item.vehicleCount}}</text>
															</view>
															<view class="col">
																<text>始发港：</text>
																<text>{{item.originPortDesc}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>负责人：</text>
																<text>{{item.responsiblePerson}}</text>
															</view>
															<view class="col">
																<text>发送时间：</text>
																<text>{{item.totalSendTime}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>总指令发送人：</text>
																<text>{{item.totalSendUser}}</text>
															</view>
														</view>
													</view>
													<view class="xfBtn">
														<view class="btn" @click="distribute('center','solo',item)">指令下发
														</view>
													</view>
													<view class="expand" v-if="itemActive != index"
														@click="isActive(index)">
														展开
													</view>
													<view class="expand" v-else @click="itemActive = '-1'">
														收起
													</view>
												</view>
												<view class="details">
													<view class="itemDetails" v-show="itemActive == index">
														<template v-for="(item2,index2) in item.infoList">
															<view class="detailsBox" :key="index2">
																<view class="title">
																	<text>{{item2.mnfBl}}</text>
																	<button @click="toDetails(item,item2)">详情</button>
																</view>
																<view class="info">
																	<view class="cell">
																		<text>中转港：</text>
																		<text>{{item2.transitPortName}}</text>
																	</view>
																	<view class="cell">
																		<text>品牌：</text>
																		<text>{{item2.brdName}}</text>
																	</view>
																	<view class="cell">
																		<text>车型：</text>
																		<text>{{item2.goodsTypeName}}</text>
																	</view>
																	<view class="cell">
																		<text>型号：</text>
																		<text>{{item2.bvdName}}</text>
																	</view>
																</view>
															</view>
														</template>
													</view>
												</view>
											</view>
										</view>
									</checkbox-group>
								</template>
								<o-empty v-else height="70vh" bg="#f5f6fa" />
							</custom-tab-pane>
							<custom-tab-pane label="已发送" name="c2_2">
								<template v-if="itemList.length > 0">
									<checkbox-group @change="checkChange">
										<view class="itemList">
											<view class="exp" v-for="(item,index) in itemList" :key="item.ndex">
												<view class="item">
													<view class="row">
														<view class="title">
															<view class="rowHead">
																<checkbox :value="item.dlcId" :checked="false" />
															</view>
															<image class="titleImg" src="../../static/images/zlIcon.png"
																mode="widthFix">
															</image>
															<view class="text">
																目的港:{{item.destPortDesc}}
															</view>
														</view>
														<view class="schedule">
															<text class="text">装船进度</text>
															<view class="progressBox">
																<van-progress color="#0067CF" stroke-width="6px"
																	:show-pivot="false" track-color="#DEE9F5"
																	:percentage="itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)" />
															</view>
															<text>{{itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)}}%</text>
														</view>
														<view class="planStatus planStatus0"
															v-if="item.branchPlanStatus == 0">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus3"
															v-else-if="item.branchPlanStatus == 2">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus5"
															v-else-if="item.branchPlanStatus == 4">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus1" v-else>
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
													</view>
													<view class="row">
														<view class="rowInfo">
															<view class="col">
																<text>车辆数：</text>
																<text>{{item.vehicleCount}}</text>
															</view>
															<view class="col">
																<text>始发港：</text>
																<text>{{item.originPortDesc}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>负责人：</text>
																<text>{{item.responsiblePerson}}</text>
															</view>
															<view class="col">
																<text>发送时间：</text>
																<text>{{item.totalSendTime}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>总指令发送人：</text>
																<text>{{item.totalSendUser}}</text>
															</view>
														</view>
													</view>
													<view class="xfBtn">
														<view class="btn stopbtn" @click="suspend(item)"
															v-if="item.branchPlanStatus	!= 4">暂停
														</view>
														<view class="btn stopbtn"
															@click="distribute('center','again',item)"
															v-if="item.branchPlanStatus == 4">重新发送
														</view>
													</view>
													<view class="expand" v-if="itemActive != index"
														@click="isActive(index)">
														展开
													</view>
													<view class="expand" v-else @click="itemActive = '-1'">
														收起
													</view>
												</view>
												<view class="details">
													<view class="itemDetails" v-show="itemActive == index">
														<template v-for="(item2,index2) in item.infoList">
															<view class="detailsBox" :key="index2">
																<view class="title">
																	<text>{{item2.mnfBl}}</text>
																	<button @click="toDetails(item,item2)">详情</button>
																</view>
																<view class="info">
																	<view class="cell">
																		<text>中转港：</text>
																		<text>{{item2.transitPortName}}</text>
																	</view>
																	<view class="cell">
																		<text>品牌：</text>
																		<text>{{item2.brdName}}</text>
																	</view>
																	<view class="cell">
																		<text>车型：</text>
																		<text>{{item2.goodsTypeName}}</text>
																	</view>
																	<view class="cell">
																		<text>型号：</text>
																		<text>{{item2.bvdName}}</text>
																	</view>
																</view>
															</view>
														</template>
													</view>
												</view>
											</view>
										</view>
									</checkbox-group>
								</template>
								<o-empty v-else height="70vh" bg="#f5f6fa" />
							</custom-tab-pane>
						</custom-tabs>
					</view>
					<view class="pageBox" v-if="itemList.length > 0">
						<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
							@change="changePage" />
					</view>
				</custom-tab-pane>
				<custom-tab-pane label="场位图" name="c1_3">
					<view class="main">
						<view>
							<template v-if="placeTabs == 0">
								<view class="field">
									<view class="boxTop">
										<view class="title">
											堆场
										</view>
										<view class="option">
											<uni-data-select v-model="optionValue"
												:localdata="optionList"></uni-data-select>
										</view>
									</view>
									<view class="fpList">
										<view class="fpInfo">
											<view class="fpTitle">
												港建库
											</view>
											<view class="fpListInfo">
												<view class="infoTop">
													<view class="infoTopTitle">A1区（12*12）</view>
													<view class="titleRight" @click="toGoPlace">
														<text>车道</text>
														<view class="titleIcon">
															<van-icon name="arrow" color="#fff" />
														</view>
													</view>
												</view>
												<view class="infoCarNum">
													<text>车位总数：120车位</text>
													<text>使用：40车位</text>
													<text>剩余：40车位</text>
													<text>可停放车辆：300辆</text>
													<text>已停放车辆：300辆</text>
												</view>
												<view class="progressBox">
													<van-progress :percentage="itemSum2(2000)"
														:pivot-text="'1000/' + 2000" />
												</view>
												<view class="carInfoList">
													<view class="carBrand" v-for="item in 4" :key="item">
														<view class="brandTitle">
															保时捷-轿车
														</view>
														<view class="placeInfo">
															400 辆，共5道12车位
														</view>
													</view>
												</view>
											</view>
											<view class="fpListInfo notListInfo">
												<view class="infoTop">
													<view class="infoTopTitle">A1区（12*12）</view>
													<view class="titleRight" @click="toGoPlace">
														<text>车道</text>
														<view class="titleIcon">
															<van-icon name="arrow" color="#fff" />
														</view>
													</view>
												</view>
												<view class="notTitle">
													未分配
												</view>
												<text>车位总数：120车位</text>
												<text>可停放车辆：300辆</text>
											</view>
											<view class="tipInfo">
												未使用2车道20车位
											</view>
										</view>
										<view class="fpInfo">
											<view class="fpTitle">
												海棠库
											</view>
											<view class="fpListInfo notListInfo">
												<view class="infoTop">
													<view class="infoTopTitle">A1区（12*12）</view>
													<view class="titleRight" @click="toGoPlace">
														<text>车道</text>
														<view class="titleIcon">
															<van-icon name="arrow" color="#fff" />
														</view>
													</view>
												</view>
												<view class="notTitle">
													未分配
												</view>
												<text>车位总数：120车位</text>
												<text>可停放车辆：300辆</text>
											</view>
											<view class="fpListInfo">
												<view class="carInfoList">
													<view class="infoTop">
														<view class="infoTopTitle">A1区（12*12）</view>
														<view class="titleRight" @click="toGoPlace">
															<text>车道</text>
															<view class="titleIcon">
																<van-icon name="arrow" color="#fff" />
															</view>
														</view>
													</view>
													<view class="infoCarNum">
														<text>车位总数：120车位</text>
														<text>使用：40车位</text>
														<text>剩余：40车位</text>
														<text>可停放车辆：300辆</text>
														<text>已停放车辆：300辆</text>
													</view>
													<view class="progressBox">
														<van-progress :percentage="itemSum2(2000)"
															:pivot-text="'1000/' + 2000" />
													</view>
												</view>
												<view class="carInfoList">
													<view class="carBrand" v-for="item in 4" :key="item">
														<view class="brandTitle">
															保时捷-轿车
														</view>
														<view class="placeInfo">
															400 辆，共5道12车位
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<place @modifyPlaceTabs="modifyPlaceTabs"></place>
							</template>
						</view>
					</view>
				</custom-tab-pane>
			</custom-tabs>
			<uni-popup ref="popup" type="dialog">
				<view class="popupBox">
					<view class="popupTitle">
						指令下发
					</view>
					<view class="popupInfo">
						<text>负责人：</text>
						<template v-if="tabsValue == 0">
							<view style="border: 1px solid gray;">
								<superwei-combox class="input" :candidates="directorList" :isJSON="true" keyName="text"
									placeholder="请选择负责人" v-model="directorValue"
									@select="directorChange"></superwei-combox>
							</view>
						</template>
						<template v-if="tabsValue == 1">
							<view style="border: 1px solid gray;">
								<rudon-multiSelector welcome="请选择负责人" :is_using_slot="false" :is_using_icon="true"
									:localdata="directorList" @change="directorChange2"></rudon-multiSelector>
							</view>
						</template>
					</view>
					<view class="popupBtn">
						<view class="btnList">
							<button class="button" type="default" @click="zlCancel">取 消</button>
							<button class="button" type="primary" @click="zlConfirm">确 认</button>
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup2" type="dialog">
				<view class="popupBox">
					<view class="popupTitle">
						装船要求
					</view>
					<uni-easyinput type="textarea" v-model="askValue" placeholder="请输入内容..."></uni-easyinput>
					<view class="popupBtn">
						<view class="btnList">
							<button class="button" type="default" @click="zcCancel">取 消</button>
							<button class="button" type="primary" @click="zcConfirm">提 交</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>

</template>

<script>
	import HeadView from '@/components/head-view/head-view.vue';
	import HeadInfo from '@/components/head-info/head-info';
	import place from './place.vue';
	let timers = null;
	export default {
		data() {
			return {
				loginObj: {},
				tabsValue: 0, // 0(总指令) 1(分指令)
				shipInfo: {}, // 船只数据

				tabsValue2: 0, // 分指令状态 0(未发送) 1(已发送)

				// 搜索框
				mnfBl: '', // 提单号
				mnfBlItem: {},
				mnfBlList: [],
				// 品牌
				brdId: '',
				brdName: '',
				brandItem: {},
				brandList: [],
				// 车型
				bvmId: '',
				bvmName: '',
				bvmItem: {},
				bvmList: [],
				// 港口
				potId: "",
				potName: '',
				potItem: {},
				potList: [],
				// 指令下发弹窗负责人
				directorId: "",
				directorValue: "",
				directorTrue: [], // 选中负责人列表
				directorList: [],
				roleId: "", // 角色ID

				// 装船要求
				askValue: "",
				itemList: [],
				current: 0,
				active: 1,
				itemActive: -1,
				// 总指令工作包
				zzlLwpIdList: [],
				// 分指令多选
				checkList: [],
				fzzRow: {},
				// 指令下发状态 all 所有下发 solo 单个下发
				distributeType: "",

				optionValue: "",
				optionList: [{
						value: "0",
						text: "全部堆场"
					},
					{
						alue: "1",
						text: "外六"
					},
					{
						alue: "2",
						text: "港建库"
					},
					{
						alue: "3",
						text: "高东库"
					},
					{
						alue: "4",
						text: "江海库"
					}
				],
				placeTabs: 0,

				// 分页
				total: 0,
				pageSize: 5,
				current: 1,
			}
		},
		computed: {
			itemSum() {
				return function(item, item2) {
					let sum = ((item / item2) * 100).toFixed(2)
					return sum
				};
			},
			itemSum2() {
				return function(item) {
					let sum = 1000 / item * 100
					return sum
				};
			}
		},
		onLoad(options) {
			this.shipInfo = JSON.parse(decodeURIComponent(options.params)).shipInfo
			this.loginObj = uni.getStorageSync('loginObj')
			this.domesticTrade()
			this.getPot() // 获取港口
			this.getBrand() // 获取品牌
			this.getBvm() // 获取车型
			this.getRoleId() // 获取角色ID
			this.initAsk() // 获取装船要求
		},
		components: {
			HeadView,
			HeadInfo,
			place,
		},
		methods: {
			// 点击tabs
			changeTabs(e) {
				this.mnfBl = ''
				this.brdName = ''
				this.bvmName = ''
				this.potName = ''
				this.itemList = []
				this.tabsValue = e.value
				this.domesticTrade()
				this.directorList = []
				this.getRoleId()
			},
			// 点击分指令tabs
			changeTabs2(e) {
				this.tabsValue2 = e.value
				this.itemList = []
				this.domesticTrade()
			},
			// 点击搜索
			search() {
				this.domesticTrade()
			},
			// 点击分页
			changePage() {
				this.current = e.current;
				this.domesticTrade()
			},
			// 获取内贸总指令，分指令列表(true-总指令,false-分指令)
			domesticTrade() {
				let flag = ""
				if (this.tabsValue == 0) {
					flag = true
				} else if (this.tabsValue == 1) {
					flag = false
				}
				uni.request({
					url: `${this.$local}/api/domestic/load/command/page?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&flag=${flag}&sendStatus=${this.tabsValue2}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						console.log(res)
						this.itemList = res.data.data.records
						this.total = this.itemList.length
						this.itemList.forEach((v, index) => {
							if (flag) {
								this.zzlLwpIdList.push(v.dlcId)
							}
							this.getBottomInfo(v.dlcId, index)
						})
					}
				})
			},
			// 获取指令下方信息
			getBottomInfo(id, index) {
				uni.request({
					url: `${this.$local}/api/domestic/load/command/queryLoadPlanGroupForDclId?dlcId=${id}&vvyId=${this.shipInfo.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						console.log(res)
						this.$set(this.itemList[index], 'infoList', res.data.data)
					}
				})
			},
			// 是否展开
			isActive(e) {
				this.itemActive = e
			},
			// 点击指令下发
			distribute(type, a, item) {
				this.distributeType = a
				this.$refs.popup.open(type)
				if (a == 'again' || a == 'solo') {
					this.fzzRow = item
				} else if (a == 'all') {
					this.fzzRow = ""
				}
			},
			// 获取角色ID
			getRoleId() {
				let name = ""
				if (this.tabsValue == 0) {
					name = "dongLei"
				} else if (this.tabsValue == 1) {
					name = "shipmenter"
				}
				uni.request({
					url: `${this.$local}/api/roles?name=${name}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.roleId = res.data.data
							this.getDirector()
						}
					}
				})
			},
			// 根据角色ID获取负责人
			getDirector() {
				uni.request({
					url: `${this.$local}/api/roles/principals?roleId=${this.roleId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.directorList.push({
									text: v.name,
									value: v.id,
									is_selected: false
								})
							})
						}
					}
				})
			},
			// 总指令选择负责人
			directorChange(e) {
				this.directorTrue = [{
					userId: e.value
				}]
				this.directorId = e.value
				this.directorValue = e.text
			},
			// 分指令选择负责人
			directorChange2(e) {
				this.directorTrue = []
				e.forEach(v => {
					if (v.is_selected) {
						this.directorTrue.push({
							userId: v.value
						})
					}
				})
			},
			// 获取装船要求
			initAsk() {
				uni.request({
					url: `${this.$local}/api/vesselVoyages/${this.shipInfo.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.askValue = res.data.data.loadUnloadRequirements
						}
					}
				})
			},
			// 修改装船要求
			getAsk() {
				let reqDto = {
					"loadUnloadRequirements": this.askValue,
					"spmId": this.shipInfo.spmId,
					"vvyId": this.shipInfo.vvyId,
					"vvyName": this.shipInfo.vvyName,
				}
				uni.request({
					url: `${this.$local}/api/vesselVoyages/${this.shipInfo.vvyId}`,
					data: reqDto,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'PUT', //请求方式，必须为大写
					success: (res) => {
						this.initAsk()
					}
				})
			},
			// 指令下发确认
			zlConfirm() {
				if (this.directorTrue.length > 0) {
					let lwpIdList = []
					if (this.tabsValue == 0) {
						lwpIdList = this.zzlLwpIdList
					} else if (this.tabsValue == 1) {
						if (this.fzzRow == "") {
							lwpIdList = this.checkList
						} else {
							lwpIdList = [this.fzzRow.dlcId]
						}
					}
					let reqDTO2 = {
						"dlcIdList": lwpIdList,
						"principalList": this.directorTrue,
						"vvyId": this.shipInfo.vvyId,
					}
					if (this.distributeType == 'all') {
						uni.request({
							url: `${this.$local}/api/domestic/load/command/commandIssued`,
							data: reqDTO2,
							header: {
								'Content-Type': 'application/json', //自定义请求头信息
								'Authorization': `Bearer ${this.loginObj.access_token}`
							},
							method: 'POST', //请求方式，必须为大写
							success: (res) => {
								if (res.data.status == 200) {
									this.domesticTrade()
									uni.showToast({
										title: `总指令下发成功`,
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showToast({
										title: res.data.error_description,
										icon: 'error',
										duration: 2000
									})
								}
							}
						})
					} else if (this.distributeType == 'solo') {
						uni.request({
							url: `${this.$local}/api/domestic/load/command/commandSendForBranch`,
							data: reqDTO2,
							header: {
								'Content-Type': 'application/json', //自定义请求头信息
								'Authorization': `Bearer ${this.loginObj.access_token}`
							},
							method: 'PUT', //请求方式，必须为大写
							success: (res) => {
								if (res.status == 200) {
									this.domesticTrade()
									uni.showToast({
										title: `分指令下发成功`,
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showToast({
										title: `${res.data.error_description}`,
										icon: 'error',
										duration: 2000
									})
								}
							}
						})
					} else if (this.distributeType == 'again') {
						let url = `/api/domestic/load/command/commandReissuedForBranch`
						let lwpIdList3 = []
						lwpIdList3.push(this.fzzRow.dlcId)
						let reqDto3 = {
							"loadUnloadRequirements": this.askValue,
							"dlcIdList": lwpIdList3,
							"principalList": this.directorTrue,
							"vvyId": this.shipInfo.vvyId
						}
						uni.request({
							url: `${this.$local}${url}`,
							data: reqDto3,
							header: {
								'Content-Type': 'application/json', //自定义请求头信息
								'Authorization': `Bearer ${this.loginObj.access_token}`
							},
							method: 'PUT', //请求方式，必须为大写
							success: (res) => {
								if (res.data.status == 200) {
									this.domesticTrade()
									uni.showToast({
										title: `重新发送指令成功`,
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showToast({
										title: `${res.data.error_description}`,
										icon: 'error',
										duration: 2000
									})
								}
							}
						})

					}
					this.$refs.popup.close()
				} else {
					uni.showToast({
						title: `负责人不能为空`,
						icon: 'error',
						duration: 2000
					})
				}
			},
			// 指令下发取消
			zlCancel() {
				this.directorTrue = []
				this.$refs.popup.close()
			},
			// 点击暂停
			suspend(item) {
				let url = `/api/domestic/load/command/commandPause?dlcId=${item.dlcId}`
				uni.request({
					url: `${this.$local}${url}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'PUT', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.domesticTrade()
							uni.showToast({
								title: `暂停指令成功`,
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: `${res.data.error_description}`,
								icon: 'error',
								duration: 2000
							})
						}
					}
				})
			},
			// 点击装船要求
			ask(type) {
				this.$refs.popup2.open(type)
			},
			// 装船要求确认
			zcConfirm() {
				this.getAsk() // 获取装船要求
				this.$refs.popup2.close()
			},
			// 装船要求取消
			zcCancel() {
				this.$refs.popup2.close()
			},
			// 获取品牌
			getBrand() {
				uni.request({
					url: `${this.$local}/api/miniapp/queryBrand`,
					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.brandItem = e
				this.brdId = e.brdId
				this.brdName = e.brdName
				this.domesticTrade()
			},
			// 获取港口
			getPot() {
				uni.request({
					url: `${this.$local}/api/miniapp/port`,
					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.potItem = e
				this.potName = e.potCnname
				this.potId = e.potId
				this.domesticTrade()
			},
			// 获取车型
			getBvm() {
				uni.request({
					url: `${this.$local}/api/miniapp/getVehicleModel`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.bvmList = res.data.data
						}
					}
				})
			},
			// 选择车型
			bvmSelect(e) {
				this.bvmItem = e
				this.bvmId = e.id
				this.bvmName = e.name
				this.domesticTrade()
			},
			toDetails(item, item2) {
				let obj = {
					jcInfo: item,
					xqInfo: item2,
					id: item2.spsId,
					tradeName: "N",
					shipInfo: this.shipInfo,
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: '/pages/index/instructDetails?params=' + params
				})
			},
			// 分指令多选
			checkChange(e) {
				this.checkList = e.detail.value
			},
			// 点击车道
			toGoPlace() {
				this.placeTabs = 1;
			},
			// 子组件修改值
			modifyPlaceTabs(data) {
				this.placeTabs = data;
			},
		}
	};
</script>

<style lang="less">
	.blue {
		color: #108ee9;
	}

	.content {
		background-color: #F6F7F9;

		/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-family: PingFangSC-Semibold;
		}

		/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%;
		}

		.main {
			padding: 0 10px;
			// min-height: 100vh;
		}

		.pageBox {
			margin-top: 20px;
		}

		.form {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;

			.inputBox {
				display: flex;
			}

			.input {
				width: 120px;
				height: 35px;
				line-height: 35px;
				margin-left: 20px;
			}

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

			}
		}

		.buttonlist {
			padding: 10px 0px;

			.button {
				display: inline-block;
				height: 36px;
				line-height: 36px;
				text-align: center;
				margin-right: 10px;
				border-radius: 4px;
			}

			button:first-child {
				border: 1px solid #0067CF;
				color: #0067CF;
				background: #fff;
			}

			button:last-child {
				color: #fff;
				background: #0067CF;
			}
		}

		.tablist {
			width: 175px;
			height: 60px;
			line-height: 60px;
			font-size: 21px;
			display: flex;
			justify-content: space-between;

			.tabs {
				width: 80px;
				height: 60px;
				border-bottom: 2rpx solid #ebebeb;
			}

			.active {
				color: #1890ff;
				border-bottom: 2rpx solid #1890ff;
			}

		}

		.itemList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.exp {
				width: 100%;
				// width: 49.5%;
				margin-bottom: 15px;
				background: #FFFFFF;
				border-radius: 8px;
				padding: 16px;
				padding-right: 0;
				position: relative;

				.rowHead {
					/deep/uni-checkbox .uni-checkbox-input {
						width: 16px !important;
						height: 16px !important;
					}
				}

				.row {
					display: flex;

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

						.titleImg {
							width: 18px;
							height: 18px;
							margin-right: 10px;
						}
					}

					.schedule {
						padding: 5px 8px;
						background: #F7F7F7;
						margin-left: 16px;
						display: flex;

						.text {
							font-size: 12px;
							color: #999999;
						}

						.progressBox {
							width: 100px;
							margin-top: 5px;
							margin: 5px 8px;
						}
					}

					.planStatus {
						width: 68px;
						height: 26px;
						border-radius: 13px 0 0 13px;
						position: absolute;
						right: 0;
						top: 16px;
						text-align: center;
						line-height: 26px;

						.text {
							font-size: 16px;
							font-weight: bold;
						}
					}

					.planStatus0 {
						background: #F1F8FF;

						.text {
							color: #0067CF;
						}
					}

					.planStatus1 {
						background: #F7F7F7;

						.text {
							color: #666;
						}
					}

					.planStatus3 {
						background: #E8FFF7;

						.text {
							color: #04B578;
						}
					}

					.planStatus5 {
						background: #FFF5F0;

						.text {
							color: #fc4f00;
						}
					}


					.rowInfo {
						display: flex;
						flex-direction: column;
						font-size: 14px;
						width: 48%;
						margin-right: 1%;
						margin-top: 10px;
						border-right: 1px solid #eee;

						.col:first-child {
							margin-bottom: 12px;
						}

						text:first-child {
							color: #999999;
						}

						text:last-child {
							color: #23262E;
						}
					}

					.rowInfo:last-child {
						border: none;
					}
				}

				.xfBtn {
					display: flex;
					justify-content: flex-end;
					padding: 10px 0;
					border-top: 1px solid rgba(0, 0, 0, .1);
					border-bottom: 1px solid rgba(0, 0, 0, .1);
					margin-top: 10px;

					.btn {
						padding: 8px 12px;
						text-align: center;
						color: #fff;
						background: #0067CF;
						border-radius: 4px;
						font-size: 12px;
						margin-right: 28px;
					}

					.stopbtn {
						border: 1px solid #FC4F00;
						color: #FC4F00;
						background-color: #fff;
					}
				}

				.expand {
					position: absolute;
					left: 47%;
					bottom: -10px;
					font-size: 12px;
					color: #23262E;
					background: #FFFFFF;
					text-align: center;
					line-height: 14px;
					border: 1px solid #EEEEEE;
					border-radius: 13px;
					padding: 6px;
				}

				.details {
					padding-right: 16px;
					margin-top: 16px;

					.itemDetails {
						background: rgba(236, 242, 249, .7);

						.detailsBox {
							padding: 16px;
							border-bottom: 1px dashed #D3DCE6;
						}

						.title {
							width: 100%;
							display: flex;
							justify-content: space-between;

							text {
								font-size: 16px;
								color: #23262E;
								margin-top: 2px;
							}

							button {
								wdith: 50px;
								height: 25px;
								text-align: center;
								line-height: 25px;
								color: #0067CF;
								background: #FFFFFF;
								border: 1px solid #EEEEEE;
								border-radius: 4px;
								font-size: 14px;
								margin: 0;
							}
						}

						.info {
							display: flex;
							flex-wrap: wrap;

							.cell {
								margin-right: 15px;
								margin-top: 10px;

								text:first-child {
									color: #999999;
								}

								text:last-child {
									color: #23262E;
								}
							}
						}
					}
				}

			}
		}


		.field {
			padding: 20px;
			background-color: #000;

			.boxTop {
				display: flex;

				.title {
					margin-right: 20px;
					font-size: 18px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #fff;
				}

				.option {
					width: 200px;
				}
			}

			.carTabs {
				width: 100%;
				background-color: #fff;
				margin-top: 20px;
				border-radius: 8px;

				/deep/.tab {
					border-radius: 8px !important;
				}

				.carList {
					display: flex;
					justify-content: space-around;
					padding: 20px;

					.carInfo {
						width: 19%;
						padding: 20px;
						background-color: #ccc;
						text-align: center;
						border-radius: 6px;
					}
				}

				.partsList {
					width: 100%;
					display: flex;
					justify-content: space-around;
					padding: 20px;

					.partsInfo {
						width: 19%;
						padding: 20px;
						background-color: #ccc;
						text-align: center;
						border-radius: 6px;
					}
				}
			}

			.infoTitle {
				font-size: 16px;
				color: #666;
			}

			.infoNum {
				font-size: 28px;
			}

			.fpList {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;

				.fpInfo {
					width: 49%;

				}

				.fpTitle {
					text-align: center;
					background: #262626;
					padding: 10px;
					color: #fff;
				}

				.fpListInfo {
					padding: 20px 10px;
					background: #262626;
					color: #fff;
					margin-top: 10px;

					.infoTop {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.infoTopTitle {
							font-size: 18px;
							font-weight: bold;
							padding-left: 10px;
							border-left: 5px solid #0079FE;
						}

						.titleRight {
							display: flex;

							.titleIcon {
								width: 16px;
								height: 16px;
								background: #0079FE;
								margin-left: 5px;
								line-height: 16px;
								text-align: center;
								border-radius: 50%;
								margin-top: 5px;

								/deep/.van-icon {
									transform: scale(0.8);
									margin-left: 2px;
								}
							}

							text {
								color: #0079FE;
								margin-top: 2px;
							}
						}
					}

					.infoCarNum {
						display: flex;
						flex-wrap: wrap;
						margin-top: 10px;

						text {
							margin: 10px 20px;
						}
					}

					.progressBox {
						width: 100%;
					}

					.carInfoList {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.carBrand {
							width: 32%;
							background-color: #2C2D2D;
							padding: 10px;
							margin-bottom: 10px;

							.brandTitle {
								color: #0079FE;
								margin-bottom: 10px;
							}
						}
					}
				}

				.notListInfo {
					.notTitle {
						font-size: 22px;
						font-weight: bold;
						text-align: center;
						margin: 30px 0;
					}

					.infoTop {
						text {
							margin-right: 0;
						}
					}

					text {
						margin-right: 30px;
					}
				}

				.tipInfo {
					width: 100%;
					font-size: 24px;
					color: #5FE515;
					font-weight: bold;
					padding: 20px 0;
					text-align: center;
					background: #fff;
					margin-top: 10px;
				}
			}
		}

		.popupBox {
			width: 500px;
			background-color: #fff;
			padding: 30px;

			.popupTitle {
				font-size: 20px;
				font-weight: bold;
				border-bottom: 1px solid #ccc;
				padding-bottom: 20px;
			}

			.popupInfo {
				display: flex;
				margin-top: 20px;
				line-height: 35px;
				padding: 30px 0;

				/deep/.superwei-combox {
					border: none;
					padding: 0;
				}

				/deep/.componentW100 {
					width: 300px;
				}

				/deep/.uni-icons {
					margin-right: 12px;
				}
			}

			/deep/.uni-easyinput {
				margin-top: 20px;
			}

			/deep/.uni-select__input-placeholder {
				text-align: left;
			}

			/deep/.uni-select__input-text {
				text-align: left;
			}

			.popupBtn {
				margin-top: 20px;
				padding-top: 20px;
				border-top: 1px solid #ccc;
				display: flex;
				justify-content: flex-end;

				.btnList {
					display: flex;

					.button {
						margin-left: 10px;
					}
				}

			}
		}
	}
</style>