<template>
	<view>
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh"
			:style="'background-color: '+theme.bg+';color: '+theme.text">
		<myNav slot="top" :title="i18n.orderDetails.title"></myNav>

		<!-- 身体 -->
		<view class="width-750 padding-w-30 padding-t-24 padding-b-100">
			<!-- 倒计时 -->
			<view v-if="data.status==1||data.status==2"
				class="height-112 padding-c-12 flex align-center justify-between">
				<view class="height-100b flex direction-column justify-between">
					<text v-if="data.status==1"
						class="font-28 weight-bold">{{i18n.orderDetails.text1}}</text>
					<text v-if="data.status==2"
						class="font-28 weight-bold">{{i18n.orderDetails.text2}}</text>
					<view class="flex align-center">
						<text v-if="data.status==1" class="font-26 color-C3C3C3">{{i18n.orderDetails.text3}}：</text>
						<text v-if="data.status==2" class="font-26 color-C3C3C3">{{i18n.orderDetails.text4}}：</text>
						<u-count-down @end="getDetails()" ref="uCountDown" :autoplay="true" :timestamp="timestamp"
							color="#0165EE">
						</u-count-down>
					</view>
				</view>
				<image class="width-60 height-60" src="/static/imgs/index/daojishi@2x.png" mode=""></image>
			</view>

			<!-- 订单信息 -->
			<view class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center justify-between margin-b-25">
					<text class="font-28 weight-bold">{{i18n.orderDetails.text5}}</text>
					<text class="font-28 color-0165EE weight-bold">{{statusText[data.status]}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text6}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.order_num}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text7}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.symbol}} {{data.price}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text8}}({{data.curr_name}})</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.num}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text9}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.symbol}} {{data.count_price}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text10}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.add_time}}</text>
				</view>
			</view>

			<!-- 用户信息 -->
			<view class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center justify-between margin-b-25">
					<text class="font-28 weight-bold">
						{{data.type==1?i18n.orderDetails.text11:i18n.orderDetails.text12}}
					</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text13}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.nickname}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text14}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.name}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text15}}</text>
					<view class="flex align-center">
						<text class="font-26 color-C3C3C3 nummedium-font">{{data.mobile}}</text>
						<text @click="callup(data.mobile)"
							class="font-26 color-0165EE margin-l-22">{{i18n.orderDetails.text16}}</text>
					</view>
				</view>
			</view>

			<!-- 银行卡信息 -->
			<view v-if="data" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center justify-between margin-b-25">
					<text class="font-28 weight-bold">{{i18n.orderDetails.text17}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text18}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.collection.card_num}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text14}}</text>
					<text class="font-26 color-C3C3C3 nummedium-font">{{data.collection.username}}</text>
				</view>
				<view class="flex align-center justify-between margin-b-10">
					<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text19}}</text>
					<view class="flex align-center">
						<text
							class="font-26 color-C3C3C3 nummedium-font">{{data.collection.bank_name+data.collection.bank_deposit}}</text>
					</view>
				</view>
			</view>

			<!-- 支付凭证 -->
			<view v-if="data.status==1&&data.type==1" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center justify-between margin-b-25">
					<text class="font-28 weight-bold">{{i18n.orderDetails.text20}}</text>
				</view>
				<view @click="chooseImage"
					:style="'background-color: '+theme.bg"
					class="width-176 height-176 radiu-20 flex align-center justify-center">
					<!-- <image v-if="img==''||img==null" class="width-104 height-101"
						src="/static/imgs/index/upload@2x.png"></image> -->
					<u-icon v-if="img==''||img==null" name="plus-circle" color="#8B99A2" size="80"></u-icon>
					<image v-else class="width-176 height-176 radiu-20" :src="img" mode=""></image>
				</view>
			</view>
			<view v-if="data.status!=1&&data.status!=5" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center justify-between margin-b-25">
					<text class="font-28 weight-bold">{{i18n.orderDetails.text20}}</text>
				</view>
				<view class="width-176 height-176 radiu-20 flex align-center justify-center">
					<image @click="yulanImg(voimg,1)" class="width-176 height-176 radiu-20" :src="voimg" mode=""></image>
				</view>
			</view>

			<!-- 申诉内容 -->
			<view v-if="data.appeal_arr" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center justify-between margin-b-25">
					<text class="font-28 weight-bold">{{i18n.orderDetails.text21}}</text>
				</view>
				<view class="font-32 color-FF4040 margin-b-10">{{data.appeal_arr.content}}</view>
				<view class="grid col-3">
					<view @click="yulanImg(data.appeal_arr.annex_images,2)"
						v-for="(item,index) in data.appeal_arr.annex_images" class="text-center margin-top">
						<view class="width-200 height-200">
							<image :src="item" class="width-200 height-200 radiu-20"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 按钮区 -->
			<view class=" margin-t-100 flex align-center justify-around">
				<!-- <text v-if="data.status==1&&data.type==2" class="font-42 color-00C481">请耐心等待买家付款</text> -->
				<view @click="router.push('/pages/index/appeal?id='+data.id)" v-if="data.status==2" class="okbtn">
					{{i18n.orderDetails.text22}}
				</view>
				<view @click="show=true" v-if="data.status==1&&data.type==1" class="nobtn">{{i18n.orderDetails.text23}}
				</view>
				<view @click="getorder_pay" v-if="data.status==1&&data.type==1" class="okbtn">
					{{i18n.orderDetails.text24}}
				</view>
				<view @click="show1=true" v-if="data.status==2&&data.type==2" class="okbtn">{{i18n.orderDetails.text25}}
				</view>
			</view>
		</view>

		<!-- 取消弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="width-600 height-266" style="overflow: hidden;"
			:style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="height-170 flex align-center justify-center">
					<text class="font-32 color-FF4040 weight-bold">{{i18n.orderDetails.text26}}</text>
				</view>
				<!-- <input class="input" type="text" v-model="paypwd" placeholder="请输入交易密码" placeholder-class="color-C3C3C3"
					password /> -->
				<view class="height-98 flex">
					<view @click="show=false" class="flex-1 line-height-98 text-center bj-c3c3c3-02">
						<text class="font-28 color-C3C3C3 weight-bold">{{i18n.orderDetails.text27}}</text>
					</view>
					<view @click="getcancel" class="flex-1 line-height-98 text-center bj-0165EE">
						<text class="font-28 color-white weight-bold">{{i18n.orderDetails.text28}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 确认收款弹窗 -->
		<u-popup v-model="show1" mode="center" border-radius="20">
			<view class="width-600 height-266" style="overflow: hidden;" 
			:style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="height-170 flex align-center justify-center">
					<text class="font-32 color-FF4040 weight-bold">{{i18n.orderDetails.text29}}</text>
				</view>
				<!-- <input class="input" type="text" v-model="paypwd" placeholder="请输入交易密码" placeholder-class="color-C3C3C3"
					password /> -->
				<view class="height-98 flex">
					<view @click="show1=false" class="flex-1 line-height-98 text-center bj-c3c3c3-02">
						<text class="font-28 color-C3C3C3 weight-bold">{{i18n.orderDetails.text27}}</text>
					</view>
					<view @click="getsucc" class="flex-1 line-height-98 text-center bj-0165EE">
						<text class="font-28 color-white weight-bold">{{i18n.orderDetails.text28}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		</z-paging>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				timestamp: 0,
				id: '',
				data: '',
				img: '',
				upimg: '',
				voimg: '',
				flag: true,
				show: false,
				show1: false,
				statusText: ['', '', '', '', '', ''],
				theme: '',
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		// onPullDownRefresh() {
		// 	console.log('下拉刷新');
		// 	this.getDetails()
		// 	this.changekind()
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 1500);
		// },
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getDetails()
			this.changekind()
		},
		methods: {
			onRefresh() {
				this.getDetails()
				this.changekind()
				// 以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					//1.5秒之后停止刷新动画
					this.$refs.paging.complete();
				}, 1500)
			},
			changekind() {
				this.statusText[1] = this.i18n.orderRecord.text10
				this.statusText[2] = this.i18n.orderRecord.text11
				this.statusText[3] = this.i18n.orderRecord.text12
				this.statusText[4] = this.i18n.orderRecord.text13
				this.statusText[5] = this.i18n.orderRecord.text14
			},
			// 呼叫
			callup(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //仅为示例
					success: () => {

					}
				});
			},
			// 确认收款并放币
			getsucc() {
				if (!this.flag) {
					return
				} else {
					this.show1 = false
					uni.showLoading({
						title: '',
						mask: true
					})
					this.flag = false
					this.post('/marketotc/order_succ', {
						id: this.data.id
					}).then(res => {
						console.log('确认收款返回', res)
						this.flag = true
						uni.hideLoading()
						if (res.code == 1) {
							this.tos(res.msg)
							this.getDetails()
						}
					})
				}
			},
			// 查看支付凭证
			yulanImg(img, type) {
				if (type == 1) {
					// let arr = []
					let arr = img.split()
					// arr.push(img)
					uni.previewImage({
						urls: arr
					})
				} else {
					uni.previewImage({
						urls: img
					})
				}

			},
			// 取消订单
			getcancel() {
				if (!this.flag) {
					return
				} else {
					this.show = false
					uni.showLoading({
						title: '',
						mask: true
					})
					this.flag = false
					this.post('/marketotc/order_cancel', {
						id: this.data.id
					}).then(res => {
						console.log('上传支付凭证返回', res)
						this.flag = true
						uni.hideLoading()
						if (res.code == 1) {
							this.tos(res.msg)
							this.getDetails()
						}
					})
				}
			},
			// 上传支付凭证
			getorder_pay() {
				if (this.upimg == '') return this.tos(this.i18n.orderDetails.tos1)
				if (!this.flag) {
					return
				} else {
					uni.showLoading({
						title: '',
						mask: true
					})
					this.flag = false
					let obj = {
						id: this.data.id,
						voucher_image: this.upimg
					}
					this.post('/marketotc/order_pay', obj).then(res => {
						console.log('上传支付凭证返回', res)
						this.flag = true
						uni.hideLoading()
						if (res.code == 1) {
							this.tos(res.msg)
							this.getDetails()
						}
					})
				}
			},
			// 选择支付凭证
			chooseImage() {
				let self = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						self.img = tempFilePaths[0]
						uni.showLoading()
						uni.uploadFile({
							url: this.upload + '/publics/image_upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data)
								uni.hideLoading()
								if (data.code == 1) {
									// console.log(data)
									self.upimg = data.data.url
								}
							}
						})
					}
				})
			},
			// 获取订单详情
			getDetails() {
				uni.showLoading({
					title: '',
					mask: true
				})
				this.post('/marketotc/content_order', {
					id: this.id
				}).then(res => {
					console.log('订单详情', res)
					if (res.code == 1) {
						uni.hideLoading()
						this.data = res.data
						if (this.data.status != 1 && this.data.voucher_image != null) {
							this.voimg = res.data.voucher_image[0]
						}
						let h = res.data.h
						let i = res.data.i
						let s = res.data.s
						this.timestamp = (h * 60 * 60) + (i * 60) + s
						this.$refs.uCountDown.start();
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 690rpx;
		padding: 22rpx 24rpx 20rpx;
		// background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx rgba(205, 206, 219, 0.3);
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}

	.nobtn {
		width: 300rpx;
		height: 96rpx;
		background: #F6F8FB;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #8B99A2;
		line-height: 96rpx;
		text-align: center;
	}

	.okbtn {
		width: 300rpx;
		height: 96rpx;
		background: #0165EE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}

	.bj-c3c3c3-02 {
		background: rgba(195, 195, 195, 0.2);
	}

	.input {
		width: 540rpx;
		height: 76rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		background: #F6F8FC;
		font-size: 28rpx;
		color: #8B99A2;
		padding: 0 24rpx;
	}
</style>
