<template>
	<!-- 三个最近的油站弹窗 -->
	<view>
		<view class="cu-modal" :class="showThreeSites?'show':''" @touchmove.stop>
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<!-- <view class="content">选择油站</view> -->
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="bg-white pb30">
					<tki-qrcode ref="qrcode" cid="2" :val="qrcodeText" :size="400" :isHaveBg="true" pdground="#000"
						foreground="#000" background="#fff" onval showLoading loadMake />
					<view class="text-center padding-top text-sm margin-bottom">
						提示：该二维码每隔<text style="color: #ff0000;">3分钟</text>自动刷新一次
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import serve from '@/api/oil-site.js'
	import accountApi from '@/api/account.js'

	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		props: {
			showThreeSites: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				qrcodeText: '',
				user: uni.getStorageSync('user'),
				timerInstance: null
			}
		},

		watch: {
			showThreeSites: {
				handler(newval) {
					if (newval) { 
						this.initQRCode()
					}
				},
				immediate: true
			}
		},
		methods: {

			async initQRCode() {
				if (this.timerInstance) {
					clearInterval(this.timerInstance)
					this.timerInstance = null
				}

				let accountResult = await accountApi.getUserAccount()
				if (!accountResult.data.length) return

				let params = {
					companyId: accountResult.data[0].companyId,
					orderSource: "WECHAT_MINIAPPS",
					customerId: this.user.id,
					channelCode: 'XOIL',
					oilCardNature: accountResult.data[0].oilCardType, //油卡性质
					accountCardCode: accountResult.data[0].accountCardCode //油卡卡号
				}

				serve.getOilDriverQrCode(params).then(res => {
					if (!res.data) return
					this.qrcodeText = res.data.codeStr
				})


				this.timerInstance = setInterval(() => {
					serve.getOilDriverQrCode(params).then(res => {
						if (!res.data) return
						this.qrcodeText = res.data.codeStr
					})
				}, 1000 * 60 * 3)
			},
			hideModal() {
				clearInterval(this.timerInstance)
				this.timerInstance = null
				this.$refs.qrcode._clearCode()
				this.$emit('hideOneModal')
			},


		}
	}
</script>

<style scoped>
	.cu-list.menu-avatar>.cu-item .action {
		width: 130rpx;
	}

	.ro-right {
		max-width: 100upx;
		/* position: absolute; */
	}

	.position-re {
		position: relative;
	}

	.postion-ab {
		position: absolute;
		top: -0.8rem;
		left: 0.2rem;
		min-width: 100%;
	}

	.pb30 {
		padding-bottom: 30rpx;
	}
</style>
