<template>
	<view class="order view">
		<view class="top">
			<text class="title-no">要货单号：{{newsItem.wantCode}}</text>
			<view class="title-info" v-if="newsItem.billStatusTextView">
				<button class="title-info__status" type="default"><text class="item-block-btn__text">{{newsItem.billStatusTextView}}</text></button>
			</view>
		</view>
		<view class="middle view">
			<view class="middle-title" v-if="newsItem.logisticno">
				<text class="middle-title__text">发货单号：{{newsItem.logisticno}}</text>
				<image @click="checkLogistics(newsItem.logisticno)" class="icon-car" src="@/static/image/order_car@3x.png" mode="aspectFit">
				</image>
			</view>
			<view class="text-block">
				<text class="middle-date-des">客户名称</text>
				<text class="middle-date">{{newsItem.customerName}}</text>
			</view>
			<view class="text-block-box">
				<view class="text-block text-block-last">
					<text class="middle-date-des">申请时间</text>
					<text class="middle-date">{{newsItem.createdDate}}</text>
				</view>
				<view class="text-block text-block-last" v-if="newsItem.significanceTextView">
					<text class="middle-date-des middle-date-right">重要程度</text>
					<view class="middle-date-right">
						<text class="dot"></text>
						<text class="middle-date">{{newsItem.significanceTextView}}</text>
					</view>
				</view>
			</view>
			<view class="text-block-box">
				<view class="text-block text-block-last">
					<text class="middle-date-des">是否瓶储</text>
					<text class="middle-date">{{newsItem.isPcj - 1 === 0 ? '是' : '否'}}</text>
				</view>
				<view class="text-block text-block-last" v-if="newsItem.isPcj - 1 === 0">
					<text class="middle-date-des middle-date-right">瓶储到期时间</text>
					<view class="middle-date-right">
						<text class="middle-date">{{newsItem.saveEnddate}}</text>
					</view>
				</view>
				<view class="text-block text-block-last box-num" v-if="newsItem.wantCode.includes('FHZG')" @click="goBoxNum(newsItem)">
					<button class="title-info__status" type="default"><text class="item-block-btn__text">箱码</text></button>
				</view>
			</view>
		</view>
		<view class="bottom view">
			<view class="bottom-nav">
				<view class="bottom-nav-arrow" @click="handleShowDetail">
					<text class="arrow-des">明细</text>
					<image class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}"
						src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view v-if="ishowDetail" class="bottom-content">
				<uni-cell class="cell-list" v-for="(ele, index) in newsItem.list" :key="ele.id">
					<view class="block-detal">
						<view class="block-detal-item">
							<text class="detal-item-label">品牌</text>
							<text class="detal-item-value">{{ele.brandTextView}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">产品</text>
							<text class="detal-item-value detal-item-value3">{{ele.productDesc}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">未发货件数</text>
							<text class="detal-item-value">{{ele.undeliveredQuantity}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">未发货瓶数</text>
							<text class="detal-item-value">{{ele.availableBot}}</text>
						</view>
						<!-- <view class="block-detal-item">
							<text class="detal-item-label">传统当月计划量</text>
							<text class="detal-item-value">{{ele.applyNum}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">传统当月剩余量</text>
							<text class="detal-item-value">{{ele.monthLeftQty}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">传统当年剩余量</text>
							<text class="detal-item-value">{{ele.annualLeftQty}}</text>
						</view> -->
						<view class="block-detal-item">
							<text class="detal-item-label">本次要货件数</text>
							<text class="detal-item-value">{{ele.wantQuantity}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">基地审批数量</text>
							<text class="detal-item-value">{{ele.baseAuditQuantity}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">战区审批数量</text>
							<text class="detal-item-value">{{ele.warAuditQuantity}}</text>
						</view>
						<view class="block-detal-item block-detal-item-last">
							<text class="detal-item-label">销售内勤审批数量</text>
							<text class="detal-item-value">{{ele.salecenterAuditQuantity}}</text>
						</view>
					</view>
				</uni-cell>
			</view>

			<view class="receive-info" ref='receiveInfo' :style="receiveInfoHeightComputed"
				:class="{'receive-info-auto':ishowReceiveDetail}">
				<view class="block-detal-item">
					<text class="detal-item-label detal-item-title">收货信息</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">是否分流</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.isShuntTextView}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">分流渠道类型</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.shuntChannelsTypeTextView}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">分流经销商</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.shuntDealer}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">收货单位</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.receiveUnitName}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">喷码单位</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.spurtCodeUnitName}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">联系人</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.contacPerson}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">联系人电话</text>
					<text class="detal-item-value detal-item-value2">{{newsItem.contactNumber}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">收货地址</text>
					<text class="detal-item-value detal-item-value3">{{newsItem.receiveAddress}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">备注</text>
					<text class="detal-item-value detal-item-value3">{{newsItem.remark}}</text>
				</view>
				<view class="block-detal-item attach-block">
					<text class="detal-item-label">附件</text>
					<view class="upload-block">
						<uni-file-picker readonly :value="allFiles" :imageStyles="imageStyles" file-mediatype="image">
						</uni-file-picker>
					</view>
					<!-- <view class="" v-for="item in allFiles">
						<image class="attach-file" :src="item" mode="aspectFit"></image>
					</view> -->
				</view>
				<view class="float-btn-block">
					<view class="float-btn" @click="handleShowReceiveDetail">
						<text class="float-btn__text">{{ishowReceiveDetail?'收起':'展示完整信息'}}</text>
						<image class="icon-arrow" :class="{'icon-arrow-rotate':!ishowReceiveDetail}"
							src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	import { doQuery, attachmentDownFile } from '@/servers/purchaseList.js'
	import store from '@/store/index.js'
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		data() {
			return {
				ishowDetail: true,
				ishowReceiveDetail: false,
				receiveInfoHeight: '132',
				receiveInfoDetailSize: {},
				allFiles: [],
			}
		},
		// watch:{
		// 	ishowReceiveDetail(val){
		// 		if(val === true){
		// 			this.receiveInfoHeight = `${this.$refs.receiveInfo.$el.clientHeight}px`
		// 		}else{
		// 			this.receiveInfoHeight = '24px'
		// 		}
		// 	}	
		// },
		computed: {
			imageStyles() {
				return {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				}
			},
			receiveInfoHeightComputed() {
				console.log(this.receiveInfoHeight - 0,'[][]')
				if(this.receiveInfoHeight - 0 === 0){
					const height = this.allFiles.length > 0 ? 485 : 0
					return { "minHeight": height + "px" }
				}else{
					return {
						"height": `${this.receiveInfoHeight}px`
					}
				}
			}
		},
		mounted() {
			this.getFiles(this.newsItem.id)
			// setTimeout(() => {
			// 	const result = dom.getComponentRect(this.$refs.receiveInfo, option => {
			// 		console.log('getComponentRect:', option)
			// 		this.receiveInfoDetailSize = option.size
			// 	})
			// 	console.log('return value2:', result)
			// 	console.log('viewport:', dom.getComponentRect('viewport'))
			// }, 100);
		},
		methods: {
			goBoxNum(item){
				uni.navigateTo({
					url: `/pages/goodBoxNum/goodBoxNum?num=${item.wantCode}`
				})
			},
			async getFiles(id) {
				const params = {
					bizId: id,
					bizCode: 'wantGoods'
				}
				const res= await doQuery(params)
				res.data.forEach((ele,idx) => {
					this.downFiles(ele)
				});
			},
			async downFiles(item) {
				// 获取arraybuffer格式数据
				let res = await uni.request({
					method: "POST",
					url: `https://crm.wuliangye.com.cn/crm-app/attachmentDownFile?id=`+item.id, //生产
					// url: `http://221.10.127.60:5000/crm-app/attachmentDownFile?id=`+item.id,
					params: {
					  id: item.id
					},
					header: {
						'X-Auth-Token': store.state.vuex_token,
						// 'content-type': 'multipart/form-data'
					},
					responseType: "arraybuffer"   //只有text、arraybuffer两种
				})
				 const buff = res[1].data
				// 转成base64格式路径
				const base64Src = 'data:image/png;base64,' + uni.arrayBufferToBase64(buff);
				// 通过 image-tools  中方法再将base64路径转为普通路径，用于预览
				const path = await  base64ToPath(base64Src);
				const picObj = {
					...item,
					"name": item.fileName,
					"extname": item.fileKind,
					"url":path,
				}
				this.allFiles.push(picObj)
			},
			click() {
				this.$emit('click');
			},
			close(e) {
				e.stopPropagation();
				this.$emit('close');
			},
			handleShowDetail() {
				this.ishowDetail = !this.ishowDetail
			},
			handleShowReceiveDetail() {
				this.ishowReceiveDetail = !this.ishowReceiveDetail
				if (this.ishowReceiveDetail === true) {
					this.receiveInfoHeight = '0'
				} else {
					this.receiveInfoHeight = '132'
				}
			},
			checkLogistics(num) {
				// const num = 'dfb0ebae8103034ccb863d3702e22eb6'
				uni.navigateTo({
					url: `/pages/logistics/logistics?logisticno=${num}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.order {
		flex: 1;
		background: #ffffff;
		border-radius: 16rpx 100rpx 16rpx 16rpx;
		box-shadow: 0px 2px 4px 0px #dbe4ee;
		margin-bottom: 60rpx;
		margin-top: 28rpx;
		padding-top: 30rpx;
	}

	.top {
		height: 72rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
	}

	.title-no {
		font-size: 24rpx;
		color: #555555;
	}

	.title-info {
		align-items: center;
		margin-right: 26rpx;
	}

	.title-info__status {
		width: 130rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #f61d30;
		border-radius: 80rpx 200rpx 200rpx 80rpx;
		font-size: 12px;
		color: #fff;
		text-align: center;
	}

	.item-block-btn__text {
		font-size: 12px;
		color: #fff;
	}

	.middle {
		// position: relative;
		padding: 26rpx 32rpx;
	}

	.middle-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.middle-title__text {
		font-weight: 500;
		font-size: 32rpx;
		color: $text-base-color;
		font-family: PingFangSC, PingFangSC-Medium;
	}

	.icon-car {
		width: 13px;
		height: 13px;
		margin-left: 16rpx;
	}

	.text-block {
		flex: 1;
		flex-direction: column;
		margin-bottom: 16rpx;
	}

	.text-block-last {
		margin-bottom: 0;
	}

	.middle-date {
		font-size: 28rpx;
		color: $text-base-color;
		margin-top: 8rpx;
	}

	.middle-date-des {
		font-size: 24rpx;
		color: #999;
	}

	.text-block-box {
		display: flex;
		// height: 120rpx;
		margin-bottom: 16rpx;
		justify-content: space-between;
	}

	.middle-date-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.dot {
		width: 5px;
		height: 5px;
		background: #3bdc88;
		border-radius: 50%;
		margin-top: -4px;
		margin-right: 7px;
	}

	.bottom {
		padding: 0 50rpx 48rpx;
	}

	.bottom-nav {
		height: 40rpx;
		justify-content: flex-end;
		align-items: center;
	}

	.bottom-nav-arrow {
		align-items: center;
	}

	.arrow-des {
		font-size: 24rpx;
		color: #999;
	}

	.icon-arrow {
		width: 7px;
		height: 4px;
		margin-left: 16rpx;
		margin-top: 2px;
		transition-property: transform;
		transition-duration: 0.15s;
		transform: rotate(0deg);
	}

	.icon-arrow-rotate {
		transform: rotate(180deg);
	}

	.bottom-content {
		flex-direction: column;
		margin-top: 24rpx;
	}

	.block-detal {
		display: flex;
		flex-direction: column;
		background: #f8f8f8;
		border-radius: 20rpx;
		padding: 28rpx 32rpx;
		margin-bottom: 16rpx;
	}

	.block-detal-last {
		margin-bottom: 32rpx;
	}

	.block-detal-item {
		display: flex;
		margin-bottom: 32rpx;
		justify-content: space-between;
	}

	.block-detal-item-last {
		margin-bottom: 0;
	}

	.detal-item-label {
		color: #999;
		font-size: 24rpx;
	}

	.detal-item-value {
		// flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.detal-item-value2 {
		font-size: 24rpx;
		// width: 200%;
		// flex: 2;
		// text-align: left;
	}
	.detal-item-value3{
		padding-left: 60rpx;
		font-size: 24rpx;
		width: 300%;
		flex: 2;
		text-align: right;
	}
	.receive-info {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		min-height: 240rpx;
		// padding-bottom: 96rpx;
	}

	.receive-info-auto {
		// height: auto;
	}

	.detal-item-title {
		color: #333;
		font-size: 28rpx;
		font-weight: 600;
	}

	.attach-block {
		flex-direction: column;
	}

	.attach-file {
		width: 94px;
		height: 94px;
		margin: 20rpx 20rpx 0 0;
	}

	.float-btn-block {
		position: absolute;
		left: 0;
		bottom: -2rpx;
		z-index: 10;
		width: 620rpx;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.float-btn {
		padding: 0 20px;
		height: 60rpx;
		border: 0.5px solid #d8d8d9;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.float-btn__text {
		font-size: 24rpx;
	}
	.cell-list {
		flex-direction: column;
	}
	.upload-block {
		display: flex;
		height: 88rpx;
		border-radius: 4px;
		margin-top: 20rpx;
		flex-direction: column;
	}
	.box-num{
		align-items: flex-end;
		margin-right: 26rpx;
	}
</style>
