<template>
	<view>
		<view class="goods-info">
			<view class="goods">
				<image v-if="record.image" :src="record.image" class="equipment-image" mode="aspectFit"></image>
				<image v-else src="../../static/goods/battery.png" class="equipment-image" mode="aspectFit"></image>
				<view class="info">
					<text class="goods-name">{{ record.equipmentName }}</text>
					<text class="goods-desc">归属门店：{{ record.merchantName }}</text>
					<text class="goods-desc">电池型号：{{ record.batteryModel }}</text>
					<text class="selling-point">{{ record.sellingPoint }}</text>
				</view>
			</view>
		</view>
		<view class="order">
			<block v-if="record.equipmentCategory === '10'">
				<view class="title">
					<text>合计总金额</text>
					<text>￥{{ record.batteryPrice + record.batteryInsurance }}元</text>
				</view>
				<!-- <u-cell-group>
					<u-cell-item title="电池租金" :border-bottom="false" hover-class="none" :value="record.batteryRent"></u-cell-item>
					<u-cell-item title="电池押金" :border-bottom="false" hover-class="none" :value="record.batteryDeposit"></u-cell-item>
					<u-cell-item title="电池保险" :border-bottom="false" hover-class="none" :value="record.batteryInsurance"></u-cell-item>
				</u-cell-group> -->
			</block>
			<block v-if="record.equipmentCategory === '20'">
				<view class="title">
					<text>合计总金额</text>
					<text>￥{{ (record.downPayment).toFixed(2) }}元</text>
				</view>
				<view class="fenqi">
					<view class="item">
						<view class="name">销售价格</view>
						￥{{ record.batteryPrice }} 元
					</view>
					<view class="item">
						<view class="name">首付款</view>
						￥{{ record.downPayment }} 元
					</view>
					<view class="item">
						<view class="name">余额分期期数</view>
						{{ record.periods }} 期
						<!-- <u-number-box :min="6" :max="36" :value="record.periods" :step="6" @change="onChangeStepper($event)"  /> -->
					</view>
					<view class="item">
						<view class="name">每期还款</view>
						￥{{ record.repayment }} 元
					</view>
					<view class="item">
						<view class="name">每期手续费</view>
						￥{{ record.serviceCharges }} 元
					</view>
					<view class="item">
						<view class="name">电动车保险</view>
						<view>￥{{ record.batteryInsurance }}元</view>
					</view>
				</view>
			</block>
			<block v-if="record.equipmentCategory === '30'">
				<view class="title">
					<text>合计总金额</text>
					<text>￥{{ (record.batteryRent + record.batteryDeposit + record.batteryInsurance).toFixed(2) }}元</text>
				</view>
				<u-cell-group>
					<u-cell-item :title="`租金(按${record.periodsType == 0 ? '周' : '月'})`" :border-bottom="false"
						hover-class="none" :value="record.batteryRent">元</u-cell-item>
					<u-cell-item title="分期期数" :border-bottom="false" hover-class="none"
						:value="record.periods">期</u-cell-item>
					<u-cell-item title="押金" :border-bottom="false" hover-class="none"
						:value="record.batteryDeposit">元</u-cell-item>
					<u-cell-item title="保险" :border-bottom="false" hover-class="none"
						:value="record.batteryInsurance">元</u-cell-item>
				</u-cell-group>
			</block>
			<block v-if="record.equipmentCategory === '40'">
				<view class="title">
					<text>合计总金额</text>
					<text>￥{{ (record.batteryRent + record.batteryDeposit + record.batteryInsurance).toFixed(2) }}元</text>
				</view>
				<view class="fenqi">
					<view class="item">
						<view class="name">电动车租金</view>
						￥{{ record.batteryRent }} 元
					</view>
					<view class="item">
						<view class="name">电动车押金</view>
						￥{{ record.batteryDeposit }} 元
					</view>
					<view class="item">
						<view class="name">电动车保险</view>
						{{ record.batteryInsurance }} 元
					</view>

				</view>
				<!-- <u-cell-group>
					<u-cell-item title="电动车租金" :border-bottom="false" hover-class="none" :value="`￥${record.batteryRent} 元`"></u-cell-item>
					<u-cell-item title="电动车押金" :border-bottom="false" hover-class="none" :value="record.batteryDeposit"></u-cell-item>
					<u-cell-item title="电动车保险" :border-bottom="false" hover-class="none" :value="record.batteryInsurance"></u-cell-item>
				</u-cell-group> -->
			</block>

			<view class="xieyi">
				<checkbox-group @change="onAgree" style="display: flex; align-items: center;">
					<checkbox :checked="agree" />我已阅读并同意<div class="xieyi-text" @click="showXieyi(64)">《租赁合同》</div>与<div
						class="xieyi-text" @click="showXieyi(51)">《隐私协议》</div>
				</checkbox-group>
			</view>
		</view>
		<view class="submit">
			<u-input v-model="dealerPhone" :disabled="disabled" placeholder="请输入推荐人手机号" />
		</view>
		<view class="submit">
			<image style="width: 7rem;margin: 0 auto;" @click="onBuy" src="@/static/zhimamianya.png" mode="widthFix"></image>
			<!-- <u-button type="primary" :disabled="!agree" @click="onBuy">立即下单</u-button> -->
		</view>
		<!-- <view class="submit">
			<u-button type="success" :disabled="agree" @click="copyCode(record.equipmentCode)">复制设备编号</u-button>
		</view> -->
	</view>
