<template>
	<div class="order-details">
		<title-block
			class="titile-d"
			:title="type === 'detail' ? '详情' : '确认订单'"
		>
			<template #left>
				<div>
					<image
						style="width: 112rpx; height: 52rpx"
						src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png"
						@click="back"
					></image>
				</div>
			</template>
		</title-block>
		<div class="content-list" v-if="listPaintings.length > 1">
			<div class="wrap1">*请注意确认寄存结束时间</div>
			<div class="wrap2">
				<div class="wrap2_1" :style="{ height: `${listHeight}rpx` }">
					<div
						:class="[
							'item',
							index === currentIndex ? 'active' : ''
						]"
						@click="itemClick(index)"
						v-for="(item, index) of listPaintings"
					>
						<div class="item_1">{{ index + 1 }}</div>
						<div class="item_2">
							<div class="item_2_1">
								<img
									:src="listPaintings[index].fileList1[0].url"
									alt=""
								/>
							</div>
							<div class="item_2_2">
								{{ listPaintings[index].artworkNum }}
							</div>
						</div>
						<div class="item_3">
							{{ listPaintings[index].artworkName }}
						</div>
						<div class="item_4">
							{{
								listPaintings[index].warehouseID
									? addressList.find(
											(x) =>
												x.ID ===
												listPaintings[index].warehouseID
									  ).address
									: ''
							}}
						</div>
						<div class="item_5">
							{{ listPaintings[index].endAt }}
						</div>
					</div>
				</div>
				<div class="wrap2_2" @click="expand">
					<div
						class="wrap2_2_1"
						v-if="listPaintings.length > 2"
						:style="{
							transform: `${isExpand ? 'rotate(180deg)' : ''}`
						}"
					>
						<img
							src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png"
							alt=""
						/>
					</div>
					<div class="wrap2_2_2">
						共计{{ listPaintings.length }}幅画作
					</div>
				</div>
			</div>
		</div>
		<scroll-view
			class="content-center"
			:style="{
				marginTop: `${contentListHeight + 10}px`,
				marginBottom: type === 'detail' ? '30rpx' : '180rpx'
			}"
			@scroll="scrollDetail"
			:scroll-into-view="scrollId"
			scroll-y="true"
		>
			<div
				class="content-scroll"
				v-for="(item, index) of listPaintings"
				:id="`item-${index}`"
			>
				<div class="painting-name" v-if="listPaintings.length > 1">
					<div class="wrap1">画作{{ index + 1 }}:</div>
					<div
						class="wrap2"
						style="display: none"
						@click="itemDelete"
					>
						删除
					</div>
				</div>
				<div class="content2">
					<u-upload
						:fileList="listPaintings[index].fileList1"
						@afterRead="
							(e) => {
								afterRead(e, index)
							}
						"
						@delete="
							(e) => {
								deletePic(e, index)
							}
						"
						name="6"
						multiple
						:maxCount="1"
						width="404rpx"
						height="306rpx"
					>
						<div
							style="
								width: 404rpx;
								height: 306rpx;
								background: #000;
								border-radius: 20rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
							"
						>
							<div style="margin-bottom: 14rpx">
								<image
									style="width: 38.32rpx; height: 38.2rpx"
									src="../../static/zu142@3x.png"
								></image>
							</div>
							<div style="font-size: 32rpx; color: #fff">
								上传画作图片
							</div>
						</div>
					</u-upload>
				</div>
				<div class="content3">
					<div class="prompt">*扫描自动填入</div>
					<div class="wrap1">
						<div class="wrap1_1">
							<div class="wrap1_1_1">画作编号</div>
							<div class="wrap1_1_2"></div>
							<div class="wrap1_1_3">
								<input
									style="color: #939393; font-size: 24rpx"
									disabled
									v-model="listPaintings[index].artworkNum"
									placeholder-style="color: #939393;font-size: 24rpx;"
									placeholder="请输入画作编号"
								/>
							</div>
							<div class="wrap1_1_4"></div>
						</div>
						<div class="wrap1_1">
							<div class="wrap1_1_1">画作名称</div>
							<div class="wrap1_1_2"></div>
							<div class="wrap1_1_3">
								<input
									style="color: #939393; font-size: 24rpx"
									disabled
									v-model="listPaintings[index].artworkName"
									placeholder-style="color: #939393;font-size: 24rpx;"
									placeholder="请输入画作名称"
								/>
							</div>
							<div class="wrap1_1_4"></div>
						</div>
						<div class="wrap1_1">
							<div class="wrap1_1_1">画家名称</div>
							<div class="wrap1_1_2"></div>
							<div class="wrap1_1_3">
								<input
									style="color: #939393; font-size: 24rpx"
									disabled
									v-model="listPaintings[index].artistName"
									placeholder-style="color: #939393;font-size: 24rpx;"
									placeholder="请输入画家名称"
								/>
							</div>
							<div class="wrap1_1_4"></div>
						</div>
						<div class="wrap1_1">
							<div class="wrap1_1_1">画作平尺数</div>
							<div class="wrap1_1_2"></div>
							<div class="wrap1_1_3">
								<input
									style="color: #939393; font-size: 24rpx"
									disabled
									v-model="
										listPaintings[index].artworkSquareSize
									"
									placeholder-style="color: #939393;font-size: 24rpx;"
									placeholder="请输入画作平尺数"
								/>
							</div>
						</div>
					</div>
					<div class="wrap2"></div>
				</div>
				<div class="content4">
					<div class="wrap1">
						<div class="wrap1_1">
							<div class="wrap1_1_1">寄存地址</div>
							<div class="wrap1_1_2"></div>
							<div class="wrap1_1_3">
								<input
									style="color: #939393; font-size: 24rpx"
									disabled
									:value="
										listPaintings[index].warehouseID
											? addressList.find(
													(x) =>
														x.ID ===
														listPaintings[index]
															.warehouseID
											  ).address
											: ''
									"
									placeholder-style="color: #939393;font-size: 24rpx;"
									placeholder="请选择寄存地址"
								/>
							</div>
							<div class="wrap1_1_4"></div>
							<!--              <div  class="wrap1_1_5">
                <image src="../../static/zu611@3x.png"></image>
              </div>-->
						</div>
						<div class="wrap1_1">
							<div class="wrap1_1_1">寄存时长</div>
							<div class="wrap1_1_2"></div>
							<div class="wrap1_1_3">
								<input
									style="color: #939393; font-size: 24rpx"
									:value="listPaintings[index].endAt"
									disabled
									placeholder-style="color: #939393;font-size: 24rpx;"
									placeholder="请选择寄存时长"
								/>
							</div>
							<!--              <div  class="wrap1_1_5">
                <image src="../../static/zu612@3x.png"></image>
              </div>-->
						</div>
					</div>
					<div class="wrap2"></div>
				</div>
				<!--        <div class="content7" @click="addPainting">
          <div class="wrap1">
            <div class="horizontal"></div>
            <div class="vertical"></div>
          </div>
          <div class="wrap2">添加</div>
        </div>-->
			</div>
		</scroll-view>

		<div class="content5" v-if="type !== 'detail'">
			<div
				class="wrap4"
				v-show="isExpand1"
				:style="{ top: `-${152 * listPaintings.length}rpx` }"
			>
				<div class="item" v-for="(item, index) in listPaintings">
					<div class="item_1">{{ index + 1 }}</div>
					<div class="item_2">{{ item.artworkNum }}</div>
					<div class="item_3">{{ item.artworkName }}</div>
					<div class="item_4">¥ {{ item.expectedPayment }}</div>
				</div>
			</div>
			<div
				class="wrap3"
				@click="expand1"
				:style="{ transform: `${isExpand1 ? '' : 'rotate(180deg)'}` }"
			>
				<img
					src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png"
					alt=""
				/>
			</div>
			<div class="wrap1">
				<div class="wrap1_1">*仅微信付款</div>
				<div class="wrap1_2">预计 ¥{{ totalMoney || '0' }}</div>
			</div>
			<div class="wrap2" @click="signContract">付款</div>
		</div>
		<u-popup
			:round="15"
			:show="show_2"
			mode="bottom"
			@open="
				() => {
					show_2 = true
				}
			"
		>
			<div class="poup1">
				<div class="content1">
					<div class="wrap1">更换您的寄存地址</div>
					<div @click="show_2 = false" class="wrap2">
						<image
							src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"
						></image>
					</div>
				</div>
				<div class="content2"></div>
				<div class="content3">
					<div
						v-for="(item, index) in addressList"
						@click="selectAddress(item)"
						:class="[
							listPaintings[currentIndex].warehouseID === item.ID
								? 'active'
								: ''
						]"
						:key="index"
						class="wrap1"
					>
						<div class="wrap1_1">{{ item.address }}</div>
						<div class="wrap1_2">*剩余{{ item.leftNum }}位置</div>
					</div>
					<!--          <div class="wrap1 active">
                      <div class="wrap1_1">某某某某某某某地方</div>
                      <div class="wrap1_2">剩余12位置</div>
                    </div>-->
					<!--          <div class="wrap1 disabled">
                      <div class="wrap1_1">某某某某某某某地方</div>
                      <div class="wrap1_2">*已满员</div>
                    </div>-->
				</div>
				<div class="content2"></div>
				<div class="content6" @click="confirmAddress">
					<div class="wrap1">确定</div>
				</div>
			</div>
		</u-popup>

		<!--    <u-popup :round="15" :show="show_1" mode="bottom"  @open="()=>{show_1=true}">
          <div class="poup">
            <div class="content1" style="margin-top: 20rpx">
              <div class="wrap1">寄存时长</div>
              <div @click="show_1=false" class="wrap2">
                <image
                    src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
              </div>

            </div>
            <div class="content2"></div>
            <div class="content7" @click="show = true">
              <u-datetime-picker
                  :show="show"
                  @confirm="confirmDate"
                  mode="date"
                  @cancel="show=false"
                  :minDate="minDate"
              ></u-datetime-picker>
              <u&#45;&#45;input
                  readonly
                  placeholder="点击选择"
                  border="surround"
                  v-model="listPaintings[currentIndex].endAt"
              ></u&#45;&#45;input>
            </div>


            &lt;!&ndash;        <div class="content2"></div>
                    <div class="content4">起始日期</div>
                    <div class="content5">
                      <div class="wrap1">年份</div>
                      <div class="wrap2">月</div>
                      <div class="wrap3">日</div>
                    </div>&ndash;&gt;
            &lt;!&ndash;        <div style="margin-left: -30rpx;margin-right: -30rpx">
                      <picker-view indicator-class="test" :value="value" @change="changeData" class="picker-view">
                        <picker-view-column>
                          <view style="display: flex;align-items: center;justify-content: center" class="item"
                                :class="[isDateFont(item,0)?'fontDate':'']" v-for="(item,index) in years" :key="index">{{ item }}年
                          </view>
                        </picker-view-column>
                        <picker-view-column>
                          <view style="display: flex;align-items: center;justify-content: center" class="item"
                                :class="[isDateFont(item,1)?'fontDate':'']" v-for="(item,index) in months" :key="index">{{ item }}月
                          </view>
                        </picker-view-column>
                        <picker-view-column>
                          <view style="display: flex;align-items: center;justify-content: center" class="item"
                                :class="[isDateFont(item,2)?'fontDate':'']" v-for="(item,index) in days" :key="index">{{ item }}日
                          </view>
                        </picker-view-column>
                      </picker-view>
                    </div>
                    <div class="content2"></div>&ndash;&gt;
            <div class="content6" @click="confirmCycle">
              <div class="wrap1">确定</div>
            </div>
          </div>
        </u-popup>-->
		<u-picker
			:show="show_1"
			ref="uPicker"
			:columns="columns"
			@confirm="confirmDate"
			@close="show_1 = false"
			@change="changeHandler"
		></u-picker>
		<u-loading-page
			bgColor="rgba(0,0,0,0.5)"
			:loading="loading"
			loading-text="正在调起微信付款..."
		></u-loading-page>
	</div>
