<template>
	<view class="content">
		<view class="content-textarea">
			<view class="">公司名称</view>
			<view class="">{{detailData.title}}</view>
		</view>
		<view class="content-textarea">
			<view class="">联系人</view>
			<view class="">{{detailData.linkman}}</view>
		</view>
		<view class="content-textarea">
			<view class="">联系电话</view>
			<view class="">{{detailData.phone}}</view>
		</view>
		<view class="content-textarea">
			<view class="">维修时间</view>
			<view class="">{{detailData.repairTime | formatDate}}</view>
		</view>
		<view class="content-textarea">
			<view class="">维修地址</view>
			<view class="">{{detailData.repairAddress}}</view>
		</view>
		<view class="content-textarea">
			<view class="">预算金额</view>
			<view class="">{{detailData.budget}}</view>
		</view>
		<view class="content-photograph" >
			<view class="">上传图片
			</view>
			<view>
				<view class="content-photograph-photo" v-if="detailData && detailData.pictureList && detailData.pictureList.length">
					<image class="content-photograph-photo-img" :src="v.url" mode=""
						v-for="(v ,index) in detailData.pictureList" :key="index" @click="handlePreview(index)"></image>
				</view>
				<view class="noData-text" v-else>暂无数据</view>
			</view>
			
		</view>
			<view class="content-frequency" >
				<view class="">
					上传视频
				</view>
				<view v-if="detailData && detailData.videoList && detailData.videoList.length">
					<view v-for="(v ,index) in detailData.videoList" :key="index">
						<video class="video-box" id="myVideo" :src="v.url" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu
							controls :show-fullscreen-btn='false'></video>
					</view>
				</view>
				<view class="noData-text" v-else>暂无数据</view>
				
			</view>
		<view class="content-voice" >
			<view class="">
				语音描述
			</view>
			<!-- class="content-voice-audio" -->
			<view class="margin-y-two" v-if="detailData && detailData.voiceList && detailData.voiceList.length">
				<free-audio audioId='audio1' :url='detailData.voiceList[0].url' :isDel="false"></free-audio>
			</view>
			<view class="noData-text" v-else>暂无数据</view>
		</view>
		<view class="content-remarks">
			<view class="">
				备注
			</view>
			<u--textarea v-model="detailData.remark" placeholder="请输入内容" disabled></u--textarea>
		</view>
		<view class="content-reject" v-if="detailData.status == 1">
			<view class="font-bold">
				<text></text>订单已驳回
			</view>
			<view class="paddding-x-two">
				驳回理由:{{detailData && detailData.reasonsForRejection ? detailData.reasonsForRejection : '暂无'}}</view>
			<!-- <u--textarea v-model="detailData.value1" placeholder="请输入内容" disabled></u--textarea> -->
		</view>
		<view class="content-reject" v-if="subscript == 3 && detailData.status== 5">
			<view class="">
				<text style="background:#2C66FF"></text>该订单已提交退款,等待商家致电……
			</view>
			<view>已支付金额:{{detailData.payAmount}}元</view>
			<!-- <u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea> -->
		</view>
		<view class="content-reject" v-if="subscript == 3 && detailData.status== '6'">
			<view class="">
				<text></text>该订单已退款
			</view>
			<!-- <u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea> -->
			<view>退款金额:{{detailData.refundAmount}}元</view>
			<view>已扣除服务金额:{{(detailData.payAmount - detailData.refundAmount).toFixed(2)}}元</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		orderDetailMsgNew
	} from '../../api/system/index.js'
	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
	import apiBaseConfig from '@/config/index.js';
	export default {
		components: {
			freeAudio,
		},
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				scrollTopHeader: 0,
				detailInfo: {}, //接收的参数
				subscript: '0',
				detailData: {}
			};
		},
		onLoad(option) {
			if (option.detailInfo) {
				this.detailInfo = JSON.parse(decodeURIComponent(option.detailInfo))
				this.getOrder()
			}
			this.subscript = option.subscript

		},
		methods: {
			//获取订单详情列表
			async getOrder() {
				let that = this
				const data_back = await orderDetailMsgNew({
					id: that.detailInfo.id
				})
				const {
					code,
					data
				} = data_back
				if (code === 200) {
					that.detailData = data
				}
			},
			handlePreview(index){
				let that = this
				var pictureList = that.detailData.pictureList.map(item => { // item 获取到的图片地址
					return item.url;
				});
				uni.previewImage({
					current: index,
					urls: pictureList,
					loop: true
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0rpx 40rpx 160rpx;

		&-textarea {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 10rpx;
			border-bottom: 1rpx solid #E7E7E7;

			>view {
				font-size: 26rpx;
				font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
				font-weight: 400;
				color: #333333;
			}
		}

		&-photograph {
			padding: 30rpx 0rpx;

			&-photo {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				&-img {
					margin-top: 20rpx;
					margin-right: 20rpx;
					width: 210rpx;
					height: 210rpx;
				}

				&-img:nth-child(3n) {
					margin-right: 0rpx;
				}
			}
		}

		&-frequency {
			padding: 30rpx 0rpx;

				.video-box {
					margin-top: 20rpx;
					width: 373rpx;
					height: 210rpx;
				}
		}

		&-voice {
			padding: 30rpx 0rpx;

			&-audio {
				margin-top: 20rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				height: 68rpx;
			}
		}

		&-remarks {
			>view {
				margin-bottom: 20rpx;
			}
		}

		&-reject {
			margin-top: 30rpx;

			>view {
				display: flex;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				// font-weight: 700;
				color: #333333;

				>text {
					width: 6rpx;
					height: 36rpx;
					background: #FD0000;
					border-radius: 3rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
