<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 class="content-photograph-photo">
				<image class="content-photograph-photo-img" src="../../static/logo.png" mode="" v-for="(v ,index) in 5"
					:key="index"></image>
			</view>
		</view>
		<view class="content-frequency">
			<view class="">
				上传视频
			</view>
			<view v-for="(v ,index) in 2" :key="index">
				<video id="myVideo"
					src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu controls
					:show-fullscreen-btn='false'></video>
			</view>
		</view>
		<view class="content-voice">
			<view class="">
				语音描述
			</view>
			<view class="content-voice-audio">

			</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">驳回理由:沟通金额没有谈妥</view>
			<!-- <u--textarea v-model="detailData.value1" placeholder="请输入内容" disabled></u--textarea> -->
		</view>
		<view class="content-reject" v-if="subscript == 3 && subs== '1'">
			<view class="">
				<text style="background:#2C66FF"></text>该订单已提交退款,等待商家致电……
			</view>
			<u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea>
		</view>
		<view class="content-reject" v-if="subscript == 3 && subs== '2'">
			<view class="">
				<text></text>该订单已退款
			</view>
			<u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		orderDetailMsgNew
	} from '../../api/system/index.js'
	import apiBaseConfig from '@/config/index.js';
	export default {
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				scrollTopHeader: 0,
				detailInfo: {}, //接收的参数
				subscript: '0',
				subs: '1',
				detailData: {}
			};
		},
		onLoad(option) {
			if (option.detailInfo) {
				this.detailInfo = JSON.parse(decodeURIComponent(option.detailInfo))
				console.log(this.detailInfo, '结束')
				this.getOrder()
			}
			return
			this.subs = option.subs

		},
		methods: {
			//获取订单详情列表
			async getOrder() {
				let that = this
				const data_back = await orderDetailMsgNew({
					id: that.detailInfo.id
				})
				console.log(data_back, '订单详情')
				const {
					code,
					data
				} = data_back
				if (code === 200) {
					that.detailData = data
				}
				// orderDetailMsgNew({id:that.detailInfo.id}).then(res=>{
				// 	console.log('订单详情',res)
				// 	if(res.code == 200){
				// 		that.detailData = res.data
				// 	}
				// })
			},

		}
	}
</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;

			>view {
				display: flex;

				>video {
					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>
