<template>
	<view class="app">
		<head-info :navIndex="0"></head-info>
		<view class="container">
			<view class="content">
				<view class="form">
					<view class="end">
						<!-- <superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
							placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox> -->
						<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
							placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"
							@input="shipInput"></superwei-combox>
						<button class="btn" @click="onSearch">搜索</button>
					</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>
					</view>
				</view>
				<view class="itemList">
					<template v-if="itemList.length > 0">
						<view v-for="(item, index) in itemList" :key="index" class="item">
							<view @click="toDetails(item)">
								<view class="title">
									<view class="titleft">
										<image src="../../static/images/ship.png" mode="widthFix"></image>
										<view class="name">
											{{item.spmIdDesc}}
										</view>
									</view>
									<view class="status">
										<p v-if="item.vvyStatus==0" class="dfs">{{item.vvyStatusName}}</p>
										<p v-if="item.vvyStatus==1" class="zyz">{{item.vvyStatusName}}</p>
										<p v-if="item.vvyStatus==2" class="ywc">{{item.vvyStatusName}}</p>
									</view>
								</view>
								<view class="row">
									<view class="nitem">
										航次: <text>{{item.vvyName}}</text>
									</view>
									<view class="nitem">
										贸易类型: <text>{{item.tradeType}}</text>
									</view>
								</view>
								<view class="row">
									<view class="nitem">
										进出口: <text>{{item.importExportFlag}}</text>
									</view>
									<view class="nitem">
										泊位: <text>{{item.actualBerthageDesc}}</text>
									</view>
								</view>
							</view>
						</view>
						<template v-if="isMore">
							<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
						</template>
					</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> -->
			</view>
		</view>
		<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>
							<view class="drawerTitle">
								贸易类型
							</view>
							<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
							placeholder="贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
							<view class="drawerTitle">
								计划状态
							</view>
							<superwei-combox :candidates="dcList" :isJSON="true" keyName="name" placeholder="计划状态"
								v-model="vvyStatus"></superwei-combox>
						<view class="drawerTitle">
							计划靠泊时间
						</view>
						<view class="timeBox">
                            <view class="time" :class="[oneFlag ? 'check' : '']" @click="goTime(0)">今天</view>
                            <view class="time" :class="[twoFlag ? 'check' : '']" style="margin: 0 10px;" @click="goTime(1)">近三天</view>
                            <view class="time" :class="[threeFlag ? 'check' : '']" @click="goTime(2)">近五天</view>
						</view>
						<uni-datetime-picker v-model="operationDate" type="daterange" :clear-icon="false" @change="changeLog"
						:border="false" />
						<view class="bottomBtn">
							<view class="btn czBtn" @click="reset">
								重置
							</view>
							<view class="btn qrBtn" @click="confirm">
								确认
							</view>
						</view>
					</scroll-view>
				</view>
		</uni-drawer>
	</view>
</template>