</template>

<script>
	import {
		userId
	} from '@/config.js';
	import {
		getEquipmentGoods
	} from '@/websoft/api/equipment-goods.js'
	import {
		getUser
	} from '@/websoft/api/user.js'
	import {
		addOrder,
		freeze,
		removeOrder,
		checkFreeze
	} from '@/websoft/api/order.js'
	import {
		dateFormat
	} from '@/utils/util.js'
	import {
		createOrderNo
	} from '@/utils/util.js'
	import store from '../../store';
	import {
		payQuery
	} from '@/websoft/api/payment.js'
	export default {
		components: {
			// Search
		},
		data() {
			return {
				record: {},
				// 正在加载中
				isLoading: true,
				// 当前选择的设备ID
				goodsId: null,
				show: true,
				mode: 'range',
				month: 6,
				agree: false,
				dealerPhone: '',
				price: {
					batteryRent: 300,
					batteryDeposit: 300,
					batteryInsurance: 0
				},

			}
		},
		onLoad(option) {
			const app = this
			// 记录当前选择的门店ID
			app.goodsId = option.goodsId
			// 获取设备列表
			app.getEquipment()
		},
		onShow() {
			var time = new Date().getTime() + 60 * 60 * 1000 * 24
			const expirationTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(time))
			// console.log("time: ", time);
			// console.log("expirationTime: ", expirationTime);
			payQuery(752).then(res => {
				console.log("res123: ", res);
			})


		},
		methods: {
			getEquipment() {
				const app = this
				const {
					goodsId
				} = this
				getEquipmentGoods(goodsId).then(res => {
					app.record = res.data
					console.log("res: ", app.record);
				})
			},
			onChangeStepper({
				value
			}) {
				this.month = value
			},
			change(e) {
				console.log(e);
			},
			onInput(month) {
				this.month = month
			},
			onAgree() {
				this.agree = !this.agree
			},
			showXieyi(xyId) {
				this.$navTo('pages/help/xieyi?id=' + xyId)
			},
			copyCode(text) {
				// #ifndef H5
				console.log("text: ", text);
				uni.setClipboardData({
					text: text,
					success: (result) => {
						this.$success("复制成功")
					}
				})
				// #endif
				// #ifdef H5
				let textarea = document.createElement("textarea")
				textarea.value = text
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, info.length)
				uni.showToast({ //提示
					title: '复制成功'
				})
				result = document.execCommand("copy")
				textarea.remove()
				// #endif
				//     copy() {
				//                 let result
				//                 // #ifndef H5
				//                 //uni.setClipboardData方法就是讲内容复制到粘贴板
				//                 uni.setClipboardData({
				//                     data: this.downUrl.url, //要被复制的内容
				//                     success: () => { //复制成功的回调函数
				//                         uni.showToast({ //提示
				//                             title: '复制成功'
				//                         })
				//                     }
				//                 });
				//                 // #endif


				//             }
			},
			async onBuy() {
				const app = this
				if(!this.agree){
					app.$error("请先同意租赁合同和隐私协议！")
					return
				}
				const {
					record,
					dealerPhone
				} = this
				let total = 0.0
				uni.showLoading({
				})
				// 未登录状态
				if (!uni.getStorageSync('userId')) {
					app.$error('请先登录', function() {
						app.$navTo('pages/login/login');
					});
					return false;
				}
				const userRes = await getUser()
				const user = userRes.data

				
				if(record.equipmentCategory == 10) {
					total = record.batteryPrice
				}else if(record.equipmentCategory == 20) {
					total = record.downPayment + record.serviceCharges
				}else if(record.equipmentCategory == 30 || record.equipmentCategory == 40){
					total = record.batteryRent
				}
				total = total.toFixed(2)

				const testTotal = 0.01
				var time = new Date().getTime() + 60 * 60 * 1000 * 24
				const expirationTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(time))
				app.expirationTime = expirationTime
				
				addOrder({
					orderNo: createOrderNo(),
					merchantCode: record.merchantCode,
					goodsId: app.goodsId,
					totalPrice: total,
					orderPrice: total,
					payPrice: total,
					month: app.month,
					expirationTime: expirationTime,
					batteryRent: record.batteryRent,
					batteryDeposit: record.batteryDeposit,
					batteryInsurance: record.batteryInsurance,
					orderSource: record.equipmentCategory,
					orderSourceId: record.goodsId,
					dealerPhone
				}).then(res => {
					const {
						orderId
					} = res.data
					if (record.equipmentCategory != 10) {
						my.tradePay({
							orderStr: res.data.orderStr, // 完整的支付参数拼接成的字符串，从服务端获取
							success: (res) => {

							},
							fail: (res) => {

							},
							complete: () => {
								checkFreeze(orderId).then((res) => {
									console.log(record.equipmentCategory + ": " + res)
									if(res.code == 0){
										app.$success("下单成功")
										setTimeout(() => {
											uni.hideLoading({
											})
											uni.redirectTo({
												url: '/pages/order/index'
											})
										}, 100)
									}
									else {
										app.$error(res.errMsg)
										uni.hideLoading({
										})
									}
								})

							}
						});
					} else {
						checkFreeze(orderId).then((res) => {
							if(res.code == 0){
								app.$success("下单成功")
								setTimeout(() => {
									uni.hideLoading({
									})
									uni.redirectTo({
										url: '/pages/order/index'
									})
								}, 100)
							}
							else {
								uni.hideLoading({
								})
								app.$error(res.errMsg)
							}
						})

					}

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.goods-info {
		background-color: #ffffff;
		border-radius: 12rpx;
		width: 700rpx;
		margin: 20rpx auto;

		.goods {
			padding: 20rpx;
			display: flex;

			image {
				width: 220rpx;
				height: 220rpx;
				margin: 20rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				padding: 20rpx;

				.goods-name {
					font-size: 34rpx;
					margin-bottom: 10rpx;
				}

				.goods-desc {
					font-size: 28rpx;
					color: #999999;
				}

				.selling-point {
					padding: 5px 0;
					color: #e6760e;
				}
			}
		}

		.between-time {
			width: 500rpx;
			margin: auto;
			padding-bottom: 20rpx;
			text-align: center;

			.select-slider {
				line-height: 2em;
				color: #e6760e;
			}
		}
	}

	.order {
		background-color: #ffffff;
		border-radius: 12rpx;
		width: 700rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.xieyi {
			padding: 20rpx;
			font-size: 26rpx;
		}
	}

	.submit {
		border-radius: 12rpx;
		width: 700rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;
	}

	.xieyi-text {
		color: #0000ff;
	}

	.fenqi {
		padding: 30rpx;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;

		.item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}
	}
</style>