</template>
<script>
import http from '@/http/api'
import { postDataByParams } from '../../http/service'
import { type } from '../../uni_modules/uni-forms/components/uni-forms/utils'

export default {
	name: 'order-details',
	data() {
		const date = new Date()
		const years = []
		const year = date.getFullYear()
		const months = []
		const month = date.getMonth() + 1
		const days = []
		const day = date.getDate()
		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i)
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i)
		}
		for (let i = 1; i <= 31; i++) {
			days.push(i)
		}
		return {
			itemHeight: 0,
			scrollId: 'item-0',
			columns: [[180], ['*'], [1, 2, 3, 4, 5], ['='], [180]],
			currentIndex: 0,
			listPaintings: [
				{
					expectedPayment: '',
					fileList1: [],
					artworkNum: '',
					artworkName: '',
					artistName: '',
					artworkSquareSize: '',
					warehouseID: '',
					endAt: ''
				}
			],
			contentListHeight: 0,
			isExpand: false,
			isExpand1: false,
			listHeight: 308,
			minDate: '',
			type: '',
			show: false,
			value1: '',
			loading: false,
			fileList1: [],
			dayMoney: '',
			expectedPayment: '',
			warehouseID: '',
			cycleId: '',
			cycleList: [],
			addressList: [],
			info: {},
			show_2: false,
			data: [],
			show_1: false,
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			day,
			value: [9999, month - 1, day - 1],
			visible: true,
			url: '',
			status: 0
		}
	},
	computed: {
		totalMoney() {
			return this.listPaintings.reduce((total, item) => {
				return total + Number(item.expectedPayment)
			}, 0)
		},
		currentArtworkSquareSize() {
			if (
				this.currentIndex >= 0 &&
				this.currentIndex < this.listPaintings.length
			) {
				return this.listPaintings[this.currentIndex].artworkSquareSize
			}
			return null
		},
		currentEndAt() {
			if (
				this.currentIndex >= 0 &&
				this.currentIndex < this.listPaintings.length
			) {
				return this.listPaintings[this.currentIndex].endAt
			}
			return null
		}
	},
	watch: {
		currentArtworkSquareSize(newValue, oldValue) {
			if (newValue !== oldValue) {
				this.obtainAmount()
			}
		},
		currentEndAt(newValue, oldValue) {
			console.log(newValue, oldValue)
			if (newValue !== oldValue) {
				this.obtainAmount()
			}
		}
	},
	onLoad(load) {
		if (load.url) {
			this.url = load.url
			this.getDetailUrl()
		}
		if (load.type === 'detail') {
			this.getData()
			this.type = load.type
		}

		if (load.type === 'scan') {
			this.listPaintings = uni.getStorageSync('scanlist')?.map((x) => {
				return {
					...x,
					expectedPayment: '',
					warehouseID: '',
					fileList1: [{ url: x.artworkImg }]
				}
			})
		}
		this.listPaintings = uni.getStorageSync('orderingInfo').listPaintings
	},
	mounted() {
		this.getCycle()
		if (this.$mp.query.url) {
			this.url = this.$mp.query.url
			this.getDetailUrl()
		}
		this.getAddress()
		this.$nextTick(async () => {
			this.itemHeight = await this.getElementHeight('.content-scroll')
			this.getheight()
		})
	},
	methods: {
		getElementHeight(selector) {
			return new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery()
				query
					.select(selector)
					.boundingClientRect((data) => {
						if (data) {
							resolve(data.height) // 成功获取高度时,通过 Promise 返回
						} else {
							reject(new Error('无法获取元素高度')) // 如果找不到元素或获取高度失败时,通过 Promise 返回错误
						}
					})
					.exec()
			})
		},
		async scrollDetail(event) {
			const scrollTop = event.detail.scrollTop // 获取当前滚动位置
			const totalHeight = this.listPaintings.length * this.itemHeight
			const scrollPercent = (scrollTop / totalHeight) * 100
			const index = Math.floor(scrollTop / this.itemHeight) // 计算索引
			/* console.log(`滚动了 ${scrollPercent}%`);
       console.log(`滚动到了第 ${index} 个元素的位置`);*/
			this.currentIndex = index
		},
		async getData() {
			const data1 = {
				ID: Number(this.$mp.query.ID)
			}
			const res1 = await postDataByParams(
				'/api/v2/warehouse/detail',
				data1
			)
			if (res1.code === 200) {
				this.info = res1.data
			}
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values,
				index,
				picker = this.$refs.uPicker
			} = e
			if (columnIndex === 2) {
				picker.setColumnValues(this.columns.length - 1, [
					this.columns[2][e.index] * this.columns[0][0]
				])
			}
		},
		itemDelete() {
			this.listPaintings.splice(this.currentIndex, 1)
			this.currentIndex = 0
			if (this.listPaintings.length === 1) {
				this.contentListHeight = 0
			}
			this.$nextTick(() => {
				this.getheight()
			})
		},
		itemClick(index) {
			this.scrollId = `item-${index}`
			this.currentIndex = index
		},
		addPainting() {
			this.listPaintings.push({
				expectedPayment: '',
				fileList1: [],
				artworkNum: '',
				artworkName: '',
				artistName: '',
				artworkSquareSize: '',
				warehouseID: this.listPaintings[0].warehouseID,
				endAt: this.listPaintings[0].endAt
			})
			this.$nextTick(() => {
				this.getheight()
			})
			this.currentIndex = this.currentIndex + 1
		},
		getheight() {
			let query = uni.createSelectorQuery().in(this)
			query
				.select('.content-list')
				.boundingClientRect((data) => {
					if (data) {
						let query = uni.createSelectorQuery().in(this)
						query
							.select('.titile-d')
							.boundingClientRect((data1) => {
								if (data1) {
									this.contentListHeight =
										data.bottom - data1.bottom
								}
							})
							.exec()
					}
				})
				.exec()
		},
		expand1() {
			this.isExpand1 = !this.isExpand1
		},
		expand() {
			if (this.isExpand) {
				this.listHeight = 154 * 2
			} else {
				this.listHeight =
					154 *
					(this.listPaintings.length <= 7
						? this.listPaintings.length
						: 7)
			}
			this.isExpand = !this.isExpand
		},
		timestampToDateString(timestamp) {
			const date = new Date(timestamp) // 把时间戳乘以1000转换为Date对象需要的毫秒数
			const year = date.getFullYear()
			const month = ('0' + (date.getMonth() + 1)).slice(-2) // 月份是从0开始的,所以加1,用slice保证格式是2位数
			const day = ('0' + date.getDate()).slice(-2) // 用slice保证格式是2位数
			return year + '-' + month + '-' + day
		},
		confirmDate(data) {
			this.listPaintings[this.currentIndex].endAt =
				data.value[data.value.length - 1]
			this.obtainAmount()
			this.show_1 = false
		},
		openShow1() {
			if (!this.listPaintings[this.currentIndex].artworkSquareSize) {
				uni.showToast({
					title: '请先填写画作平尺数',
					duration: 2000,
					icon: 'none'
				})
				return
			}
			this.show_1 = true
		},
		uploadFilePromise(url, type = null) {
			return new Promise((resolve) => {
				uni.uploadFile({
					url: http.baseUrl + '/api/wxuser/uploadpic',
					filePath: url,
					name: 'file',
					success: (res) => {
						const { path } = JSON.parse(res.data).data
						resolve(path)
					}
				})
			})
		},
		deletePic() {
			this.fileList1 = []
		},
		// 新增图片
		async afterRead(event, index) {
			// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this.listPaintings[index].fileList1.length
			lists.map((item) => {
				this.listPaintings[index].fileList1.push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(
					lists[i].url,
					'check'
				)
				let item = this.listPaintings[index].fileList1[fileListLen]
				this.listPaintings[index].fileList1.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				)
				fileListLen++
			}
		},
		async signContract() {
			this.loading = true
			const data1 = {
				batchId: uni.getStorageSync('orderingInfo').transactionId
			}
			const res1 = await postDataByParams(
				'/api/v2/warehouse/create',
				data1
			)
			if (res1.code === 200) {
				uni.login({
					provider: 'weixin',
					success: async ({ code }) => {
						const res3 = await this.$api.login.getOpenId({ code })
						if (res3.code === 200) {
							const res2 = await postDataByParams(
								'/api/v2/warehouse/paid',
								{
									ID: res1.data.ID
								}
							)
							if (res2.code === 200) {
								uni.requestPayment({
									...res2.data,
									fail: (res) => {
										this.loading = false
									},
									success: () => {
										this.loading = false
										uni.navigateTo({
											url: `/pages/paySuccess/paySuccess?ID=${res1.data.ID}`
										})
									}
								})
							} else {
								this.loading = false
								this.$common.msgToast(res2.msg)
							}
						} else {
							this.$common.msgToast(res3.msg)
						}
					}
				})
			}
		},
		async obtainAmount() {
			uni.setStorageSync(
				'endAt',
				new Date(
					Date.now() +
						this.listPaintings[this.currentIndex].endAt * 86400000
				)
					?.toISOString()
					?.slice(0, 10)
			)
			const data = {
				orders: [
					{
						artworkSquareSize: Number(
							this.listPaintings[this.currentIndex]
								.artworkSquareSize
						),
						endAt: new Date(
							Date.now() +
								this.listPaintings[this.currentIndex].endAt *
									86400000
						)
							?.toISOString()
							?.slice(0, 10)
					}
				]
			}
			const res = await postDataByParams(
				'/api/v2/warehouse/calculate',
				data
			)
			if (res.code === 200) {
				this.listPaintings[this.currentIndex].expectedPayment =
					res.data.orders?.[0]?.money
			}
		},
		confirmCycle() {
			this.show_1 = false
		},
		confirmAddress() {
			this.show_2 = false
		},
		selectAddress(item) {
			this.listPaintings[this.currentIndex].warehouseID = item.ID
		},
		selectionPeriod(item) {
			this.cycleId = item.ID
		},
		async getCycle() {
			const res = await postDataByParams('/api/warehouse/cycle')
			if (res.code === 200) {
				this.cycleList = res.data.data
			}
		},
		async getAddress() {
			const res = await postDataByParams('/api/warehouse/address')
			if (res.code === 200) {
				this.addressList = res.data.data
			}
		},
		async getDetailUrl() {
			const data = {
				url: this.url
			}
			const res = await postDataByParams('/api/warehouse/ocr', data)
			if (res.code === 200) {
				this.info = res.data
				this.fileList1 = [{ url: this.info.artworkImg }]
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		},
		isDateFont(item, num) {
			if (Array.isArray && this.data.length === 3) {
				return this.data[num] === item
			}
		},
		changeData(e) {
			this.data = [
				e.detail.value[0] + 1990,
				e.detail.value[1] + 1,
				e.detail.value[2] + 1
			]
		},
		back() {
			if (this.type === 'detail') {
				uni.switchTab({ url: '/pages/home/index' })
			} else {
				uni.navigateBack({ delta: 2 })
			}
		}
	}
}
</script>
<style scoped lang="scss">
.fontDate {
	color: #fff;
}