<script>
	import HeadInfo from '@/components/head-info/head-info';
	import api from "../../common/api.js"
	import { downloadPackage } from '../../upDate.js'
	export default {
		data() {
			return {
				loginObj: {},
				itemList: [],
				tradeName: "外贸",
				tradeType: "W",
				tradeItem: {},
				tradeList: [{
						value: "1",
						name: "外贸"
					},
					{
						value: "2",
						name: "内贸"
					}
				],
				vvyShip: "",
				vvyId: "",
				shipId: "",
				shipName: '',
				shipValue: "",
				shipList: [],

				// 分页
				total: 0,
				pageSize: 12,
				current: 1,

				// 港区信息
				portObj: {},

				isMore: false,
				dcList:[
					{
						value: "0",
						name: "未开始"
					},
					{
						value: "1",
						name: "作业中"
					},
					{
						value: "2",
						name: "已完成"
					},
				],
				vvyStatus:'未开始',
				operationDate:'',
				startDate:'',
				endDate:'',
				oneFlag:false,
				twoFlag:false,
				threeFlag:false
			}
		},
		components: {
			HeadInfo,
		},
		onReachBottom() {
			this.current++
			this.initData()
			this.isMore = true
		},
		onLoad() {
			this.portObj = uni.getStorageSync('portObj')
			this.loginObj = uni.getStorageSync('loginObj')
			this.getShip()
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				return true;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		mounted() {
			downloadPackage()
			this.initData()
		},
		methods: {
			// 切换贸易类型
			tradeSelect(e) {
				this.tradeItem = e
				this.tradeName = e.name
				this.shipId = ""
				this.shipName = ""
				this.vvyId = ""
				this.vvyShip = ""
				this.getShip()
			},
			// 选择船
			shipSelect(e) {
				this.shipId = e.spmId
				this.shipName = e.vslCnname
				this.vvyId = e.vvyId
				this.vvyShip = e.vvyShip
				this.getShip()
			},
			// 选择船输入框
			shipInput(e) {
				this.shipValue = e
				if (e == "") {
					this.vvyId = ""
					this.vvyShip = ""
					this.shipId = ""
					this.shipName = ""
				}
				this.getShip()
			},
			// 获取船舶
			getShip() {
				if (this.tradeName == '外贸') {
					this.tradeType = "W"
				} else {
					this.tradeType = "N"
				}
				let ieType = "E"
				let key = ""
				let spmId = ""
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipValue}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
					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
							this.shipList.forEach(v => {
								let vvyShip = `${v.vslCnname}/${v.vvyName}`
								this.$set(v, "vvyShip", vvyShip)
							})
						}
					}
				})
			},
			// 点击搜索
			onSearch() {
				this.current = 1
				this.itemList = []
				this.initData()
			},
			initData() {
				let url = ""
				var vvyStatusCode = ''
				this.dcList.forEach(item => {
					if(item.name == this.vvyStatus) {
						vvyStatusCode = item.value
					}
				})
				if (this.tradeName == '内贸') {
					url =
						`${this.$local}/api/domestic/load/command/queryLoadVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}&current=${this.current}&vvyStatus=${vvyStatusCode}&startDate=${this.startDate}&endDate=${this.endDate}`
				} else if (this.tradeName == '外贸') {
					if(vvyStatusCode == '') {
						url =
						`${this.$local}/api/shipInstructions/queryStowageVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}&size=${this.pageSize}&current=${this.current}&startDate=${this.startDate}&endDate=${this.endDate}`
					} else {
					url =
						`${this.$local}/api/shipInstructions/queryStowageVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}&size=${this.pageSize}&current=${this.current}&vvyStatus=${vvyStatusCode}&startDate=${this.startDate}&endDate=${this.endDate}`
					}
				}
				uni.request({
					url: url,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.isMore = false
						this.total = res.data.data.total
						this.itemList.push(...res.data.data.records)
					}
				})
			},
			// 点击分页
			changePage(e) {
				this.current = e.current;
				this.initData()
			},
			toDetails(item) {
				let obj = {
					shipInfo: item,
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				if (this.tradeName == '外贸') {
					uni.navigateTo({
						url: '/pages/index/instruct?params=' + params
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/domesticTrade?params=' + params
					})
				}
			},
			// 点击筛选
			screen() {
				this.$refs.showRight.open();
			},
			// 重置
			reset() {
				this.vvyStatus = ''
                this.operationDate = ''
				this.startDate = ''
				this.endDate = ''
				this.oneFlag = false
				this.twoFlag = false
				this.threeFlag = false
			},
			// 筛选确认
			confirm() {
				this.onSearch()
				this.$refs.showRight.close();
			},
			//返回
			back() {
				this.$refs.showRight.close();
			},
			//切换时间
			changeLog(e) {
				 if(e.length) {
					this.oneFlag = false
				    this.twoFlag = false
					this.threeFlag = false
                   this.startDate = `${e[0]} 00:00:00`
                   this.endDate = `${e[1]} 00:00:00`
				 }
			},
			// 选择时间
			goTime(time) {
				switch (time) {
					case 0:
					    this.oneFlag = true
				        this.twoFlag = false
						this.threeFlag = false
						this.startDate = this.getNextDate(new Date(),0)
						this.endDate = this.getNextDate(new Date(),0)
						break;
					case 1:
					    this.oneFlag = false
				        this.twoFlag = true
						this.threeFlag = false
						this.startDate = this.getNextDate(new Date(),-3)
						this.endDate = this.getNextDate(new Date(),0)
						break;
				    case 2:
					    this.oneFlag = false
				        this.twoFlag = false
						this.threeFlag = true
						this.startDate = this.getNextDate(new Date(),-5)
						this.endDate = this.getNextDate(new Date(),0)
						break;
				}
			},
			getNextDate(date, day) {
              var dd = new Date(date);
              dd.setDate(dd.getDate() + day);
              var y = dd.getFullYear();
              var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
              var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
              return y + "-" + m + "-" + d + ' 00:00:00';
            },
		}
	};
