<template>
	<view class="app">
		<head-info :navIndex="3"></head-info>
		<view class="container">
			<view class="content">
				<view class="form">
					<button type="primary" class="button" @click="modify('add','')">
						<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>新增
					</button>
					<view class="right">
						<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="vslCnname"
							placeholder="请选择船名" v-model="shipValue" @select="shipChange"></superwei-combox>
						<superwei-combox class="select" :candidates="brandList" :isJSON="true" keyName="brdName"
							placeholder="请选择品牌" v-model="brandValue" @select="brandChange"></superwei-combox>
					</view>

				</view>
				<view class="itemList">
					<template v-if="itemList.length > 0">
						<view class="item" v-for="(item,index) in itemList" :key="index" @click="details(item)">
							<view class="row">
								<view class="col weight">
									{{item.vinCode}}
								</view>
								<view class="col">
									品牌：{{item.brdName}}
								</view>
								<view class="col">
									货物状态：{{item.godStatusName}}
								</view>
							</view>
							<view class="row">
								<view class="col">
									航次/船名：{{item.spmIdAndVvyId}}
								</view>
								<view class="col">
									车型：{{item.bvmName}}
								</view>
								<view class="col">
									场位：{{item.pos}}
								</view>
							</view>
							<view class="row">
								<view class="col">
									作业时间：{{item.workTime}}
								</view>
								<view class="col">
									作业人：{{item.qdLiablePerson}}
								</view>
								<view class="col">
									质损发生环节：{{item.qdLinkName}}
								</view>
							</view>
							<view class="row">
								<view class="col">
									质损概况：{{item.damageSituationName}}
								</view>
								<view class="col">
									处置情况：{{item.disposalSituationName}}
								</view>
							</view>
							<view class="rowFoot">
								<view class="col" @click.stop="modify('edit',item)">
									编辑
								</view>
								<view class="col" @click.stop="del(item)">
									删除
								</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>
				<uni-popup ref="popup" type="dialog">
					<uni-popup-dialog confirmText="确定" content="是否退出登录？" @confirm="delConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>

</template>

<script>
	import HeadInfo from '@/components/head-info/head-info';
	export default {
		data() {
			return {
				loginObj: {},
				// 查询值
				queryValue: '',
				// 品牌下拉
				brandId: "",
				brandValue: "",
				brandList: [],
				// 列表数据
				itemList: [],
				// 分页
				total: 0,
				pageSize: 10,
				current: 1,
				// 当前行数据
				rowInfo: {},

				// 港区信息
				portObj: {},

				// 船名下拉
				shipList: [],
				shipId: "",
				shipValue: "",
				vvyId: "",
			}
		},
		onLoad() {
			this.loginObj = uni.getStorageSync('loginObj')
			this.portObj = uni.getStorageSync('portObj')
			uni.setStorageSync('signObj', "")
			this.initData()
			this.getBrand()
			this.getShip()
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				return true;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		components: {
			HeadInfo
		},
		methods: {
			// 获取列表数据
			initData() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/page?current=${this.current}&page=${this.pageSize}&brdId=${this.brandId}&vvyId=${this.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						console.log('接口返回------', res);
						if (res.statusCode == 200) {
							this.itemList = res.data.data.records
							this.total = res.data.data.total
						}
					}
				})
			},
			// 获取船名
			getShip() {
				let ieType = ""
				let key = ""
				let pamId = this.portObj.portId
				let spmId = ""
				let tradeType = ""
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${tradeType}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							console.log(res)
							this.shipList = res.data.data
						}
					}
				})
			},
			// 船名/航次
			shipChange(e) {
				this.shipId = e.vslCd
				this.shipValue = e.vslCnname
				this.vvyId = e.vvyId
				this.current = 1
				this.initData()
			},
			// 获取品牌
			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.statusCode == 200) {
							this.brandList = res.data.data
						}
					}
				})
			},
			// 品牌下拉选择
			brandChange(e) {
				this.brandId = e.brdId
				this.brandValue = e.brdName
				this.current = 1
				this.initData()
			},
			// 点击新增/编辑
			modify(type, item) {
				let obj = {
					type: type,
					ygqId: item.ygqId
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: `/pages/quality/edit?params=${params}`
				})
			},
			// 点击详情
			details(item) {
				let obj = {
					ygqId: item.ygqId
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: `/pages/quality/details?params=${params}`

				})
			},
			// 点击删除
			del(item) {
				this.$refs.popup.open()
				this.rowInfo = item
			},
			// 删除确认
			delConfirm() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/delQuality/${this.rowInfo.ygqId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'DELETE', //请求方式，必须为大写
					success: (res) => {
						console.log('接口返回------', res);
						if (res.statusCode == 200) {
							uni.showToast({
								icon: 'success',
								title: '删除成功'
							});
							this.initData()
						} else {
							uni.showToast({
								icon: 'error',
								title: `${res.data.error_description}`
							});
							this.initData()

						}
					}
				})
			},
			// 点击分页
			changePage(e) {
				this.current = e.current;
				this.initData()
			},
		}
	};
</script>

<style lang="less" scoped>
	.container {
		display: flex;
	}

	.content {
		flex: 1;
		padding: 20px;

		.form {
			display: flex;
			justify-content: space-between;
			height: 40px;
			line-height: 40px;

			.button {
				width: 90px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				margin: 0;
			}

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

				.select {
					width: 130px;
					height: 35px;
					margin-left: 20px;
				}

				/deep/.is-input-border {
					height: 35px;
				}
			}
		}

		.itemList {
			margin-top: 30px;

			.item {
				padding: 20px 0;
				border-bottom: 2px solid #e9e9e9;
				display: flex;
				justify-content: space-between;

				.weight {
					font-weight: 900;
				}

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

				.col {
					margin-bottom: 10px;
				}

				.rowFoot {
					width: 12%;
					display: flex;
					justify-content: space-around;
					color: #1890ff;

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

					.col:last-child {
						color: red;
					}
				}
			}
		}

		.pageBox {
			margin-top: 20px;
		}
	}
</style>