/deep/ .pickerSelected {
	color: #ffffff !important;
	z-index: 2;
}

/deep/ .test {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -1;
	background: #a9d897;
	color: #fff;
	height: 62rpx;
}

uni-picker-view {
	display: block;
}

uni-picker-view .uni-picker-view-wrapper {
	display: flex;
	position: relative;
	overflow: hidden;
	height: 100%;
	background-color: white;
}

uni-picker-view[hidden] {
	display: none;
}

picker-view {
	width: 100%;
	// height: 600upx;
	height: 400rpx;
	margin-top: 20 upx;
}

.item {
	line-height: 100 upx;
	text-align: center;
}

.order-details {
	background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png');
	box-sizing: border-box;
	overflow: hidden;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	.content-list {
		top: 130rpx;
		z-index: 999;
		position: absolute;
		width: 686rpx;
		margin-top: 34rpx;
		text-align: right;
		.wrap1 {
			margin-bottom: 10rpx;
			font-size: 24rpx;
			color: rgba(78, 150, 77, 1);
		}
		.wrap2 {
			box-sizing: border-box;

			border-radius: 20rpx;
			background-color: #fff;
			padding-left: 18rpx;
			padding-right: 32rpx;
			.wrap2_2 {
				height: 60rpx;
				position: relative;
				.wrap2_2_2 {
					line-height: 60rpx;
					color: rgba(118, 196, 88, 1);
					font-size: 24rpx;
				}
				.wrap2_2_1 {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-repeat: no-repeat;
					background-size: cover;
					img {
						width: 30rpx;
						height: 16rpx;
					}
				}
			}
			.wrap2_1 {
				z-index: 999;
				overflow-y: scroll;
				.item {
					height: 154rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: 10rpx;
					padding-right: 10rpx;
					&.active {
						background-color: rgb(245, 251, 242);
					}
					.item_5 {
						width: 134rpx;
						color: rgba(98, 98, 98, 1);
						font-size: 24rpx;
					}
					.item_4 {
						margin-right: 28rpx;
						width: 192rpx;
						color: rgba(98, 98, 98, 1);
						font-size: 24rpx;
					}
					.item_3 {
						margin-right: 48rpx;
						width: 78rpx;
						color: rgba(98, 98, 98, 1);
						font-size: 24rpx;
					}
					.item_2 {
						margin-right: 24rpx;
						width: 68rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						.item_2_2 {
							color: rgba(147, 147, 147, 1);
							font-size: 20rpx;
						}
						.item_2_1 {
							background-color: #000;
							width: 68rpx;
							height: 68rpx;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
					.item_1 {
						margin-right: 18rpx;
						color: rgba(88, 166, 107, 1);
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 36rpx;
						height: 36rpx;
						border: 5rpx solid rgba(118, 196, 88, 1);
						border-radius: 50%;
						background: transparent;
					}
				}
			}
		}
	}

	& > .content5 {
		align-items: center;
		left: 0;
		background: #fff;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		height: 172rpx;
		display: flex;
		.wrap4 {
			z-index: 999;
			width: 100%;
			background-color: #fff;
			position: absolute;
			.item {
				height: 152rpx;
				display: flex;
				align-items: center;
				.item_4 {
					margin-right: 64rpx;
					margin-left: auto;
					color: rgba(118, 196, 88, 1);
					font-size: 24rpx;
					font-weight: bold;
				}
				.item_3 {
					width: 100rpx;
					margin-left: 48rpx;
					color: rgba(98, 98, 98, 1);
					font-size: 24rpx;
				}
				.item_2 {
					width: 100rpx;
					margin-left: 34rpx;
					color: rgba(98, 98, 98, 1);
					font-size: 24rpx;
				}
				.item_1 {
					margin-left: 56rpx;
					color: rgba(88, 166, 107, 1);
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 36rpx;
					height: 36rpx;
					border: 5rpx solid rgba(118, 196, 88, 1);
					border-radius: 50%;
					background: transparent;
				}
			}
		}
		.wrap3 {
			margin-left: 32rpx;
			img {
				width: 30rpx;
				height: 16rpx;
			}
		}
		.wrap2 {
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 392rpx;
			height: 56rpx;
			color: #fff;
			font-size: 32rpx;
			background: #76c458;
		}

		.wrap1 {
			margin-left: 18rpx;
			margin-right: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: start;

			.wrap1_1 {
				color: #939393;
				font-size: 16rpx;
			}

			.wrap1_2 {
				font-size: 32rpx;
				color: #76c458;
			}
		}
	}

	.poup1 {
		padding-top: 28rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 72rpx;

		& > .content6 {
			margin-top: 26rpx;
			display: flex;
			justify-content: center;

			.wrap1 {
				color: #fff;
				font-size: 28rpx;
				width: 436rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #76c458;
				border-radius: 30rpx;
			}
		}

		& > .content3 {
			margin-bottom: 70rpx;

			.wrap1 {
				margin-bottom: 18rpx;
				border-radius: 32rpx;
				height: 80rpx;
				box-sizing: border-box;
				border: 2px solid #76c458;
				padding-left: 44rpx;
				padding-right: 42rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.wrap1_2 {
					color: #76c458;
					font-size: 26rpx;
				}

				.wrap1_1 {
					font-size: 28rpx;
					color: #000;
				}

				&.disabled {
					border: none;
					background: #d8d8d8;

					.wrap1_1 {
						color: #626262;
						font-size: 28rpx;
					}

					.wrap1_2 {
						color: #626262;
						font-size: 16rpx;
					}
				}

				&.active {
					background: #76c458;

					.wrap1_2 {
						color: #fff;
						font-size: 26rpx;
					}

					.wrap1_1 {
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
		}

		& > .content1 {
			margin-bottom: 36rpx;
			display: flex;
			justify-content: space-between;

			.wrap1 {
				color: #000;
				font-size: 32rpx;
			}

			.wrap2 {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		& > .content2 {
			margin-bottom: 36rpx;
			height: 1rpx;
			background: #626262;
		}
	}

	.poup {
		margin-bottom: 72rpx;
		padding-top: 28rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		& > .content7 {
		}
		& > .content3 {
			display: flex;
			flex-wrap: wrap;

			.wrap4 {
				margin-bottom: 40rpx;
				border-radius: 32rpx;
				margin-top: 30rpx;
				width: 220rpx;
				height: 84rpx;
				background: #d8d8d8;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.wrap4_1 {
					color: #626262;
					font-size: 28rpx;
				}

				.wrap4_2 {
					color: #be7e7e;
					font-size: 16rpx;
				}
			}

			.wrap1 {
				box-sizing: border-box;
				flex-shrink: 0;
				margin-right: 16rpx;
				font-size: 28rpx;
				border-radius: 32rpx;
				border: 2rpx solid #76c458;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				height: 84rpx;

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

				&.active {
					color: #fff;
					background: #76c458;
				}
			}
		}

		& > .content6 {
			margin-top: 26rpx;
			display: flex;
			justify-content: center;

			.wrap1 {
				color: #fff;
				font-size: 28rpx;
				width: 436rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #76c458;
				border-radius: 30rpx;
			}
		}

		& > .content5 {
			margin-top: 36rpx;
			height: 66rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #bababa;
			border-top: 1rpx solid #bababa;

			.wrap1 {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-grow: 1;
				color: #4e964d;
				font-size: 28rpx;
			}

			.wrap2 {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-grow: 1;
				color: #4e964d;
				font-size: 28rpx;
			}

			.wrap3 {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-grow: 1;
				color: #4e964d;
				font-size: 28rpx;
			}
		}

		& > .content4 {
			font-size: 32rpx;
			color: #000;
		}

		& > .content2 {
			margin-bottom: 36rpx;
			height: 1rpx;
			background: #626262;
		}

		& > .content1 {
			margin-bottom: 36rpx;
			display: flex;
			justify-content: space-between;

			.wrap1 {
				color: #000;
				font-size: 32rpx;
			}

			.wrap2 {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.content-center {
		overflow-y: scroll;

		.content-scroll {
			.painting-name {
				margin-top: 48rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;
				.wrap1 {
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
				}
				.wrap2 {
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(118, 196, 88, 1);
					border-radius: 40rpx;
					background-color: #fff;
					width: 148rpx;
					height: 56rpx;
					border: 1px solid rgba(118, 196, 88, 1);
				}
			}
			& > .content4 {
				margin-bottom: 24rpx;
				margin-top: 60rpx;

				.wrap1 {
					border: 1rpx dashed #dfe9f0;
					background-color: #fff;

					.wrap1_1 {
						position: relative;
						height: 114rpx;
						display: flex;
						align-items: center;

						.wrap1_1_4 {
							left: 50%;
							transform: translateX(-50%);
							bottom: 0;
							position: absolute;
							height: 0;
							width: 636rpx;
							border-bottom: 0.5px solid #626262;
						}

						.wrap1_1_5 {
							right: 42rpx;
							position: absolute;

							image {
								width: 46.34rpx;
								height: 20rpx;
							}
						}

						.wrap1_1_2 {
							margin-right: 36rpx;
							width: 0;
							height: 66rpx;
							border-left: 0.5px solid #626262;
						}

						.wrap1_1_1 {
							width: 210rpx;
							padding-left: 32rpx;

							color: #626262;
							font-size: 24rpx;
						}
					}
				}
			}

			& > .content3 {
				margin-top: 60rpx;

				.prompt {
					color: #4e964d;
					font-size: 16rpx;
					margin-bottom: 4rpx;
				}

				.wrap1 {
					border: 1rpx dashed #dfe9f0;
					background-color: #fff;

					.wrap1_1 {
						position: relative;
						height: 114rpx;
						display: flex;
						align-items: center;

						.wrap1_1_4 {
							left: 50%;
							transform: translateX(-50%);
							bottom: 0;
							position: absolute;
							height: 0;
							width: 636rpx;
							border-bottom: 0.5px solid #626262;
						}

						.wrap1_1_2 {
							margin-right: 36rpx;
							width: 0;
							height: 66rpx;
							border-left: 0.5px solid #626262;
						}

						.wrap1_1_1 {
							width: 210rpx;
							padding-left: 32rpx;

							color: #626262;
							font-size: 24rpx;
						}
					}
				}
			}

			& > .content2 {
				display: flex;
				justify-content: center;

				image {
					width: 404rpx;
					height: 306rpx;
				}
			}
			& > .content7 {
				margin: 0 auto;
				background-color: #fff;
				border-radius: 40rpx;
				width: 228rpx;
				height: 56rpx;
				border: 3rpx solid rgba(118, 196, 88, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				.wrap2 {
					color: rgba(118, 196, 88, 1);
					font-size: 28rpx;
				}
				.wrap1 {
					margin-right: 20rpx;
					box-sizing: border-box;
					width: 32rpx;
					height: 32rpx;
					border: 3rpx solid rgba(118, 196, 88, 1);
					border-radius: 50%;
					background: transparent;

					position: relative;
					.horizontal {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 18rpx;
						height: 2rpx;
						background-color: rgba(118, 196, 88, 1);
					}

					.vertical {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 2rpx;
						height: 18rpx;
						background-color: rgba(118, 196, 88, 1);
					}
				}
			}
		}
	}
}
</style>