<template>
	<view class="content">
		<view class="container">
			<view class="top">
				<!-- 店铺信息 -->
				<view class="dis">
					<view class="top-img">
						<image v-if="!store.logo" src="../../static/logo.png" mode="aspectFit"></image>
						<image v-else :src="baseUrl+store.logo" mode="aspectFit"></image>
					</view>
					<view style="width: 80%;">
						<view class="top-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}
						</view><!--九州加油站（总站）-->
						<view class="top-hui">{{store.address}}</view><!--平安大道东200米-->

					</view>
				</view>
				<!-- 油品信息 -->
				<view class="pkuang">
					<view class="title_">
						选择油品油枪
					</view>
					<view class="input_kuang">
						<view class="leftIput" @click="selectShow = true">{{oilTypeName || '--'}}{{oilGunName || ''}}
						</view>
						<view class="rr_box" @click="Selectemployees = true">{{staffName || '--'}}</view>
					</view>
					<view style="display: flex;justify-content: space-between;">
						<view class="title_">
							加油金额
						</view>
						<view class="sm_r-zie" style="font-weight: bold;">{{oilPrice || 0}}元/{{oilUnit || 'L'}}</view>
					</view>
					<view class="input_kuang">
						<view class="leftIput">
							￥<input style="width: 100%;" v-model="oilOrder.orderAmount" @input="changeAmount()"
								type="text" placeholder="请输入金额" />
						</view>
						<view class="rr_box">{{oilOrder.oilNum || 0}}L</view>
					</view>
					<view class="title_">
						付款备注
					</view>
					<view class="input_kuang">
						<input type="text" placeholder="备注" v-model="oilOrder.remark" style="margin-left: 10px;" />
					</view>
				</view>
				<view class="b_"></view>
				<!-- 支付方式 -->
				<view class="pkuang">
					<view class="title_">
						支付方式
					</view>
					<view class="d-bs" @click="oilOrder.payType=cardPayType">
						<image src="../../static/icon/hyk.png" style="width: 35px; height: 35px; "></image>
						<view class="br-box">
							<view style="font-size: 14px;">
								<view class="">会员卡类型</view>
								<view class="d-bs" style="align-items: center;border-bottom: none;"
									@click="cardType = true">
									<view style="font-size: 12px;" v-if="chooseCard && chooseCard.fuelAmount>=0">
										囤油卡（余额：{{chooseCard.fuelAmount}}）</view>
									<view style="font-size: 12px;" v-if="chooseCard && chooseCard.totalBalance>=0">
										车队卡（余额：{{chooseCard.totalBalance}}）</view>
									<view style="font-size: 12px;" v-if="!chooseCard">储值卡（余额：{{user.cardBalance}}）
									</view>
									<view style="line-height: 20px;">
										<u-icon name="arrow-right" size="12px"></u-icon>
									</view>
								</view>
							</view>
							<view class="anxuan"
								:class="{'anxuan1': oilOrder.payType!='ALIPAY' && oilOrder.payType!='WECHAT'}">
								<view class="dian"
									:class="{'dian1': oilOrder.payType!='ALIPAY' && oilOrder.payType!='WECHAT'}"></view>
							</view>

						</view>
					</view>
					<view class="d-bs" @click="oilOrder.payType=appltType">
						<image src="../../static/icon/wz.png" style="width: 35px; height: 35px; "></image>
						<view class="br-box">
							<view class="">微信</view>
							<view class="anxuan"
								:class="{'anxuan1': oilOrder.payType=='ALIPAY' || oilOrder.payType=='WECHAT'}">
								<view class="dian"
									:class="{'dian1': oilOrder.payType=='ALIPAY' || oilOrder.payType=='WECHAT'}"></view>
							</view>
						</view>
					</view>
					<view class="title_">
						优惠信息
					</view>
				</view>
				<!-- 优惠券信息 -->
				<view class="d-bs" style="box-sizing: border-box; padding: 20px;" @click="selectCoupon = true">
					<view class="">优惠券</view>
					<view class="d-s">
						<view class="">-{{oilOrder.discountAmount}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- 消费有礼信息 -->
				<view class="new-box" style="padding-top: 0px;">
					<view class="title_">
						消费有礼
					</view>
					<view class="bsd">
						<view class="">积分</view>
						<view class="">+{{consumeInfo.points || 0}}</view>
					</view>
					
					<view class="bsd">
						<view class="">成长值</view>
						<view class="">+{{consumeInfo.growthValue || 0}}</view>
					</view>
					<view v-if="consumeInfo.carList">
						<view class="bsd" v-for="(item,index) in consumeInfo.carList" :key="index">
							<view class="">{{item.type}}</view>
							<view class="">+{{item.num || 0}}</view>
						</view>
					</view>
				</view>
				<!-- 支付信息 -->
				<view class="bs-box">
					<view class="">
						<view class="onetitle">¥{{oilOrder.orderAmount - oilOrder.discountAmount}}</view>
						<view class="orsize">共优惠¥{{oilOrder.discountAmount || 0}}</view>
					</view>
					<view class="d-s">
						<view class="d-s" style="color: #999999;font-size: 12px; margin-right: 10px;"
							@click="PaymentDetails = true">
							<view class="">明细</view>
							<u-icon name="arrow-down" size="12"></u-icon>
						</view>
						<view class="anniuf" @click="goPayment()">立即支付</view>
					</view>
				</view>

				<view style="width: 100%; height: 60px; "></view>
			</view>

			<view style="margin-top: 50px;">
				<uni-popup ref="popup1" type="bottom" background-color="white" mask-background-color="rgba(0,0,0,0.0)">
					<keyboard :pApplt="appltType" @isPay="submitAmount" @amount="changeVal" @backVal="backspaceVal">
					</keyboard>
				</uni-popup>
			</view>
			<view>
				<!-- 优惠券 -->
				<u-popup :show="selectCoupon" closeable="true" mode="bottom" :round="10" @close="Couponclose">
					<view class="popup-box">
						<view class="p_title">选择优惠券</view>
						<view class="p-tab">
							<view :class="{'or' :tabIndex ==index }" v-for=" (item,index) in tabList"
								@click="setabIndex(index)" :key="index">
								<text>{{item.name}}</text> <text>( {{item.num}} )</text>
							</view>
						</view>
						<view class="couponBox" v-if="tabIndex == 0">
							<view v-for="(item,index) in couponList" @click="chooseCoupon(item)">
								<view class="cou_top">
									<view class="d-s">
										<view class="qaz"></view>
										<view class="c_title">{{item.name}}</view>
									</view>
									<view class="c-r-num">¥{{item.disAmount}}</view>
								</view>
								<view class="cou_top">
									<view class="sm_size">有效期：2024-08-05 14:15:12~2024-08-15 14:15:11</view>
									<view class="sm_r-zie">满200可用</view>
								</view>
								<view class="dashed_box"></view>
								<view class="cou_top">
									<view class="sb_size" :class="{ 'sb_xl' : RandR == true  }">
										以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡
									</view>
									<view class="sm_r-zie" style="height: 14px; " @click="RandR =! RandR">适用详情 <u-icon
											name="arrow-right" color="#E02020" size="10"></u-icon> </view>
								</view>
							</view>
						</view>
						<view class="couponBox_h" v-if="tabIndex == 1">
							<view class="cou_top">
								<view class="d-s">
									<view class="qaz"></view>
									<view class="c_title">油品消费满减券</view>
								</view>
								<view class="c-h-num">¥10</view>
							</view>
							<view class="cou_top">
								<view class="sm_size">有效期：2024-08-05 14:15:12~2024-08-15 14:15:11</view>
								<view class="sm_h-zie">满200可用</view>
							</view>
							<view class="dashed_box_h"></view>
							<view class="cou_top">
								<view class="sb_size" :class="{ 'sb_xl' : RandR == true  }">
									以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡、会以下支付方式可用：微信、支付宝、云闪付、pos刷卡
								</view>
								<view class="sm_h-zie" style="height: 14px; " @click="RandR =! RandR">适用详情 <u-icon
										name="arrow-right" color="#999" size="10"></u-icon> </view>
							</view>
							<view class="dashed_box_h"></view>
							<view class="sm_r-zie" style="height: 14px; margin-bottom: 10px; " @click="RandR =! RandR">
								不可用原因 <u-icon name="arrow-right" color="#E02020" size="10"></u-icon> </view>
							<view class="sb_size">
								不满足优惠券使用时间
								不与其他优惠同时使用
							</view>
						</view>
					</view>
				</u-popup>
				<!-- 会员卡 -->
				<u-popup :show="cardType" closeable="true" mode="bottom" :round="10" @close="cardTypeclose">
					<view class="popup-box">
						<view class="p_title">选择会员卡类型</view>
						<view class="c_pox" @click="chooseUserCard('card_value')">
							<view class="c_bs" style="margin-bottom: 15px;">
								<view class="">储值卡</view>
								<view class="anniubai">充值</view>
							</view>
							<view class="c_bs">
								<view class="">{{user.cardBalance}}</view>
								<!-- <view class="">NO.xxxxxxxxxxxxxxxxx</view> -->
							</view>
						</view>
						<view class="c_pox" style="background: url('../../static/imgs/tyktc.png'); "
							v-for="(item,index) in oilCardList" :key="index" @click="chooseUserCard('fule_card',item)">
							<view class="c_bs" style="margin-bottom: 15px; ">
								<view class="">囤油卡</view>
								<view class="anniubai" style="color: #70D0C7;">充值</view>
							</view>
							<view class="c_bs">
								<view class="">{{item.fuelAmount}}</view>
								<!-- <view class="">NO.xxxxxxxxxxxxxxxxx</view> -->
							</view>
						</view>
						<view class="c_pox" v-for="(item,index) in fleetList" :key="index"
							@click="chooseUserCard(item.cardType=='储值卡' ? 'car_card_value' : 'car_fule_card',item)">
							<view class="c_bs" style="margin-bottom: 15px;">
								<view class="">{{item.fleetName}}</view>
								<view class="anniubai">充值</view>
							</view>
							<view class="c_bs">
								<view class="">{{item.totalBalance || 0}}</view>
								<!-- <view class="">NO.xxxxxxxxxxxxxxxxx</view> -->
							</view>
						</view>
					</view>
				</u-popup>
				<!-- 选择员工 -->
				<u-popup :show="Selectemployees" closeable="true" mode="bottom" :round="10" @close="Selectclose">
					<view class="popup-box">
						<view class="p_title">选择员工</view>
						<view class="wr_box">
							<view class="xanniu" :class="{'acvit' : anIndex == index }"
								v-for="(item,index) in staffList" :key="index" @click="setadindex(index,item)">

								<view class="">{{item.realName}}</view>
							</view>
						</view>
					</view>
				</u-popup>
				<!-- 选择油品油枪 -->
				<u-popup :show="selectShow" closeable="true" mode="bottom" :round="10" @close="ypClose">
					<view class="popup-box">
						<view class="p_title">选择油品油枪</view>
						<scroll-view scroll-x="true" class="tap-top">
							<view class="sz" :class="{'acvit': qhindex == index}" v-for="(item,index) in oilNumberList"
								:key="index" @click="setQindex(index,item)">
								<view>{{item.oilName}}</view>
							</view>

						</scroll-view>
						<view class="wr_box">
							<view class="xanniu" :class="{'acvit' : anIndex == index }"
								v-for="(item,index) in oilGunList" :key="index" @click="setQhindex(index,item)">
								<view class="">{{item.gunName}}</view>
								<view class="">{{item.oilName}}</view>
							</view>
						</view>

					</view>
				</u-popup>
				<!-- 应支付 -->
				<u-popup :show="ConfirmPayment" closeable="true" mode="bottom" :round="10" @close="Confirmclose">
					<view class="popup-box">
						<view class="p_title">确认支付</view>
						<view class="p_ds">
							<image src="../../static/imgs/zficon.png" style="width: 36px; height: 36px; "></image>
							<view class="p_ds" style="width: 85%;">
								<view class="">
									<view class="">消费应支付{{oilOrder.orderAmount - oilOrder.discountAmount
									}}元</view>
									<view class="sm-size" v-if="oilOrder.payType=='card_value'">
										会员-储值卡（余额：{{user.cardBalance}}）</view>
									<view class="sm-size" v-if="oilOrder.payType=='fule_card'">
										会员-囤油卡（余额：{{chooseCard.fuelAmount}}）</view>
									<view class="sm-size"
										v-if="oilOrder.payType=='car_card_value' || oilOrder.payType=='car_fule_card'">
										会员-车队卡（余额：{{chooseCard.totalBalance}}）</view>
									<view class="sm-size" v-if="oilOrder.payType=='WECHAT'">微信</view>
									<view class="sm-size" v-if="oilOrder.payType=='ALIPAY'">支付宝</view>
								</view>
								<view class="anxuan anxuan1">
									<view class="dian dian1"></view>
								</view>
							</view>
						</view>
						<view class="annius" @click="payment()">立即支付{{oilOrder.payAmount}}元</view>
					</view>
				</u-popup>
				<!-- 订单明细 -->
				<u-popup :show="PaymentDetails" closeable="true" mode="bottom" :round="10" @close="close">
					<view class="popup-box">
						<view class="p_title">待支付明细</view>
						<view class="">商品信息</view>
						<view class="p_bs">
							<view class="">油品油枪</view>
							<view class="">{{oilTypeName || '--'}}{{oilGunName || ''}}</view>
						</view>
						<view class="p_bs">
							<view class="">员工</view>
							<view class="">{{staffName || '--'}}</view>
						</view>
						<view class="p_bs">
							<view class="">油品单价</view>
							<view class="">{{oilPrice || 0}}元/{{oilUnit || 'L'}}</view>
						</view>
						<view class="p_bs">
							<view class="">加油升数</view>
							<view class="">约{{oilOrder.oilNum}}L</view>
						</view>
						<view class="p_bs">
							<view class="">加油金额</view>
							<view class="">{{oilOrder.orderAmount}}元</view>
						</view>
						<view class="p_x"></view>
						<view class="">优惠信息</view>
						<view class="p_bs">
							<view class="">优惠券</view>
							<view class="r-size">-{{oilOrder.discountAmount}}</view>
						</view>
						<view class="p_x"></view>
						<view class="">消费有礼</view>
						<view class="p_bs">
							<view class="">积分</view>
							<view class="r-size">+{{consumeInfo.points || 0}}</view>
						</view>
						<view class="p_bs">
							<view class="">成长值</view>
							<view class="r-size">+{{consumeInfo.growthValue || 0}}</view>
						</view>
						<view v-if="consumeInfo.carList">
							<view class="p_bs" v-for="(item,index) in consumeInfo.carList" :key="index">
								<view class="">{{item.type}}</view>
								<view class="r-size">+{{item.num || 0}}</view>
							</view>
						</view>

						<view class="p_x"></view>
						<view class="p_bs">
							<view class="">合计待支付</view>
							<view class="r-size">{{oilOrder.payAmount}}</view>
						</view>
						<view class="p_x"></view>
					</view>
				</u-popup>

			</view>

			<tabbar :msg="msg"></tabbar>
		</view>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	import config from '@/config'
	import request from '../../utils/request'
	export default {
		data() {
			return {
				selectCoupon: false,
				cardType: false,
				selectShow: false,
				Selectemployees: false,
				ConfirmPayment: false,
				PaymentDetails: false,
				anIndex: 0,
				qhindex: 0,
				msg: "2",
				RandR: false,
				tabList: [{
						name: '可用优惠券',
						num: 1
					},
					{
						name: '不可用优惠券',
						num: 2
					},
				],
				tabIndex: 0,
				appltType: uni.getStorageSync("appltType"),
				value: '',
				liters: 0,
				show: false,
				pic: 0,
				hindex: 0,
				qindex: 0,
				aindex: null,
				sindex: null,
				// 店铺信息
				store: {
					name: "测试油站",
					description: "济南分店",
					address: "济南槐荫区"
				},
				// 当前店铺id
				storeId: "",
				// 油号列表信息
				oilNumberList: [],
				// 油枪列表信息
				oilGunList: [],
				// 员工列表信息
				staffList: [],
				// 加油金额列表
				amountList: [100, 200, 300],
				// url信息
				baseUrl: this.$baseUrl,
				// 油价
				oilPrice: 0,
				// 油品单位
				oilUnit: "",
				AppToken: uni.getStorageSync("App-Token"),

				// 选择的油品类型信息
				oilTypeName: '',
				// 选择的油枪信息
				oilGunName: '',
				// 店员名称
				staffName: '',
				// 油品订单信息
				oilOrder: {
					storeId: "",
					couponId: "",
					commissionAmount: 0,
					staffId: "",
					terminal: "applet",
					oils: "",
					oilGunNum: "",
					oilNum: 0,
					orderAmount: 0,
					discountAmount: 0,
					payAmount: 0,
					payType: uni.getStorageSync("appltType"),
				},
				// 优惠券列表
				couponList: [],
				// 是否登录
				ifLogin: false,
				orderInfo: {},
				user: {},
				oilCardList: [],
				fleetList: [],
				chooseCard: null,
				cardPayType: 'card_value',
				consumeInfo: {}
			}
		},
		components: {
			tabbar
		},
		onLoad(query) {
			if (uni.getStorageSync("appltType") == "WECHAT") {
				const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
				if (query.q) {
					let str = q.split("?")[1];
					let storeId = "19";

					let staffId = "";
					let sn = "";
					if (str.includes("&")) {
						let arr = str.split("&");
						arr.forEach(item => {
							if (item.includes("storeId")) {
								storeId = item.split("=")[1]
							} else if (item.includes("staffId")) {
								staffId = item.split("=")[1]
							} else {
								sn = item.split("=")[1]
							}
						})
					} else {
						if (str.includes("storeId")) {
							storeId = str.split("=")[1]
						} else {
							sn = str.split("=")[1]
							this.getStoreIdBySn(sn);
						}
					}
					uni.setStorageSync("storeId", storeId)
					uni.setStorageSync("sn", sn)
					uni.setStorageSync("inviteStaffId", staffId)
					this.storeId = uni.getStorageSync("storeId")
					this.staffId = uni.getStorageSync("inviteStaffId")
					if (uni.getStorageSync("storeId")) {
						this.getStore(uni.getStorageSync("storeId"));
					}

				}
			} else {
				if (uni.getStorageSync("storeId")) {
					this.getStore(uni.getStorageSync("storeId"));
				} else {
					this.getStoreIdBySn(uni.getStorageSync("sn"));
				}
			}

			if (query.staffId) {
				uni.setStorageSync("inviteStaffId", query.staffId)
				uni.setStorageSync("storeId", query.storeId)
				this.staffId = query.staffId
				this.storeId = query.storeId
				this.getStore(uni.getStorageSync("storeId"));
			}

		},
		onShow() {
			this.getStore(uni.getStorageSync("storeId"));
			this.getTheJudgmentIsTheSame()
			this.getOilCard()
		},

		methods: {
			// 获取消费有礼信息
			getConsumeInfo() {
				request({
					url: "pay/paycenter/cashRegisterSpendWiselyApp",
					method: 'post',
					data: {
						userId: uni.getStorageSync("userId"),
						storeId: uni.getStorageSync("storeId"),
						liters: this.oilOrder.oilNum,
						goodsMoney: this.oilOrder.orderAmount,
						payMoney: this.oilOrder.payAmount,
						payType: this.oilOrder.payType,
						oils: this.oilOrder.oils
					}
				}).then(res => {
					console.log(res, 531);
					this.consumeInfo = res.data
				})
			},
			// 选择会员卡
			chooseUserCard(payType, data) {
				this.oilOrder.payType = payType
				this.cardPayType = payType
				if (data) {
					this.chooseCard = data
				} else {
					this.chooseCard = null
				}
				this.cardType = false
				console.log(this.chooseCard, 515);
			},
			// 获取储值卡信息
			getOilCard() {
				request({
					url: "business/userManager/user/storeUserInfo/" + uni.getStorageSync("storeId"),
					method: 'get',
				}).then(res => {
					console.log(res, 491);
					this.user = res.data
					this.oilCardList = res.data.userFuels
					this.fleetList = res.data.fleetInfoUniVos
				})
			},
			// 获取消费有礼信息
			getConsume() {
				request({
					url: "pay/paycenter/cashRegisterSpendWisely",
					method: 'post',
					data: {
						storeId: this.storeId,
						userId: uni.getStorageSync("userId"),
					}
				}).then(res => {
					console.log(res, 555);
				})
			},
			// 支付接口
			payment() {
				this.ifLogin = this.AppToken ? true : false
				let map = {
					orderNo: this.oilOrder.orderNo,
					payAmount: this.oilOrder.payAmount,
					discountAmount: this.oilOrder.discountAmount,
					oilCardAmount: '',
					oilCardLiters: this.oilOrder.oilCardAmount || 0,
					balanceAmount: this.oilOrder.balanceAmount || 0,
					isOilStorageCard: false,
					tankId: this.oilOrder.tankId,
					isUseChildCard: false,
					// activeId: this.preferentialData.activeId,
					// cardFavorableId: this.preferentialData.cardFavorableId,
					// recordId: this.preferentialData.recordId,
					// type: this.preferentialData.type,
					// balanceAmountSale: this.balanceRedece,
					// oilCardAmountSale: this.oilCardRedece,
					ifLogin: this.ifLogin,
					// levelAmount: this.levelAmount,
					// activeAmount: this.activeAmount
				};
				let _this = this;
				request({
					url: "business/oilOrder/appletPay",
					method: 'post',
					data: map,
				}).then(res => {
					let payProvider = "wxpay"
					if (_this.appltType == "WECHAT") {
						payProvider = "wxpay"
					} else {
						payProvider = "alipay"
					}
					if (res.data.error) {
						request({
							url: "/business/allOrderInfo/orderStatus",
							method: 'post',
							data: {
								"orderNo": _this.oilOrder.orderNo,
								"status": "payFail"
							},
						}).then((ress) => {})
						uni.showToast({
							title: res.data.error,
							icon: "none"
						})
						return;
					}
					if (res.data.code == "error") {
						request({
							url: "/business/allOrderInfo/orderStatus",
							method: 'post',
							data: {
								"orderNo": _this.oilOrder.orderNo,
								"status": "payFail"
							},
						}).then((ress) => {})
						uni.showToast({
							title: "支付失败，请联系商家",
							icon: "none"
						})
						return;
					}
					if (res.data.success == "ok") {
						uni.redirectTo({
							url: '/pagesRefuel/orderSuccess/index?orderNo=' + _this.oilOrder.orderNo,
						})
						return;
					}
					if (res.data.resultMsg == "商户订单号重复") {
						uni.showToast({
							title: "商户订单号重复，请重新选择订单信息进行支付！",
							icon: "none"
						})
					}
					if (res.data.data.reservedPayInfo) {
						_this.orderInfo = JSON.parse(res.data.data.reservedPayInfo);
						uni.requestPayment({
							// 微信支付provider: 'wxpay' 支付宝支付 'alipay'
							provider: payProvider,
							// 时间戳
							timeStamp: _this.orderInfo.timeStamp,
							// 随机字符串
							nonceStr: _this.orderInfo.nonceStr,
							// 固定值
							package: _this.orderInfo.package,
							// 解密方式
							signType: 'MD5',
							// 支付签名
							paySign: _this.orderInfo.paySign,
							success: function(res) {
								console.log('success');
								uni.redirectTo({
									url: '/pagesRefuel/orderSuccess/index?orderNo=' + _this
										.oilOrder.orderNo,
								})
							},
							fail: function(err) {
								request({
									url: "/business/allOrderInfo/orderStatus",
									method: 'post',
									data: {
										"orderNo": res.data.data.orderNo,
										"status": "payFail"
									},
								}).then((res) => {
									uni.showToast({
										title: "支付失败!",
										icon: "error"
									})
								})
								console.log('fail:', err);
							}
						});
					}
					if (_this.appltType == "ALIPAY") {
						my.tradePay({
							tradeNO: res.data.data.reservedTransactionId
						}, function(resp) {
							if (resp.resultCode == '9000') {
								console.log("支付成功")
								uni.redirectTo({
									url: '/pagesRefuel/orderSuccess/index?orderNo=' + _this
										.oilOrder.orderNo,
								})
							} else {
								request({
									url: "/business/allOrderInfo/orderStatus",
									method: 'post',
									data: {
										"orderNo": res.data.data.orderNo,
										"status": "payFail"
									},
								}).then((res) => {
									uni.showToast({
										title: "支付失败!",
										icon: "error"
									})
								})
								console.log('支付失败，' + resp.resultCode);
							}
						});
					}
				})
			},
			changeAmount() {
				if (this.oilOrder.orderAmount) {
					this.oilOrder.payAmount = this.oilOrder.orderAmount - this.oilOrder.discountAmount
					this.oilOrder.oilNum = (this.oilOrder.orderAmount / this.oilPrice).toFixed(2)
					this.getCouponList()
					this.getConsumeInfo()
				}
			},
			getCouponList() {
				request({
					url: "pay/paycenter/getCoupon",
					method: 'post',
					data: {
						userId: uni.getStorageSync('userId'),
						oilId: this.oilOrder.oils,
						oilAmount: this.oilOrder.orderAmount,
						oilLiter: this.oilOrder.oilNum,
						payWay: this.oilOrder.payType,
						oilId: this.oilOrder.oils
					},
				}).then((res) => {
					console.log(res, 701);
					this.couponList = res.data
				})
			},
			// 选择优惠券
			chooseCoupon(data) {
				this.oilOrder.discountAmount = data.disAmount
				this.oilOrder.couponId = data.id
			},
			Couponclose() {
				this.selectCoupon = false
			},
			setabIndex(index) {
				this.tabIndex = index
			},
			cardTypeclose() {
				this.cardType = false
			},
			setQindex(index, data) {
				this.qhindex = index
				this.oilGunList = data.oilGunList
				if (data.oilGunList.length > 0) {
					this.oilOrder.oilGunNum = data.oilGunList[0].id
					this.oilPrice = data.oilPrice
					this.oilUnit = data.unit
					this.oilOrder.oils = data.oilNameId
					this.oilOrder.tankId = data.oilGunList[0].tankId
					uni.setStorageSync("tankId", data.oilGunList[0].tankId)
					this.oilGunName = data.oilGunList[0].gunName
				}

				this.oilTypeName = data.oilType + data.oilName
			},
			ypClose() {
				this.selectShow = false
			},
			setadindex(index, data) {
				this.anIndex = index
				this.Selectemployees = false
				this.oilOrder.staffId = data.id
				this.staffName = data.realName
			},
			setQhindex(index, data) {
				this.qhindex = index
				this.selectShow = false
				this.oilOrder.oilGunNum = data.id
				this.oilOrder.tankId = data.tankId
				uni.setStorageSync("tankId", data.tankId)
				this.oilGunName = data.gunName
			},

			Confirmclose() {
				this.ConfirmPayment = false
			},
			goPayment() {
				// 判断一下按照什么方式支付的
				if (this.oilOrder.orderAmount <= 0) {
					uni.showToast({
						title: "请先输入加油金额",
						icon: 'none'
					})
					return;
				}
				let _this = this
				request({
					url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
					method: 'get',
				}).then((res) => {
					if (res.data.storedQuantity - _this.oilOrder.oilNum < 0) {
						uni.showToast({
							title: "所加油的升数大于油罐内的升数，请重新选择加油升数",
							icon: "none"
						})
						return;
					} else {
						_this.ConfirmPayment = true
						if (_this.oilOrder.payType == 'card_value') {
							_this.oilOrder.balanceAmount = _this.oilOrder.payAmount
							_this.oilOrder.payAmount = 0
						}
						if (_this.oilOrder.payType == 'fule_card') {
							_this.oilOrder.oilCardAmount = _this.oilOrder.oilNum
							_this.oilOrder.payAmount = 0
						}
						if (_this.oilOrder.payType == 'car_card_value') {
							_this.oilOrder.balanceAmount = _this.oilOrder.payAmount
							_this.oilOrder.payAmount = 0
						}
						if (_this.oilOrder.payType == 'car_fule_card') {
							_this.oilOrder.oilCardAmount = _this.oilOrder.oilNum
							_this.oilOrder.payAmount = 0
						}
						_this.addOrder()
					}
				})

			},
			// 点击支付添加油品订单信息
			addOrder() {
				this.oilOrder.storeId = uni.getStorageSync('storeId')
				request({
					url: "business/oilOrder/addOilOrder",
					method: 'post',
					data: this.oilOrder,
				}).then((res) => {
					this.oilOrder = res.data
				})
			},
			Selectclose() {
				this.Selectemployees = false
			},
			close() {
				this.PaymentDetails = false
			},
			// 获取当前位置
			getAddress(storeId) {
				let _this = this;
				uni.getLocation({
					// 谷歌使用wgs84  其他使用gcj02
					type: 'gcj02', // 使用国测局坐标系
					success: function(res) {
						if (_this.longitude == "" && _this.latitude == "") {

							_this.longitude = res.longitude;
							_this.latitude = res.latitude
						}
						console.log('经度: ' + _this.longitude);
						console.log('纬度: ' + _this.latitude);
						request({
							url: 'business/storeInformation/store/recentlyStore',
							method: 'post',
							data: {
								"lon": _this.longitude,
								"lat": _this.latitude,
								"storeId": storeId,
								"isLogin": _this.AppToken ? "0" : "1", // 0为登录

							},
						}).then((response) => {
							console.log(response, "2154");
							// uni.showToast({
							// 	title:"121984:"+storeId
							// })
							if (response.data.store) {
								_this.store = response.data.store
								uni.setStorageSync("storeId", response.data.store.id)
								uni.setStorageSync("chainStoreId", response.data.store.chainStoreId)
								_this.getOilNumber(response.data.store.id);
							} else {
								uni.showToast({
									title: "当前店铺已关闭！！！",
									icon: "none"
								})
							}

						}).catch(err => {})
					},
					fail: function(err) {
						_this.getStore(2);
						console.log('获取位置信息失败: ' + err.errMsg);
					}
				});
			},
			// 通过sn获取storeId
			getStoreIdBySn(sn) {
				request({
					url: "business/tag/oilTag/getSn/" + sn,
					method: 'get'
				}).then((res) => {
					uni.setStorageSync("storeId", res.data.storeId)
					if (res.data.storeId) {
						this.getStore(uni.getStorageSync("storeId"));
					} else {
						this.getAddress(uni.getStorageSync("storeId"));
					}
				})
			},
			// 获取门店信息
			getStore(id) {
				if (!id) {
					return;
				}
				let _this = this;
				request({
					url: "business/storeInformation/store/queryStoreById",
					method: 'post',
					data: {
						"storeId": id
					},
				}).then((res) => {
					_this.getOilNumber(id);
					_this.getStaffList(id)
					_this.store = res.data
					_this.storeId = res.data.id;
					uni.setStorageSync("storeId", _this.store.id)
					uni.setStorageSync("chainStoreId", _this.store.chainStoreId)
				}).catch(err => {})
			},
			// 获取当前店铺油号信息
			getOilNumber(storeId) {
				let _this = this;
				request({
					// url: "business/petrolStationManagement/oilNumber/getOilNumberName/" + storeId,
					url: "business/petrolStationManagement/oilGun/selectByNumber/" + storeId,
					method: 'get',
				}).then((res) => {
					_this.oilNumberList = res.data;
					if (res.data.length > 0) {
						// _this.getOilGun(res.data[0].numberId);
						_this.oilPrice = res.data[0].oilPrice
						_this.oilUnit = res.data[0].unit
						_this.oilOrder.oils = res.data[0].oilNameId
						_this.oilTypeName = res.data[0].oilType + res.data[0].oilName
						if (res.data[0].oilGunList) {
							_this.oilGunList = res.data[0].oilGunList
							_this.oilOrder.oilGunNum = res.data[0].oilGunList[0].id
							_this.oilOrder.tankId = res.data[0].oilGunList[0].tankId
							uni.setStorageSync("tankId", res.data[0].oilGunList[0].tankId)
							_this.oilGunName = res.data[0].oilGunList[0].gunName
						}
					}
				})
			},
			// 获取当前店铺油号对应的油枪信息
			getOilGun(numberId) {
				let _this = this;
				request({
					url: "business/petrolStationManagement/oilGun/queryGunList/" + numberId,
					method: 'get',
				}).then((res) => {
					_this.oilGunList = res.data
					_this.oilOrder.oilGunNum = res.data[0].id
				})
			},
			// 获取当前店铺员工信息列表
			getStaffList(storeId) {
				if (!storeId) {
					return;
				}
				let _this = this;
				request({
					url: "business/member/staff/queryList1/" + storeId,
					method: 'get',
				}).then((res) => {
					_this.staffList = res.data
					if (res.data && res.data.length > 0) {
						_this.oilOrder.staffId = res.data[0].id
						_this.staffName = res.data[0].realName
					}
				})
			},
			// 跳转订单详情页，并支付
			getSIndex(index, id) {
				this.sindex = index
				// 校验油罐内油量是否足够
				request({
					url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
					method: 'get',
				}).then((res) => {
					if (res.data.storedQuantity - this.liters < 0) {
						uni.showToast({
							title: "所加油的升数大于油罐内的升数，请重新选择加油升数",
							icon: "none"
						})
						return;
					} else {
						this.toPayment(id)
					}
				})
			},
			// 去支付（之前的）
			toPayment(id) {
				this.oilOrder.orderAmount = this.value
				this.oilOrder.storeId = this.storeId
				this.oilOrder.staffId = id
				this.oilOrder.oilNum = (this.value / this.oilPrice).toFixed(2)
				this.oilOrder.tankId = uni.getStorageSync("tankId")
				this.oilOrder.oilTagSn = uni.getStorageSync("sn")
				let _this = this;
				// 添加油品订单信息
				request({
					url: "business/oilOrder/addOilOrder",
					method: 'post',
					data: _this.oilOrder,
				}).then((res) => {
					uni.navigateTo({
						url: '/pagesRefuel/orderDetail/index?orderNo=' + res.data,
					})
				})
			},
			// 选择加油金额
			getAIndex(index, amount) {
				this.value = amount + ""
				this.aindex = index
				this.liters = (amount / this.oilPrice).toFixed(2)
			},
			// 选择油品信息
			getHIndex(index, data) {
				this.hindex = index
				// console.log(data)
				// this.getOilGun(data.numberId)
				this.oilGunList = data.oilGunList
				this.oilOrder.oilGunNum = data.oilGunList[0].id
				this.oilPrice = data.oilPrice
				this.oilUnit = data.unit
				this.oilOrder.oils = data.oilNameId
				uni.setStorageSync("tankId", data.oilGunList[0].tankId)
			},
			// 选择油枪信息
			getQIndex(index, data) {
				this.qindex = index
				this.oilOrder.oilGunNum = data.id
				uni.setStorageSync("tankId", data.tankId)
			},
			// 数字键盘确定按钮
			submitAmount() {
				// 校验油罐内油量是否足够
				request({
					url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
					method: 'get',
				}).then((res) => {
					if (res.data.storedQuantity - this.liters < 0) {
						uni.showToast({
							title: "所加油的升数大于油罐内的升数，请重新选择加油升数",
							icon: "none"
						})
						return;
					} else {
						if (this.value != "" && this.qindex != null) {
							this.show = false
							if (uni.getStorageSync("inviteStaffId") || this.staffList.length == 0) {
								this.toPayment(uni.getStorageSync("inviteStaffId"))
							} else {
								// this.$refs.popup.open('bottom')
								this.toPayment(uni.getStorageSync("inviteStaffId"))
							}
						} else {
							if (this.value == "") {
								uni.showToast({
									title: "请输入加油金额",
									icon: "error"
								})
							} else {
								uni.showToast({
									title: "请选择油枪号",
									icon: "error"
								})
							}
						}
					}
				})


			},
			changeVal(val) {
				this.value = val;
				this.liters = (this.value / this.oilPrice).toFixed(2)
			},
			backspaceVal(val) {
				this.value = val;
				if (val == "") {
					this.amount = 0
					this.liters = 0
				} else {
					this.amount = val;
					this.liters = (this.value / this.oilPrice).toFixed(2)
				}
			},
			// 判断token是否与当前连锁店id相同
			async getTheJudgmentIsTheSame() {
				if (this.AppToken) {
					await request({
						url: 'chainStoreInfo/theJudgmentIsTheSame',
						method: 'get',
						data: {
							"chainStoreId": uni.getStorageSync("chainStoreId")
						}
					}).then(res => {
						if (!res.data) {
							uni.removeStorageSync("App-Token");
						}
					})
				}

				if (uni.getStorageSync("appltType") == "WECHAT") {
					// 判断当前登录的code是否相同
					wx.login({
						success(res) {
							console.log(res);
							if (res.code) {
								//发起网络请求
								request({
									url: 'clientApi/sign/mpWxLogin2',
									method: "POST",
									data: {
										code: res.code,
										isRefuel: true,
									}
								}).then(resp => {
									if (!resp.data) {
										uni.removeStorageSync("App-Token");
									}
								})
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}

				if (uni.getStorageSync("appltType") == "ALIPAY") {
					my.getAuthCode({
						scopes: 'auth_base',
						success: res => {
							const authCode = res.authCode;
							console.log(res)
							request({
								url: "clientApi/sign/alipayLogin/getUserid2",
								method: 'post',
								data: {
									authCode: authCode,
									storeId: uni.getStorageSync("storeId"),
									isRefuel: true,
								},
							}).then((resp) => {
								if (!resp.data) {
									uni.removeStorageSync("App-Token");
								}
							})
						},
						fail: err => {
							console.log('my.getAuthCode 调用失败', err)
						}
					});
				}
			},
		}

	}
</script>

<style scoped lang="scss">
	.content {
		background: #ffffff;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 10px;

	}

	.my-header {
		width: 100%;
		height: 88px;

		display: flex;
		align-items: center;
		justify-content: center;
		color: white;

		.my-text {
			margin-top: 40px
		}

		position: fixed;
		top: 0px;
	}

	.top {
		width: 100%;
		height: 200px;
		box-sizing: border-box;
		padding: 1px;

	}

	.top-box {
		width: 90%;
		height: 110px;
		background-color: #ffffff;
		border-radius: 8px;
		margin: 10px auto;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		justify-content: space-between;

	}

	.top-title {
		font-size: 16px;
	}

	.top-img {
		width: 46px;
		height: 46px;
		background-color: #eee;
		border-radius: 6px;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top-hui {
		font-size: 14px;
		margin: 5px 0px;
		color: #999999;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.top-hong {
		font-size: 16px;
		font-weight: bold;
		color: #ff0000;
	}

	.dis {
		display: flex;
		margin: 0px 20px;
	}

	.bulu {
		color: #304fff;
	}

	.bulu-icon {
		width: 120px;
		height: 20px;
		font-size: 12px;
		color: #304fff;
		border: 1px solid #304fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrap-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.wrap-box1 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		overflow-y: scroll;
	}

	.box-oil {
		width: 23%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
		background: #f7f7f7;
		margin-right: 5px;
		margin-top: 5px;
		padding: 12px 0px;
		border-radius: 6px;
	}

	.box-oil1 {
		width: 29%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
		background: #f7f7f7;
		margin-right: 13px;
		margin-top: 5px;
		padding: 12px 0px;
		border-radius: 6px;
		margin-bottom: 10px;
	}

	.box-oil2 {
		width: 28%;
		height: 25px;
		line-height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
		background: white;
		margin-right: 13px;

		padding: 12px 0px;
		border-radius: 6px;
	}

	.fa-box {
		width: 90%;
		margin: 20px auto;
	}

	.fa-title {
		font-size: 18px;
		margin: 10px 0px;
	}

	.xz {
		color: #ffffff;
		background: #1678ff;
	}

	.anniu {
		width: 90%;
		margin: 10px auto;
		height: 40px;
		background: #1678ff;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
	}

	.inputkuang {
		width: 100%;
		height: 40px;
		border: 1px solid #304fff;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 10px;
	}

	.sbox {
		width: 33%;

	}

	.sbox-hui {
		width: 33%;
		text-align: right;
		color: #999999;
	}

	.input_kuang {
		width: 100%;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.leftIput {
		box-sizing: border-box;
		padding-left: 10px;
		display: flex;
		align-items: center;
	}

	.rr_box {
		width: 80px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 1px solid #eee;
	}

	.pkuang {
		box-sizing: border-box;
		padding: 10px 20px;
	}

	.title_ {
		font-weight: 600;
		font-size: 16px;
		color: #333333;
		margin: 10px 0px;
	}

	.b_ {
		width: 90%;
		border-bottom: 1px solid #eee;
		margin: 5px auto;
	}

	.d-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding: 10px 0px;
	}

	.br-box {
		width: 85%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.d-s {
		display: flex;
		align-items: center;
	}

	.new-box {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		border-bottom: 1px solid #EEEEEE;
	}

	.bsd {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bs-box {
		box-sizing: border-box;
		width: 100%;
		padding: 20px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.anniuf {
		width: 90px;
		height: 30px;
		background: #FA6400;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.onetitle {
		font-weight: 600;
		font-size: 24px;
		color: #333333;
	}

	.orsize {
		font-size: 12px;
		color: #FA6400;
	}

	.popup-box {
		border-radius: 10px;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
	}

	.p_title {
		text-align: center;
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.p-tab {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
		padding: 0px 15px;
		color: #333333;
	}

	.p_bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #666666;
		margin: 5px auto;
	}

	.p_x {
		width: 100%;
		background: #eee;
		height: 1px;
		margin: 10px auto;
	}

	.r-size {
		font-size: 14px;
		color: #E02020;
	}

	.p_ds {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.anxuan {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 1px solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.anxuan1 {

		border: 1px solid #FF9655 !important;


	}

	.dian {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #999999;
	}

	.dian1 {
		background: #FF9655 !important;
	}

	.sm-size {
		font-size: 12px;
		color: #333333;
	}

	.annius {
		width: 305px;
		height: 40px;
		background: #FA6400;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 15px auto;
		margin-top: 35px;
	}

	.wr_box {
		display: flex;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
	}

	.xanniu {
		width: 32%;
		box-sizing: border-box;
		padding: 10px;
		text-align: center;
		border: 1px solid #EEEEEE;
		margin-right: 1%;
		margin-bottom: 4%;
		font-size: 14px;
	}

	.acvit {
		border: 1px solid #FA6400 !important;
		background: rgba(250, 100, 0, 0.15) !important;
		color: #FA6400 !important;

	}

	.tap-top {
		white-space: nowrap;
		margin-bottom: 15px;
	}

	.sz {

		border: 1px solid #EEEEEE;
		box-sizing: border-box;
		display: inline-block;
		font-size: 14px;
		color: #333333;
		border-radius: 50px;
		padding: 5px 15px;
		margin-right: 10px;
	}

	.c_pox {
		height: 75px;
		width: 100%;
		margin: 10px auto;
		background: #FA6400;
		box-sizing: border-box;
		padding: 10px;
		color: #fff;
		background: url('../../static/imgs/czktc.png') no-repeat;
		background-size: 100% 100%;
	}

	.c_bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.anniubai {
		width: 50px;
		height: 20px;
		background: #FFFFFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FA6400;
		font-size: 14px;
	}

	.or {
		color: #FA6400 !important;
	}

	.couponBox {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		margin: 15px auto;
		border: 1px solid #FA6400;
	}

	.couponBox_h {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		margin: 15px auto;
		border: 1px solid #999;
	}

	.cou_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.c-r-num {
		font-weight: 600;
		font-size: 16px;
		color: #E02020;
	}

	.c-h-num {
		font-weight: 600;
		font-size: 16px;
		color: #999;
	}

	.c_title {
		font-size: 14px;
		color: #333333;
	}

	.qaz {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 1px solid #999999;
		margin-right: 5px;
	}

	.sm_r-zie {
		font-weight: 400;
		font-size: 10px;
		color: #E02020;
		display: flex;
		align-items: center;

	}

	.sm_h-zie {
		font-weight: 400;
		font-size: 10px;
		color: #999;
		display: flex;
		align-items: center;

	}

	.sm_size {
		font-size: 10px;
		color: #333333;
		width: 80%;
		white-space: nowrap;
		//不换行
		overflow: hidden; //超出部分隐藏
		text-overflow: ellipsis; //文本溢出显示省略号
	}

	.sb_size {
		font-size: 10px;
		color: #333333;
		width: 80%;
		white-space: nowrap; //不换行
		overflow: hidden; //超出部分隐藏
		text-overflow: ellipsis; //文本溢出显示省略号
	}

	.sb_xl {
		white-space: pre-wrap !important;
	}

	.dashed_box {
		width: 100%;
		border-bottom: 1px dashed #E02020;
		margin: 10px auto;
	}

	.dashed_box_h {
		width: 100%;
		border-bottom: 1px dashed #999;
		margin: 10px auto;
	}
</style>