</script>

<style lang="less" scoped>
	.content {
		padding: 20px;
		min-height: calc(100vh - 68px - 40px);
		margin-top: 66px;
		margin-bottom: 20px;

		.form {
			width: 100%;
			height: 50px;
			background: #f5f6fa;
			display: flex;
			position: fixed;
			top: 66px;
			right: 0;
			z-index: 995;
			padding-left: 20px;

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

				.input {
					width: 200px;
					height: 35px;
					line-height: 35px;
					padding-left: 10px;
					margin: 10px 15px 0 0;
				}

				.btn {
					height: 35px;
					line-height: 35px;
					margin-left: 0;
					font-size: 16px;
					color: #fff;
					background-color: #0067CF;
					margin-right: 10px;
					margin-top: 10px;
				}
			}
			.rightInput {
					display: flex;
					align-items: center;

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

		.itemList {
			width: 100%;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			position: relative;
			margin-top: 40px;
			padding-bottom: 50px;

			/deep/.o-empty {
				width: 100%;
			}

			.item {
				width: calc(33.3% - 16px);
				background-color: #fff;
				border-radius: 8px;
				padding: 16px;
				position: relative;
				margin-bottom: 16px;
				margin-right: 16px;

				.title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24px;

					.titleft {
						display: flex;
					}

					image {
						width: 32px;
						height: 32px;
						margin-right: 12px;
					}

					.name {
						margin-top: 5px;
						font-size: 16px;
						color: #23262E;
						font-weight: bold;
					}
				}

				.row {
					display: flex;
					justify-content: space-between;
					font-size: 16px;
					margin-bottom: 12px;

					.nitem {
						width: 49%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #999;

						text {
							color: #23262e;
						}
					}
				}

				.status {
					font-size: 16px;
					position: absolute;
					right: 0;
					top: 23px;

					p {
						padding: 5px;
						border-radius: 13px 0 0 13px;
					}

					.dfs {
						color: #0067CF;
						background: #F1F8FF;
					}

					.zyz {
						color: #04B578;
						background: #E8FFF7;
					}

					.ywc {
						color: #666666;
						background: #F7F7F7;
					}
				}
			}

			.item:nth-child(3n) {
				margin-right: 0;
			}
		}

		.pageBox {
			width: 100%;
			height: 50px;
			background-color: #fff;
			margin-top: 20px;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
		// 右侧抽屉筛选
		/deep/.uni-drawer__content {
	width: 320px;
	}
	.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;
				}
			}
			.timeBox {
				display: flex;
				.time {
					padding: 9px 24px;
					border: 1px solid #EEEEEE;
                    border-radius: 4px;
				}
				.check {
					background: rgba(114, 132, 245, 0.1);
					color: #0267CF;
				}
			}
		}
</style>