<template>
	<uni-swipe-action-item  :right-options="rightOptions" @click.stop="swipeClick" >
		<view class="receiving-info" @click.stop="handleClick">
			<view class="receiving-info-content">
				<text class="receiving-info-content-left">箱码</text>
				<text class="receiving-info-content-right">{{ detail.code }}</text>
			</view>
			<view class="receiving-info-content">
				<text class="receiving-info-content-left">状态</text>
				<text class="receiving-info-content-right" :class="[statusColor]">{{ statusLabel }}</text>
			</view>
		</view>
	</uni-swipe-action-item>
</template>

<script>
import { myFilter } from '@/common/common.js';
import { receiveStatusOptions } from '@/common/optinos/mine/received.js';
import { showModal } from '@/common/common.js';
export default {
	name: 'ReceivingInfo',
	props: {
		detail: {
			type: Object,
			default: () => {}
		},
		/* 品牌类型 */
		options: {
			type: Array|null,
			default: () => []
		}
	},
	data() {
		return {
			receiveStatusOptions,
			statusColorOptions: {
				1: 'receiving-info-footer-status-grey',
				2: 'receiving-info-footer-status-blue'
			},
			rightOptions: [
				{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			]
		};
	},
	computed: {
		statusColor() {
			return this.statusColorOptions[this.detail.status] || '';
		},
		statusLabel() {
			// 按钮文字
			return myFilter(this.detail.status, this.receiveStatusOptions, 'name');
		},
		brandLabel() {
			return myFilter(this.detail.brand, this.options);
		}
	},
	created() {},
	methods: {
		/*  index 为 当前所在的下标*/
		/*  index1 为 按钮的下标*/
		swipeClick(e) {
			let { text } = e.content;
			console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮');
			if (e.position === 'right' && text === '删除') {
				this.openDelete();
			}
		},
		
		handleClick() {
			this.$emit('handleClick', this.detail.id);
		},
		openDelete(index) {
			showModal({
				content: '删除车辆后,将无法收到车辆信息,是否删除该车辆？',
				success: res => {
					if (res.confirm) {
						this.$emit('handleDelete',  this.detail.id );
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.receiving-info {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 20rpx 30rpx;
	// margin-bottom: 20rpx;
	font-size: 24rpx;
	color: #666666;
	.hover-class {
		background-color: #dddddd;
	}
	&-content {
		display: flex;
		justify-content: space-between;
		line-height: 36rpx;
		margin-bottom: 12rpx;
		&:last-child {
			margin-bottom: 0;
		}
		&-left {
			width: 100rpx;
		}
		&-right {
			text-align: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 80%;
		}
	}
}
</style>
