<template>
	<!-- 已申请物料cell -->
	<view class="return-cell" @click="handleClick">
		<view class="title-view">
			<text class="title-text" :style="{'color': titleColor}">{{title}}</text>
			<view class="express-view" @click.stop="$u.throttle(handleClickExpress, 500)" v-if="info.express.number" hover-class="u-hover-class">
				<text>物流单号：</text>
				<view class="order-file-right">
					<text>{{info.express.number}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="line-view"></view>
		<view class="list-content" v-if="isHorizontal">
			<view class="image-list">
				<image class="image-view" v-for="(item, index) in images" :key="index" :src="item"></image>
				<view class="info-view" v-if="info.items.length == 1">
					<view class="name-text">{{info.items[0] ? info.items[0].name : ''}}</view>
					<view>{{noteText}}</view>
				</view>
			</view>
			<!-- <view class="count-view">共{{info.items.length}}种</view> -->
		</view>
		<view v-else class="list-vertical-content">
			<view class="list-item" v-for="(item, index) in info.items" :key="index">
				<SpareCell :item="item"/>
			</view>
		</view>
		<view class="bottom-view">
			<view class="total-view">
				<text>共：</text>
				<text class="amount-view">{{info.items.length}}</text>
				<text>种</text>
			</view>
			<u-button v-if="showButton" :custom-style="customStyle" shape="circle" @click.stop="handleOperate" type="primary">{{buttonText}}</u-button>
		</view>
	</view>
</template>

<script>
	import SpareCell from "@/components/parts/spareCell.vue"
	export default {
		components: {
			SpareCell
		},
		props: {
			info: { // 申请材料列表
				type: Object,
				default() {
					return {
						status: 0, // 待签收 15；待发货 10；待审核 1；已取消 -1；已驳回 -2；已签收 20
						items: [],
						express: {}
					}
				}
			},
			type: { // horizontal；vertical
				type: String,
				default: 'horizontal'
			}
		},
		data() {
			return {
				
			}
		},
		computed: {
			texts() {
				return {
					'1': '取消申请',
					'10': '',
					'15': '签收',
					'20': '',
					'-2': '',
					'-1': '',
					'100': '',
					'91': ''
				}
			},
			showButton() {
				return this.info.status == '1' || this.info.status == '15'
			},
			isHorizontal() {
				return this.type == 'horizontal'
			},
			operateTypes() {
				return {
					'1': 'cancelParts',
					'10': '',
					'15': 'receiveParts',
					'20': '',
					'-2': '',
					'-1': '',
					'100': '',
					'91': ''
				}
			},
			buttonOperateType() {
				return this.operateTypes[this.info.status]
			},
			buttonText() {
				return this.texts[this.info.status]
			},
			noteText() {
				 if (this.info.items[0] && (this.info.items[0].categoryName || this.info.items[0].brandName)) {
					 return (this.info.items[0].categoryName || '通用') + '-' + (this.info.items[0].brandName || '通用')
				 } else {
					 return '通用'
				 }
			},
			buttonStyle() {
				return {
					'height': '104rpx',
					'width': '100%',
				}
			},
			// 待签收 15；待发货 10；待审核 1；已取消 -1；已驳回 -2；已签收 20; 已完成 100
			title() {
				return this.titles[String(this.info.status)] || this.info.statusText
			},
			titles() {
				 // 待签收 15；  待发货 10；  待审核 1； 已取消 -1；  已驳回 -2； 已签收 20；已完成 100；已核销 91
				 // 已核销展示为已签收
				return {
					'1': '待审核',
					'10': '待发货',
					'15': '待签收',
					'20': '已签收',
					'-2': '已驳回',
					'-1': '已取消',
					'100': '已完成',
					'91': '已签收' // 已核销
				}
			},
			titleColor() {
				switch (String(this.info.status)) {
					case '-2': // 已驳回
						return '#FA5A49'
					case '-1': // 已取消
						return '#333333'
					default:
						return '#2272FF'
				}
			},
			// 待签收 15 -> 已签收 20； 待审核 1 -> 已取消 -1
			willStatuses() {
				return {
					'1': '-1',
					'10': '',
					'15': '20',
					'20': '',
					'-2': '',
					'-1': '',
					'100': '',
					'91': ''
				}
			},
			willStatus() {
				return this.willStatuses[this.info.status]
			},
			total() { // 合计
				var i = 0
				for (var item of this.info.items) {
					i += item.quantity
				}
				return i
			},
			images() {
				var array = []
				for (var item of this.info.items) {
					if (item.images) {
						array.push(process.uniEnv.systemUrl.apiUrl + item.images.split(',').shift())
					} else {
						array.push(this.placeholderImage)
					}
				}
				return array
			},
			placeholderImage() {
				return process.uniEnv.qn_base_url + 'morentupian.png'
			},
			customStyle() {
				return {
					'height': '80rpx',
					'width': '200rpx',
				}
			}
		},
		methods: {
			handleClick() {
				this.$emit('action', this.info)
			},
			handleOperate() {
				if (this.willStatus === '-1') {
					uni.showModal({
						title: '提示',
						content: '确定' + this.buttonText + '?',
						success: (res) => {
								if (res.confirm) {
									this.$emit('operate', this.info.id, this.buttonOperateType, this.willStatus)
								} else if (res.cancel) {
								}
						}
					})
				}	else {
					this.$emit('operate', this.info.id, this.buttonOperateType, this.willStatus)
				}
			},
			handleClickExpress() {
				this.$emit('express', this.info)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.return-cell {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
		.title-view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: #333333;
			.title-text {
				font-size: 36rpx;
				font-weight: bold;
			}
			.express-view {
				display: flex;
				justify-content: center;
				.order-file-right {
					font-weight: 400;
					color: #2272FF;
					font-size: 26rpx;
				}
			}
		}
		.line-view {
			background-color: #F4F5F7;
			height: 2rpx;
			width: 100%;
			margin-top: 20rpx;
		}
		.list-content {
			display: flex;
			width: 100%;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
			.image-list {
				overflow-x: auto;
				display: flex;
				width: 100%;
				// border-right: 2rpx solid #F4F5F7;
				.image-view {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}
				.info-view {
					font-size: 24rpx;
					color: #333333;
					.name-text {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 30rpx;
						word-break: hyphenate;
					}
				}
			}
			.count-view {
				width: 30rpx;
				text-align: center;
				font-size: 26rpx;
				color: #666666;
			}
		}
		.list-vertical-content {
			height: 100%;
			overflow: auto;
			.list-item {
				margin-bottom: 30rpx;
				margin-top: 20rpx;
			}
		}
		.bottom-view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.total-view {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				.amount-view {
					color: #2272FF;
					padding-right: 10rpx;
				}
			}
			
		}
	}

</style>
