<template>
	<view class="content bg-gray position-re">
		<!-- <cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil">
			<block slot="content">中石化紫云路</block>
			<block slot="backText">返回</block>
		</cu-custom> -->
		<view class="bg-img  flex align-end margin-bottom-lg "
			:style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
			<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix"
				class="position-ab site-back">
			</image>
			<view class="flex-sub">
				<view class="cu-list menu margin padding-sm  radius my-shadow  bg-white yu-card-xuan">
					<view class="cu-item no-border">
						<view class="content">
							<view class="strong padding-bottom-xs">
								{{siteInfo.siteName}}
							</view>
							<view class="font-12 color-999 site-label text-cut">
								{{siteInfo.address}}
							</view>
						</view>
						<view class="action " @tap="openMap">
							<view class="oil-main-color">
								<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
								{{siteInfo.juli|distanceFilter}}
							</view>
						</view>
					</view>
					<view class="flex text-center padding-top-sm">
						<view class="flex-sub">
							<view class="" @tap="showThreeSites=true">
								<view class="self-icon margin-right-xs">
									<image :src="imgURL+'qr-exchange.png'" mode="widthFix"></image>
								</view>
								变更油站
							</view>
						</view>
						<view class="flex-sub">
							<view class="" @tap="toSiteDetail(siteId)">
								<view class="self-icon margin-right-xs">
									<image :src="imgURL+'qr-xq.png'" mode="widthFix"></image>
								</view>
								油站详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="placeholder margin-bottom-lg">

		</view>

		<view class="margin margin-top-lg  radius bg-white">
			<view class="padding text-center">
				<text class="text-black">
					请提醒加油员使用 
					<text class="text-red">
						“ {{showtitles}} ”
					</text> 
					进行订单核销
				</text>
			</view>

			<view class="qr-container margin  padding-bottom-xs text-center">
				<view class="qr-container  text-center ">
					<view class="qrimg">
						<view class="qrimg" @tap="newQrString">
							<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="400" unit="upx"
								background="#fff" foreground="#000" pdground="#000" :icon="iconUrl" iconSize="40" onval
								:usingComponents="usingComponents" showLoading @result="qrR" />
						</view>
					</view>
				</view>
				<view class="text-center padding-top text-sm margin-bottom">
					提示：该二维码每隔3分钟自动刷新一次
				</view>
			</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-card text-olive font-16 padding-right-xs">

						</text>
						<text>
							油卡卡号
						</text>
					</view>

					<view class="text-right flex-sub ">
						<picker @change="pickCard" :disabled="!isCompany" :value="activeCardIndex" mode="selector"
							:range="cards" range-key="companyName">
							<view class="picker">
								{{cards[activeCardIndex]?activeCard.accountCardCode :'选择油卡'}}
							</view>
						</picker>
					</view>
					<text class="cuIcon-right"></text>
				</view>

				<view class="flex padding-bottom-sm padding-left padding-right">
					<view class="flex-sub">
						<text class="cuIcon-selectionfill text-green font-16 padding-right-xs">

						</text>
						<text>
							油卡所属
						</text>
					</view>

					<view class="text-right flex-sub text-green">
						{{(cardList[activeCardIndex]?activeCard.companyName:'未选择油卡') |cardForamt}}
					</view>
				</view>
				<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>
							￥{{(cardList[activeCardIndex]?activeCard.balance:'')|moneyFormat}}
						</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>
				</view>
			</view>
		</view>

		<!-- <view class="bg-gray padding-top-sm ">
			<view class="btn">
				<view class="flex  padding flex-direction">
					<button class="cu-btn block bg-main-oil lg">
						<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix"></image>
						一键支付
					</button>
				</view>
			</view>
		</view> -->
		<!-- showThreeSites -->
		<three-sites @hideOneModal="showThreeSites=false" :showThreeSites="showThreeSites"></three-sites>
	</view>
