<template>
	<view class="brandDetails">
		<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
		<view class="container contentFixed">
			<view class="topBox">
				<view class="leftInput">
					<uni-easyinput suffixIcon="search" v-model="searchValue" placeholder="品牌/提单号"
						@iconClick="iconClick"></uni-easyinput>
				</view>
				<text @click="screen">筛选</text>
			</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>
						<view class="selectBox">
							<view class="boxContent" v-for="(item,index) in modelList" :key="index"
								:class="{active:activeIndex == index}" @click="clickModel(item,index)">
								{{item.text}}
							</view>
						</view>
						<view class="drawerTitle">
							品牌
						</view>
						<superwei-combox :candidates="brdList" :isJSON="true" keyName="text" placeholder="请选择品牌"
							v-model="brdName" @select="brdSelect"></superwei-combox>
						<view class="drawerTitle">
							车型
						</view>
						<superwei-combox :candidates="bvmList" :isJSON="true" keyName="text" placeholder="请选择车型"
							v-model="bvmName" @select="bvmSelect"></superwei-combox>
						<view class="drawerTitle">
							港口
						</view>
						<superwei-combox :candidates="potList" :isJSON="true" keyName="text" placeholder="请选择车型"
							v-model="potName" @select="potSelect"></superwei-combox>
						<view class="drawerTitle">
							重量
						</view>
						<view class="qjBox">
							<uni-easyinput v-model="minTon" class="input" type="number"></uni-easyinput>
							<text>吨</text>
							<text> - </text>
							<uni-easyinput v-model="maxTon" class="input" type="number"></uni-easyinput>
							<text>吨</text>
						</view>
						<view class="drawerTitle">
							宽
						</view>
						<view class="qjBox">
							<uni-easyinput v-model="minWidth" class="input" type="number"></uni-easyinput>
							<text>m</text>
							<text> - </text>
							<uni-easyinput v-model="maxWidth" class="input" type="number"></uni-easyinput>
							<text>m</text>
						</view>
						<view class="drawerTitle">
							高
						</view>
						<view class="qjBox">
							<uni-easyinput v-model="minHeight" class="input" type="number"></uni-easyinput>
							<text>m</text>
							<text> - </text>
							<uni-easyinput v-model="maxHeight" class="input" type="number"></uni-easyinput>
							<text>m</text>
						</view>
						<view class="bottomBtn">
							<view class="btn czBtn" @click="reset">
								重置
							</view>
							<view class="btn qrBtn" @click="confirm">
								确认
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
			<template v-if=" listInfo.length> 0">
				<view class="ul">
					<view class="li" v-for="(item,index) in listInfo" :key="index" @click="togoCar(item)">
						<view class="liTitle">
							<image class="titleImg" src="../../static/images/zlIcon.png" mode="widthFix">
							</image>
							<p>品牌：{{item.brdName}}</p>
						</view>
						<view class="liContent">
							<p>提单号：{{item.mnfBl}}</p>
							<p>源类型：{{item.sourceType}}</p>
							<p>场位：{{item.yardPos}}</p>
							<p>数量：{{item.amount}}</p>
							<p>航次：{{item.vvyName}}</p>
							<p>港口：{{item.potName}}</p>
							<p>报关状态：{{item.customsDeclareStatus}}</p>
							<p>车型：{{item.bvmName}}</p>
							<p>报关单号：{{item.customsDeclareNo}}</p>
							<p>车型明细：{{item.bvdName}}</p>
							<p>货代：{{item.agentName}}</p>
						</view>
					</view>
				</view>
				<view class="pageBox" v-if="total > 0">
					<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
						@change="changePage" />
				</view>
			</template>
			<o-empty v-else height="70vh" bg="#fff" />
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	import api from "../../common/api.js"
	export default {
		data() {
			return {
				title: "船名 - 品牌明细",
				searchValue: "",
				listInfo: [],
				allList: [],
				vtpId: "",

				// 抽屉内容
				// 型号
				modelId: "",
				modelName: "",
				modelList: [],
				activeIndex: -1,
				// 品牌
				brdId: "",
				brdName: "",
				brdList: [],
				// 车型
				bvmId: "",
				bvmName: "",
				bvmList: [],
				// 港口
				potId: "",
				potName: "",
				potList: [],
				// 最小吨
				minTon: "",
				// 最大吨
				maxTon: "",
				// 最小宽度
				minWidth: "",
				// 最大宽度
				maxWidth: "",
				// 最小高度
				minHeight: "",
				// 最大高度
				maxHeight: "",

				// 分页
				total: 0,
				pageSize: 3,
				current: 1,
			}
		},
		mounted() {
			let title = uni.getStorageSync('shipWorkTitle')
			this.title = `${title} / 品牌明细 `
			this.vtpId = uni.getStorageSync('vtpId')
			this.executeSql1('shipmentShipLoadPlansRespList')
			this.executeSql1('shipInfoTable')
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName}  WHERE vtpId = '${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					if (tableName == "shipInfoTable") {
						this.shipInfo = value[0]
					} else {
						console.log(value)
						this.allList = value
						this.total = value.length
						let newArr = this.getMapping(value, this.pageSize)
						this.listInfo = newArr[this.current - 1];
						this.listInfo.forEach(v => {
							if (v.brdName == "null") {
								this.$set(v, "brdName", "-")
							}
							if (v.mnfBl == "null") {
								this.$set(v, "mnfBl", "-")
							}
							if (v.sourceType == "null") {
								this.$set(v, "sourceType", "-")
							}
							if (v.yardPos == "null") {
								this.$set(v, "yardPos", "-")
							}
							if (v.vvyName == "null") {
								this.$set(v, "vvyName", "-")
							}
							if (v.customsDeclareStatus == "null") {
								this.$set(v, "customsDeclareStatus", "-")
							}
							if (v.bvmName == "null") {
								this.$set(v, "bvmName", "-")
							}
							if (v.amount == "null") {
								this.$set(v, "amount", "-")
							}
							if (v.potName == "null") {
								this.$set(v, "potName", "-")
							}
							if (v.customsDeclareNo == "null") {
								this.$set(v, "customsDeclareNo", "-")
							}
							if (v.bvdName == "null") {
								this.$set(v, "bvdName", "-")
							}
							if (v.agentName == "null") {
								this.$set(v, "agentName", "-")
							}
						})
						this.allList.forEach(v => {
							// 型号
							if (v.model != "null") {
								this.modelList.push({
									id: v.model,
									text: v.model
								})
							}
							// 品牌
							if (v.brdId != "null" && v.brdName != "null") {
								this.brdList.push({
									id: v.brdId,
									text: v.brdName
								})
							}
							// 车型
							if (v.bvmId != "null" && v.bvmName != "null") {
								this.bvmList.push({
									id: v.bvmId,
									text: v.bvmName
								})
							}
							// 港口
							if (v.potId != "null" && v.potName != "null") {
								this.potList.push({
									id: v.potId,
									text: v.potName
								})
							}
						})
						this.modelList = api.arrFrom(this.modelList, "text")
						this.brdList = api.arrFrom(this.brdList, "text")
						this.bvmList = api.arrFrom(this.bvmList, "text")
						this.potList = api.arrFrom(this.potList, "text")
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 分页切割数组(数组，分割个数)
			getMapping(list, num) {
				let len = list.length
				let newList = []
				if (len) {
					var chunk = num
					for (var i = 0, j = len; i < j; i += chunk) {
						newList.push(list.slice(i, i + chunk))
					}
				}
				return newList
			},
			changePage(e) {
				this.current = e.current;
				this.executeSql1('shipmentShipLoadPlansRespList')
			},
			// 点击搜索右侧图标
			iconClick() {
				if (this.searchValue != "") {
					let listIndexArr = []
					let newArr = []
					this.allList.forEach((v, index) => {
						if (v.brdName.indexOf(this.searchValue) != -1 || v.mnfBl.indexOf(this.searchValue) != -1) {
							listIndexArr.push(index)
						}
					})
					if (listIndexArr.length > 0) {
						listIndexArr.forEach((v, index) => {
							newArr.push(this.allList[v])
						})
						this.listInfo = newArr
					} else {
						this.listInfo = []
					}
				} else {
					this.executeSql1('shipmentShipLoadPlansRespList')
				}
			},
			// 点击筛选
			screen() {
				this.$refs.showRight.open();
			},
			// 返回
			back() {
				this.$refs.showRight.close();
			},
			// 点击型号
			clickModel(item, index) {
				this.activeIndex = index
			},
			// 品牌下拉
			brdSelect(e) {
				this.brdId = e.id
				this.brdName = e.text
			},
			// 车型下拉
			bvmSelect(e) {
				this.bvmId = e.id
				this.bvmName = e.text
			},
			// 港口下拉
			potSelect(e) {
				this.potId = e.id
				this.potName = e.text
			},
			// 重置
			reset() {
				this.modelId = ""
				this.modelName = ""
				this.activeIndex = -1
				this.brdId = ""
				this.brdName = ""
				this.bvmId = ""
				this.bvmName = ""
				this.potId = ""
				this.potName = ""
				this.minTon = ""
				this.maxTon = ""
				this.minWidth = ""
				this.maxWidth = ""
				this.minHeight = ""
				this.maxHeight = ""
			},
			// 确认
			confirm() {
				this.$refs.showRight.close();
			},
			// 跳转车型明细
			togoCar(item) {
				let obj = {
					id: item.webId,
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: `/pages/shipWork/carDetails?params=${params}`
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.brandDetails {
		.container {
			padding-bottom: 30px;
			background-color: #F6F7F9;

			.topBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				background: #FAFAFA;
				border-top: 1px solid #EEEEEE;
				border-bottom: 1px solid #EEEEEE;
				padding: 5px 10px;

				.leftInput {
					width: 400px;
				}

				/deep/.uni-easyinput {
					width: 400px;

					/deep/.content-clear-icon {
						padding-right: 16px;
					}
				}

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

				text {
					margin-right: 10px;
					color: #2979ff;
					line-height: 36px;
				}
			}

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

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

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

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

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

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

					.boxContent {
						width: 76px;
						height: 32px;
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						border-radius: 4px;
						border: 1px solid #EEEEEE;
						color: #23262E;
						line-height: 14px;
						margin-right: 10px;
						margin-bottom: 18px;
					}

					.active {
						background-color: rgba(0, 103, 207, .05);
						color: #0267CF;
					}
				}

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

					/deep/.uni-easyinput {
						width: 96px;
						flex: none;
					}

					/deep/.uni-easyinput__content {
						width: 96px;
					}

					text {
						line-height: 35px;
					}
				}

				.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;
					}
				}
			}

			.ul {
				padding: 16px;

				.li {
					background-color: #fff;
					padding: 16px;
					border-radius: 8px;

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

						.titleImg {
							width: 18px;
							height: 18px;
							margin-right: 5px;
							margin-top: 2px;
						}
					}

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

						p {
							width: 22%;
							margin: 10px;
							color: rgba(0, 0, 0, .5);
						}
					}
				}
			}
		}
	}
</style>