<template>
	<view>
		<!-- topbar -->
		<u-navbar title="退款详情" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- 进度box -->
		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
			<view class="m-b-24 borderBDas flex msb mub">
				<view class="fb fz36 l-h-18">{{ order.refund_status !== "主动退"?"买家申请":"卖家取消订单" }}</view>
			</view>
			<process v-if="processList" :processList="processList" :processType='processType'></process>
		</view>
		<!-- 退款金额cell -->
		<cell :cellTit='order.refund_status ==="主动退" ? "退款金额":"申请退款金额"' conClass="fcm" :cellCon="refundPrice"
			:isRightIcon='false'></cell>
		<!-- 退款说明cell -->
		<cell cellTit="退款说明" :cellCon="refundRemark | truncate(8)" :isRightIcon='false'>
		</cell>
		<!-- 订单详情 -->
		<orderCon tit='订单详情' :order='order'></orderCon>
		<!-- 按钮 -->
		<view class="m-l-24 m-r-24 m-t-24 flex mr">
			<view class="nullBut border fcb rad8 fz28 flex mac mc" @click="callPhone(shopCon.tel)">
				联系客服
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatPrice,
		truncate,
		callPhone
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				order_sn: '', //订单号]
			}
		},
		onLoad(options) {
			this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号	
		},
		methods: {
			callPhone
		},
		filters: {
			formatPrice, //价格 格式化
			truncate
		},
		computed: {
			//退款说明
			refundRemark() {
				if (this.order) {
					return this.order.refund_remark
				} else {
					return null
				}
			},
			//退款额 ps:有确切退款额 显示确切退款额 没有显示申请退款额
			refundPrice() {
				if (this.order) {
					if (this.order.refund_price) {
						return '¥' + String(this.order.refund_price)
					} else {
						return '¥' + String(this.order.apply_price)
					}
				} else {
					return null
				}
			},
			//订单
			order() {
				if (this.order_sn) {
					return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)
				} else {
					return null
				}
			},
			//退款时间线组件 各时间指定
			processList() {
				if (this.order) {
					if (this.order.refund_status === '主动退') {
						return [this.order.refundagree_time, this.order.refunded_time]
					} else if (this.order.refund_status === '申请中' || this.order.refund_status === '已同意') {
						return [this.order.refundapply_time, this.order.refundagree_time, this.order.refunded_time]
					} else if (this.order.refund_status === '拒绝退') {
						return [this.order.refundapply_time, this.order.rejected_time]
					} else {
						return null
					}
				} else {
					return null
				}
			},
			//时间线组件类型指定
			processType() {
				if (this.order) {
					return this.order.refund_status
				} else {
					return null
				}
			},
			//单位信息
			shopCon() {
				return this.$store.state.shopCon
			},
		},
	}
</script>

<style lang="scss" scoped>

</style>