</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	import qrApi from '@/api/qr.js'
	import accountApi from '@/api/account.js'
	import priceTab from '../components/price-tab.vue'
	import threeSites from '@/components/three-sites.vue'
	import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue" //二维码生成器
	export default {
		components: {
			priceTab,
			threeSites,
			tkiQrcode
		},
		data() {
			return {
				showtitles:"",
				isCompany: uni.getStorageSync('accountStatus'),
				activeCardIndex: 0,
				showThreeSites: false,
				radio: 'B',
				qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
				val: '',
				// iconUrl: '../../../static/img/qr-icon.png',
				mainURL: this.global.mainURL,
				imgURL: this.global.imgURL,
				active: 0,
				ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				siteId: '',
				activeChannelCode: '',
				siteInfo: {},
				cardList: [],
				posName: '',
				secondChannelCode: '',
				timeinterval: '',
				customerId: uni.getStorageSync('user').userCode
			}
		},

		computed: {

			iconUrl() {
				if (this.activeChannelCode) {
					if (this.secondChannelCode) {
						this.posName = '壳牌'
						return `../../../static/img/YDJY.png`
					} else {
						this.posName = '星油云站'
						return `../../../static/img/${this.activeChannelCode}.png`
					}
				}
			},
			accountCardCode() {
				if (this.activeCard) {
					this.getQrString(this.activeCard)
					return this.activeCard.accountCardCode
				}
			},
			activeCard() {
				if (this.cardList.length) {
					return this.cardList[this.activeCardIndex]
				}
			},
			cards() {
				if (this.cardList.length) {
					let cards = []
					console.log(this.cardList)
					// this.cardList.forEach((e) => {
					// 	cards.push(e.accountCardCode)
					// })
					return this.cardList
				}
			},
		},
		onUnload() {
			this.timeinterval = ''
		},
		onLoad(option) {
			let oilItem = uni.getStorageSync('oilItem')
			this.showtitles = oilItem.listTag 
			this.siteId = option.siteId
			this.activeChannelCode = option.activeChannelCode
			this.secondChannelCode = option.secondChannelCode
			this.timeinterval = setInterval(() => {
				this.newQrString()
			}, 1000 * 60 * 3);
			this.getUserCard()
			this.getSiteInfo(option.siteId)
		},
		methods: {
			qrR() {

			},
			newQrString() {
				this.getQrString(this.activeCard)
			},
			getQrString(activeCard) {
				let data2 = {
					companyId: this.activeCard.companyId,
					secondChannelCode: this.secondChannelCode,
					customerId: this.customerId,
					orderSource: "WECHAT_MINIAPPS", //类型：String  必有字段  备注：订单来源（WECHAT_MINIAPPS）
					oilsStationId: this.siteId, //类型：String  必有字段  备注：油站ID
					channelCode: this.activeChannelCode, //类型：String  必有字段  备注：渠道编码
					oilCardNature: activeCard.oilCardType, //类型：String  必有字段  备注：油卡性质
					accountCardCode: activeCard.accountCardCode //类型：String  必有字段  备注：油卡卡号
				}
				qrApi.getOilQrCode(data2).then(res => {
					if (res.code === 20000) {
						this.val = res.data.codeStr
					}
				})
			},
			pickCard(e) {
				this.activeCardIndex = e.detail.value
			},
			getSiteInfo() {
				let data2 = {
					...uni.getStorageSync('location'),
					siteId: this.siteId
				}
				oilSiteApi.getSiteDetails(data2).then(res => {
					if (res.code == 20000) {
						this.siteInfo = res.data
					}
				})
			},
			getUserCard() {
				accountApi.getUserAccount().then(res => {
					if (res.code == 20000) {
						this.cardList = res.data
						if (this.cardList.length > 0) {
							// this.getMoneyDetail(this.cardList[0])
						}
					}
				})
			},
			toSiteDetail(id) {
				uni.redirectTo({
					url: `/BagStation/pages/stationDetail/stationDetail?siteId=${id}`,
					fail: (err) => {
						// console.log(err)
					},
					success: () => {
						// console.log('err')
					}
				})
			},
			openPlugin() {
				const key = this.qqKey; //使用在腾讯位置服务申请的key  
				const referer = '星油云'; //调用插件的app的名称  
				const endPoint = JSON.stringify({
					name: '油站',
					latitude: 39.89631551,
					longitude: 116.323459711
				});

				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				})

			},
			goBack() {
				uni.navigateBack({

				})
			},
			selectRadio() {
				this.radio === 'A' ? this.radio = '' : this.radio = 'A'
			},
			openMap() {
				let that = this
				uni.openLocation({
					latitude: 117,
					longitude: 21,
					name: '江西景德镇',
					address: '九龙路1188号',
					scale: 12,
					success: function() {
						// console.log('success')
					},
					fail: (error) => {
						// console.log('error')
						// console.log(error)
					},
					complete: () => {

						// console.log('made')
					},

				})

				var map = uni.createMapContext('map')
				map.moveToLocation()
			}
		},
		filters: {
			distanceFilter(value) {
				if (value) {
					return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
				}
			},
			moneyFormat(value) {
				if (value) {
					return (parseInt(value * 100) / 100).toFixed(2)
				} else {
					return '0.00'
				}
			},
			cardForamt(val) {
				if (uni.getStorageSync('accountStatus') == true) {
					// 企业卡
					return val == null ? '未选择油卡' : val
				} else {
					// 个人卡
					return val == null ? '星油豆' : '星油豆'
				}
			}
		}
	}
</script>

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

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.my-cell {}

	.placeholder {
		min-height: 20upx;
	}

	.yu-card-xuan {
		position: relative;
		top: 110rpx
	}

	.site-label {
		max-width: 500upx;
	}

	.cu-btn.sm {
		width: 80%;
	}

	.site-back {
		width: 2rem;
		top: 2.8rem;
		left: 1rem;
	}

	.site-icon {
		width: 1.5rem;
		vertical-align: middle;
	}

	.my-tag {
		padding: 0 12rpx;
	}

	.self-icon {
		width: 1rem;
		display: inline-block;
		vertical-align: middle;
	}
</style>
