<template>
	<view class="page-content bg-main-oil">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">油站二维码</block>
		</cu-custom>
		<view class="margin-xl padding radius bg-white">
			<view class="text-center padding">
				<text class="text-lg text-black">{{oilSiteName}}</text>
			</view>
			<view class="qr-container padding-top text-center ">
				<view class="qrimg">
					<tki-qrcode ref="qrcode" :val="val" :size="400" unit="upx" background="#fff" foreground="#000" pdground="#000"
					 :icon="iconUrl" iconSize="40" :onval="true" :loadMake="true" :usingComponents="usingComponents" :showLoading="true"
					 @result="qrR" />
				</view>
			</view>
			<view @tap="refreashQr" class="text-center padding-top padding-bottom-xs padding-bottom-xs">
				<text class="color-999 font-12">
					<text class="cuIcon-refresh padding-right-xs"></text>
					<!-- 付款码自动 （25s） -->
					收款码
					<text class="oil-main-color">
						刷新
					</text>
				</text>
			</view>
			<view class="text-center  color-000 font-10 margin-bottom-sm" @tap="refreashQr">
				提示：司机扫描二维码支付油费
			</view>
			<view class="padding font-12 solid-top">
				<view class="flex padding-bottom-sm padding-left padding-right">
					<view class="flex-sub">
						<text class="cuIcon-moneybagfill oil-main-color font-16 padding-right-xs">

						</text>
						<text>
							加油金额
						</text>
					</view>

					<view class="text-right flex-sub oil-main-color">
						<text v-if="!showData.price">
							未指定
						</text>
						<text v-else>￥{{showData.price}}</text>
					</view>
				</view>
				<view class="flex padding-left padding-right">
					<view class="flex-sub">
						<text class="cuIcon-infofill color-wjy font-16 padding-right-xs">

						</text>
						<text>
							加油升数
						</text>
					</view>


					<text class="text-right flex-sub">
						<text v-if="!showData.volume">
							未指定
						</text>
						<text v-else>{{showData.volume}}L</text>
					</text>
				</view>
			</view>
		</view>

		<view class="margin-xl padding-top">
			<button class="bg-white oil-main-color" @tap="modalName='show'">设置油品加油升数</button>
		</view>
		<view class="cu-modal" :class="modalName">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content ">
						{{oilSiteName}}
					</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-left padding-bottom padding-top-0 bg-white">
					<OrderOilForm @confirmVol="getDesignatedQr" :oilList="oilList" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderOilForm from '@/packageQr/components/OrderOil.vue'
	// 引入二维码库  
	import cloudSiteApi from '@/api/cloud-site.js'
	import OliSiteApi from '@/api/oli-site.js'
	import tkiQrcode from "@/packageQr/components/tki-qrcode/tki-qrcode.vue" //二维码生成器

	export default {
		components: {
			OrderOilForm,
			tkiQrcode
		},
		data() {
			return {
				oilList: [],
				xkPrice:'',
				modalName: 'mod',
				oilSiteName: '',
				qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
				val: '',
				iconUrl: '../../static/img/qr-icon.png',
				oilDate: {
					oilSiteCode: uni.getStorageSync('oilSite').oilSiteCode,
					oilSiteName: uni.getStorageSync('oilSite').oilSiteName,
					oilCode: '',
					oilName: '',
					gunId: '',
					standardPrice: '',
					oilPrice: '',
					vol: ''
				},
				showData: {
					vol: '',
					realPay: ''
				},
				channelId : uni.getStorageSync('channelId'),
				siteInfo : {},
				userInfo : uni.getStorageSync('loginUser'),
			}
		},
		onLoad() {
			this.getSiteInfo()
			this.oilSiteName = uni.getStorageSync('oilSiteName') 
		
			// this.getDesignatedQr/()
			console.log('oilDate', this.oilDate)
		},
		methods: {
			// 刷新
			refreashQr() {
				console.log('刷新函数')
				if (this.showData.vol) {
					this.getDesignatedQr(this.showData)
				} else {
					this.getDefaultQr()
				}
			},
			getSiteInfo() {
				OliSiteApi.getSiteDetail(this.channelId).then(res => {
					console.log('这里是获取油站信息处', res)
					if (res.code === 20000) {
						this.siteInfo = res.data.site 
						this.oilList = res.data.oil
						uni.setStorageSync('oilSite',res.data.site) 
						this.getDefaultQr() 
					}
				})
			},
			getDefaultQr() {
				let data = {
					channelId:this.channelId,
					siteName:this.siteInfo.siteName,
					staffId:this.userInfo.id 
				}
				OliSiteApi.getOilSiteCollectQrCode(data).then(res => {
					console.log( '这里是返回二维码的地方',res)
					if (res.code === 20000) {
						this.val = res.data.codeStr
					}
				})
			},
			getDesignatedQr(data) {
				const data6 = {
					...this.oilDate,
					...data
				}
				console.log(data)
				this.showData = data.refuelDetail
				OliSiteApi.getOilSiteCollectQrCode(data6).then(res => {
					if (res.code === 20000) {
						console.log(res)
						this.val = res.data.codeStr
						this.hideModal()
					}
				})
			},
			hideModal() {
				console.log('关闭呀')
				this.modalName = ''
			},
			qrR() {
				console.log('5555')
			}
		

		}
	}
</script>

<style scoped>
	.page-content {
		min-height: 100%;
	}

	.qr-img {
		width: 400upx;
		height: 400rpx;
		margin: auto;
	}
</style>