<template>
	<view class="statement-view">
		<view class="statement-com-view" @click="$u.throttle(handleClick, 500)">
			<view class="left-view">
				<view class="time-view">{{timeText}}</view>
				<view class="order-view">
					<text>工单编号：</text>
					<text>{{data.orderNumber}}</text>
				</view>
				<view class="order-view">
					<text>工单类型：</text>
					<text>{{typeText}}</text>
				</view>
			</view>
			<view class="right-view">
				<view :class="['statement-status-view', statementTypeClass]">{{data.status}}</view>
				<view class="statement-amount-view">{{ fmtAmount }}</view>
			</view>
		</view>
		<view class="line-view"></view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {
						paymentTime: new Date().getTime(),
						status: '预结',
						orderNumber: 'EE999777',
						orderServiceTypeText: '安装',
						inGuaranteePeriod: false, // true 保内；false 保外
						amount: 9899
					}
				}
			}
		},
		data() {
			return {

			}
		},
		computed: {
			statementTypeClass() {
				switch (this.data.status) {
					case '预结':
						return 'statement-type-y'
					case '已确认':
						return 'statement-type-h'
				}
			},
			fmtAmount() {
				if(this.data.amount > 0) {
					return (`+${this.data.amount}`)
				} else {
					return this.data.amount
				}
			},
			isWarranty() {
				return this.data.inGuaranteePeriod ? '保内' : '保外'
			},
			typeText() {
				return this.isWarranty + '-' + this.data.orderServiceTypeText
			},
			timeText() {
				let now = this.moment().startOf('day').unix()
				let yesterday = this.moment(now*1000).subtract(1, 'days').unix()
				let date = this.moment(this.data.updateDatetime).startOf('day').unix()
				if(date == now) {
					return '今天'
				} else if(date == yesterday) {
					return '昨天'
				} else {
					return this.$u.timeFormat(this.data.updateDatetime, 'mm.dd')
				}
			}
		},
		methods:{
			handleClick() {
				if(this.data.status == '已确认') {
					this.$emit('click', this.data.orderId)
				} else {
					this.$u.toast('需等系统确认该订单，才可查看订单详情')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statement-view {
		height: 212rpx;

		.statement-com-view {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 30rpx;
			height: 210rpx;
			.left-view {
				.time-view {
					height: 40rpx;
					width: 80rpx;
					color: #333333;
					background-color: #F4F5F7;
					border-radius: 8rpx;
					font-size: 20rpx;
					margin-bottom: 20rpx;
					text-align: center;
					padding-top: 6rpx;
				}

				.order-view {
					font-size: 26rpx;
					color: #999999;
					margin-bottom: 6rpx;
				}
			}

			.right-view {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.statement-status-view {
					border-radius: 8rpx;
					border: 2rpx solid #FF930D;
					font-size: 20rpx;
					color: #FF930D;
					min-width: 80rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
    				padding: 0 10rpx;

					&.statement-type-y {
						border: 2rpx solid #FF930D;
						color: #FF930D;

					}

					&.statement-type-h {
						border: 2rpx solid #2272FF;
						color: #2272FF;
					}
				}


				.statement-amount-view {
					font-size: 40rpx;
					font-weight: bold;
					color: #2272FF;
					margin-top: 30rpx;
				}
			}
		}

		.line-view {
			background-color: #F4F5F7;
			height: 2rpx;
			margin: 0 30rpx;
		}
	}
</style>
