<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">《服务协议》</div>与<div class="xieyi-text" @click="showXieyi">《隐私协议》</div>
				</checkbox-group>
			</view>
		</view>
		<view class="submit">
			<u-input v-model="dealerId" :disabled="disabled" placeholder="请输入推荐人用户ID" />
		</view>
		<view class="submit">
			<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 } 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,
				dealerId: '',
				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(){
				this.$navTo('pages/help/xieyi')
			},
			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
				
				                
				//             }
			},
			onBuy(){
				const app = this
				const { record,dealerId } = this
				let total = 0.0
				// 未登录状态
				if(!uni.getStorageSync('userId')) {
					app.$error('请先登录',function(){
						app.$navTo('pages/login/login');
					});
					return false;
				}
				if(record.equipmentCategory == '10'){
					total = (record.batteryPrice).toFixed(2)
				}
				if(record.equipmentCategory == '20'){
					total = (record.downPayment).toFixed(2)
				}
				if(record.equipmentCategory == '40' || record.equipmentCategory == '30'){
					total = (record.batteryDeposit + record.batteryRent + record.batteryInsurance).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,
					dealerId
					}).then(res => {
					const { orderId } = res.data
					app.$success("下单成功")
					setTimeout(() => {
					  this.$navTo('pages/checkout/cashier/index', { orderId })
					}, 100)
				})
			}

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