<template>
	<view class="shop-refund-detail" v-if="detail.id">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
			:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="退款详情">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<image mode="aspectFill" lazy-load class="common-bg abs" src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
		<view class="pl-lg pr-lg c-base" style="height: 120rpx;">
			<view class="f-sm-title text-bold pt-md">{{statusType[detail.status]}}</view>
			<view class="f-caption" v-if="detail.status == 2">退款成功，退款金额¥{{detail.refund_price}}</view>
		</view>

		<view class="ml-md mr-md pd-lg fill-base f-paragraph c-title box-shadow radius-24">
			<view class="order-item flex-center" :class="[{'mt-md':index!=0}]"
				v-for="(item,index) in detail.order_goods" :key="index">
				<image mode="aspectFill" lazy-load class="avatar box-shadow-mini radius-24" :src="item.goods_cover">
				</image>
				<view class="flex-1 ml-lg">
					<view class="f-paragraph c-title text-bold max-490 ellipsis"> {{item.goods_name}} </view>
					<view class="f-caption c-title max-490 ellipsis">{{item.spe_name}} </view>
					<view class="flex-y-baseline mt-sm">
						<view class="flex-1 f-paragraph c-warning">¥{{item.goods_price}} </view>
						<view class="f-caption c-caption">x {{item.goods_num}} </view>
					</view>
				</view>
			</view>
			<view class="flex-between mt-lg pt-md b-1px-t">
				<view class="c-title ml-sm mr-sm"> {{`共${detail.all_goods_num}件`}}</view>
				<view class="flex-y-baseline f-desc c-title"> 合计：
					<view class="f-title c-warning">¥{{detail.apply_price}}</view>
					<view class="f-caption c-caption ml-sm" v-if="detail.car_price*1>0">含配送费：¥{{detail.car_price}}
					</view>
				</view>
			</view>
		</view>

		<view class="mt-md ml-md mr-md pd-lg fill-base f-caption c-title box-shadow radius-24">
			<view class="flex-between pb-lg f-title c-title text-bold b-1px-b">退款信息</view>
			<view class="pt-lg f-desc">
				<view class="flex-column">
					<view>退款原因</view>
					<view class="c-caption mt-sm">
						<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
					</view>
				</view>
				<view class="flex-column mt-md" v-if="detail.imgs && detail.imgs.length > 0">
					<view>上传图片</view>
					<view class="flex-warp">
						<block v-for="(item,index) in detail.imgs" :key="index">
							<image mode="aspectFill" @tap.top="$util.previewImage({current:item,urls:detail.imgs})"
								class="refund-img mt-md mr-md radius-10" :src="item" />
						</block>
					</view>
				</view>
			</view>
		</view>

		<view class="order-text-info mt-md ml-md mr-md pd-lg fill-base f-caption c-title box-shadow radius-24">
			<view class="flex-warp pt-sm">
				<view class="text c-caption">订单编号</view>
				<view class="flex-1 flex-y-center">{{detail.order_code}}
					<view @tap="$util.goUrl( {url:`${detail.order_code}`,openType:'copy'})"
						class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
				</view>
			</view>
			<block v-if="detail.send_type == 2">
				<view class="flex-warp pt-md">
					<view class="text c-caption">付款单号</view>
					<view class="flex-1 flex-y-center">{{detail.transaction_id}}
						<view @tap="$util.goUrl( {url:`${detail.transaction_id}`,openType:'copy'})"
							class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
					</view>
				</view>
				<view class="flex-warp pt-md" v-if="detail.status == 2">
					<view class="text c-caption">退款单号</view>
					<view class="flex-1 flex-y-center">{{detail.out_refund_no}}
						<view @tap="$util.goUrl( {url:`${detail.out_refund_no}`,openType:'copy'})"
							class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
					</view>
				</view>
			</block>
			<view class="flex-warp pt-md">
				<view class="text c-caption">申请时间</view>
				<view class="flex-1">{{detail.create_time}}</view>
			</view>
			<block v-if="detail.status > 1">
				<view class="flex-warp pt-md">
					<view class="text c-caption">处理时间</view>
					<view class="flex-1">{{detail.refund_time}}</view>
				</view>
				<view class="flex-warp pt-md">
					<view class="text c-caption">处理人</view>
					<view class="flex-1">{{detail.refund_user_name}}</view>
				</view>
			</block>
		</view>

		<view :class="[{'space-max-footer':detail.status == 1},{'space-footer':detail.status != 1}]"></view>


		<view class="footer-btn fix fill-base pl-lg pr-lg" v-if="detail.status != 2">
			<view class="flex-between">
				<view></view>
				<view class="flex-y-center">
					<view @tap.stop="toChangeOrder('cancel_item')"
						class="common-btn disabled flex-center f-caption c-title radius" v-if="detail.status == 1">
						取消退款
					</view>
					<view @tap.stop="toTel" class="common-btn flex-center f-caption c-base radius"
						:style="{background:primaryColor}" v-if="detail.status == 3">联系店主
					</view>
				</view>
			</view>
			<view class="space-safe"></view>
		</view>

		<common-popup @confirm="confirmUpdate" ref="cancel_item" type="CANCEL_REFUND_ORDER" :info="popupInfo">
		</common-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				scrollTop: 0,
				options: {},
				detail: {},
				payType: {
					1: '微信支付',
					2: '余额支付',
					3: '支付宝支付'
				},
				statusType: {
					1: '退款中',
					2: '退款成功',
					3: '退款失败',
				},
				sendType: {
					1: '自提',
					2: '快递'
				},
				param: {
					page: 1,
				},
				list: {
					data: []
				},
				loading: true,
				popupInfo: {},
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			haveOperItem: state => state.order.haveOperItem,
		}),
		onLoad(options) {
			this.options = options
			this.$util.showLoading()
			this.updateOrderItem({
				key: 'haveOperItem',
				val: false
			})
			this.initIndex()
		},
		onUnload() {
			if (!this.haveOperItem) return
			this.$util.back()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updateOrderItem']),
			async initIndex() {
				let {
					id,
				} = this.options
				let data = await this.$api.shop.refundOrderInfo({
					id
				})
				this.detail = data
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex()
			},
			async toMap() {
				let {
					lat,
					lng,
					address
				} = this.detail
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: lat * 1,
					longitude: lng * 1,
					name: address,
					scale: 28
				})
			},
			// 取消退款
			async toChangeOrder(key) {
				let {
					id,
					order_code,
					order_goods,
				} = this.detail
				let {
					goods_cover: image,
				} = order_goods[0]
				this.popupInfo = {
					id,
					name: `订单编号：${order_code}`,
					image,
					refs_key: key
				}
				this.$refs[key].open()
			},
			async confirmUpdate() {
				let {
					id,
					refs_key
				} = this.popupInfo
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				let methodModel = {
					'cancel_item': {
						method: 'cancelRefundOrder',
						status: -1,
						msg: '取消成功'
					}
				}
				try {
					let {
						method,
						status,
						msg
					} = methodModel[refs_key]
					await this.$api.shop[method]({
						id
					})
					this.$util.hideAll()
					this.$util.showToast({
						title: msg
					})
					this.lockTap = false
					this.$refs[refs_key].close()
					this.updateOrderItem({
						key: 'haveOperItem',
						val: true
					})
					setTimeout(() => {
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			// 联系店主
			toTel(index) {
				let {
					mobile: url
				} = this.detail.store_info
				this.$util.goUrl({
					url,
					openType: `call`
				})
			},
		}
	}
</script>


<style lang="scss">
	.shop-refund-detail {

		.footer-btn {
			width: 100%;
			bottom: 0;

			.flex-between {
				height: 98rpx;
			}
		}
	}
</style>
