<template>

	<view style="display: flex;flex-direction: column;height: 100vh; background: #F7F7F7;">
		<loading-state ref="pageView" @request="request">
			<view style="height: 100vh;overflow: hidden;overflow-y: auto;">
				<view
					style="background: #fff;border-radius: 10px;display: flex;flex-direction: column;padding: 15px;margin-top: 15px; margin-left: 10px;margin-right: 10px;">

					<text style="font-size: 18px;font-weight: 600;font-family: serif;margin-bottom: 10px;">退款商品</text>

					<view v-for="(item,index) in data.ordOrderDetails"
						style=" display: flex;flex-direction: row;align-items: center; margin-bottom: 10px;">

						<image :src="item.picUrl" @click="itemClick(item.goodsSid)"
							style="width: 70px;height: 70px;border-radius: 15px;" mode="scaleToFill">
						</image>

						<view style="margin-left: 10px;display: flex;flex-direction: column;flex: 1;">

							<view style="display: flex;flex-direction: row;width: 100%;">

								<text style="flex: 1;font-weight: 600;font-family: sans-serif;font-size: 14px;"
									@click="itemClick(item.goodsSid)">{{item.goodsName}}</text>
								<text
									style="font-weight: 600;font-family: sans-serif;font-size: 14px;">￥{{item.pricePart}}</text>
							</view>

							<!-- <text style="margin-top: 10px;font-size: 12px;color: #999;">{{item.remarks}}</text> -->

							<view style="margin-top: 8px;display: flex;flex-direction: column;">

								<view style="display: flex;flex-direction: row;align-items: center;">
									<text style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
									font-size: 10px;color: #EE752F;">{{item.priceUnit}}元/{{item.specificationUnit}}</text>
									<text
										style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
									font-size: 10px;color: #EE752F; margin-left: 10px; margin-right: 10px; ">{{item.numofPart}}{{item.specificationUnit}}/{{item.unitName}}</text>
								</view>

								<text
									style="margin-top: 12px;font-size: 12px;color: #999;">份数：{{item.partNumber}}{{item.unitName}}</text>

							</view>

						</view>

					</view>

				</view>

				<view style="background: #fff;border-radius: 10px;margin-top: 12px;margin-left: 10px;margin-right: 10px;
			display: flex;flex-direction: column;padding: 12px 16px;">

					<text style="font-size: 16px;">订单信息</text>

					<view style="display: flex;flex-direction: column;margin-top: 15px; ">

						<view style="display: flex;flex-direction: row;align-items: center;">

							<text style="font-size: 14px;color: #999;">订单编号</text>
							<text
								style="margin-left: 15px;font-size: 14px;color: #333;word-break: break-all;">{{data.outTradeNo}}</text>
						</view>

						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">

							<text style="font-size: 14px;color: #999;">下单时间</text>
							<text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.createTime}}</text>
						</view>

						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">

							<text style="font-size: 14px;color: #999;">支付方式</text>
							<text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.payType}}</text>
						</view>

						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"
							v-if="data.payStatus=='4'">

							<text style="font-size: 14px;color: #999;">付款时间</text>
							<text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.payTime}}</text>
						</view>

					</view>

				</view>

				<view style="background: #fff;border-radius: 10px;margin-top: 12px;margin-left: 10px;margin-right: 10px;
				display: flex;flex-direction: column;padding: 12px 16px;margin-bottom: 100px; box-sizing: border-box;">

					<view style="display: flex;flex-direction: row; align-items: center;">
						<text style="font-size: 16px;font-weight: 600;font-family: serif;">退款原因</text>
						<text style="font-size: 16px;color: #FF9900;margin-left: 5px;">(必填)</text>

					</view>

					<textarea type="text" v-model="reason" placeholder="补充详细退款原因，有利于商家更快的帮您处理。"
						style="margin-top: 12px; box-sizing: border-box; width: 100%; background: #FAFAFA;color: #999;font-size: 16px;min-height: 150px; padding: 12px 16px;" />

				</view>

			</view>
		</loading-state>

		<view
			style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center; 
		box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">

<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">

					<text style="font-size: 14px;">退款金额：</text>
					<text style="font-size: 18px;color: #FF5006;">￥{{data.totalTee}}</text>

				</view>
			<text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
					padding: 0px 20px;border-radius: 20px;" @click="submitApply">提交申请</text>

		</view>





	</view>


</template>

<script>
	export default {
		data() {
			return {
				page: {
					sid: ""
				},
				data: {},
				reason: ""
			}
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.request()
		},
		methods: {

			// 获取数据
			request() {

				let _this = this

				_this.$api.orderDetails(_this.page.sid).then((resp) => {
					_this.data = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})

				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},
			
			submitApply() {

				if (this.stringIsEmpty(this.reason)) {
					this.shortToast('请填写退款原图')
					return
				}

			},

		}

	}
</script>

<style>
</style>