<template>
	<!-- 诚信保证金 -->
	<view class="bond">
		<far-bottom></far-bottom>
		<scroll-view :style="{ height: phoneHight }" :scroll-y="true">
			<image :src="rzType == 1 ? bondBackGz : bondBackQz" class="wid750 "></image>
			<view class="absolute0 ">
				<!-- 价格 -->
				<view v-if="priceList">
					<view class="priceList">
						<radio-group @change="radioChange">
							<label class="price-item" v-for="(item, index) in priceList" :key="index">
								<view><radio color="#FF4444" :value="item" :checked="index === current" /></view>
								<view style="font-size: 28upx;">¥{{ item }}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="marginAuto mainView">
					<view class="mainTitle p30">
						<view class="flex">
							<text class="font24  color999999 inlineBlock marinT2">诚信保证金</text>
							<text class="font28" :style="{ color: attMoneyInfo.is_money == 0 ? '#4ECA8F' : '#999999' }">
								{{ attMoneyInfo.is_money == 0 ? '未缴纳' : '已缴纳' }}
							</text>
						</view>
						<view class="marginT38">
							<text class="font24 colorFF4444">
								¥
								<text class="font46">{{ attMoneyInfo.money }}</text>
							</text>
						</view>
					</view>
					<view class="mainLine marinT9auto">
						<view class="leftdot"></view>
						<view class="rightdot"></view>
					</view>
					<view class="mainBody marinT9auto p30">
						<view><text class="font24 color333333">保证金说明:</text></view>
						<view class=" marginT17"><rich-text class="font24 color999999 pB30" :nodes="attMoneyInfo.bonddescription"></rich-text></view>
					</view>
				</view>

				

				

				<!-- 协议 -->
				<view class="marginT40">
					<view class="pL30">
						<view class="bor1gray" v-if="agree == false" @click="agree = true"></view>
						<image :src="imgfixUrls + 'merchant/tyXy.png'" class="image22" v-if="agree == true" @click="agree = false"></image>
						<text class="font24 color999999 marginL10">阅读并同意</text>
						<text class="font24 color4F6D8C" @click="showPop">《用户协议条款》</text>
					</view>
				</view>
				<!-- 协议 -->

				<!-- 提交按钮 -->
				<view
					class="submitButton marginT70Auto textC"
					:class="attMoneyInfo.is_money == 1 ? 'buttonJn' : rzType == 1 ? 'buttonGr' : 'buttonQy'"
					@click="bondOrder"
					v-if="agree == true"
				>
					<text class="colorW font28 lineHeight80">{{ attMoneyInfo.is_money == 0 ? '立即缴纳' : '已缴纳' }}</text>
				</view>
				<view class="submitButton1 marginT70Auto textC" v-if="agree == false">
					<text class="lineHeight80 colorW font28">{{ attMoneyInfo.is_money == 0 ? '立即缴纳' : '已缴纳' }}</text>
				</view>
				<!-- 提交按钮 -->

				<popAgreement :show="show" @clickmask="closePop" :buttonColor="buttonColor" :textInfo="attMoneyInfo.bondagreement"></popAgreement>
			</view>
		</scroll-view>
		<view  v-if="types == 1"><TabBars :tabBarAct="0" pageType="18"></TabBars></view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import TabBars from '@/components/template/tabBar.vue';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import popAgreement from '@/components/template/popAgreement';
export default {
	components: {
		popAgreement,
		TabBars
	},
	data() {
		return {
			agree: false,
			rzType: null,
			type: 1,
			show: false,
			buttonColor: '',
			phoneHight: null,
			attMoneyInfo: {},
			id: null,
			types: null,
			priceList:null,
			current:0
		};
	},
	onLoad(e) {
		let _this = this;
		_this.types = e.type;
		// debugger
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
			}
		});
		console.log(e, '0000000000000000');
		_this.rzType = e.rzType;
		if (_this.rzType == 1) {
			_this.buttonColor = 'rgba(255,68,68,1)';
			uni.getStorage({
				key: 'userinfo',
				success: async function(res) {
					_this.id = res.data.mid;
					_this.init(res.data.mid);
				}
			});
		} else {
			uni.getStorage({
				key: 'checkStoreid',
				success: function(res) {
					_this.id = res.data;
					_this.init(res.data);
				}
			});
			_this.buttonColor = 'rgba(51,136,255,1)';
		}
	},
	computed: {
		bondBackGz() {
			let _this = this;
			return _this.imageRoot + 'bondBackGz.png';
		},
		bondBackQz() {
			let _this = this;
			return _this.imageRoot + 'bondBackQz.png';
		}
	},
	methods: {
		radioChange(e){
			this.priceList.map((item,index)=>{
				if(e.detail.value == item){
					this.current = index;
				}
			})
			console.log(e,this.current);
		},
		init(mid) {
			let _this = this;
			_this.attMoney(mid);
		},
		// 保证金缴纳生成订单接口
		bondOrder() {
			let _this = this;
			let data = {
				type: _this.rzType,
				storeid: _this.id
			};
			if(_this.priceList){
				data.money = _this.priceList[_this.current];
			}
			App._post_form('&p=attestation&do=bondOrder', data, res => {
				App.navigationTo({
					url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=attestation'
				});
			});
		},
		// 获取保证金设置信息
		attMoney(mid) {
			let _this = this;
			let data = {
				type: _this.rzType,
				sid: mid
			};
			App._post_form('&p=attestation&do=attMoney', data, res => {
				_this.attMoneyInfo = res.data;
				_this.priceList = res.data.moneyarray;
			});
		},
		closePop() {
			let _this = this;
			_this.show = false;
		},
		showPop() {
			let _this = this;
			_this.show = true;
		}
	}
};
</script>

<style lang="less">
.submitButton1 {
	width: 690upx;
	height: 80upx;
	background: #999999;
	border-radius: 40upx;
	pointer-events: none;
}
.bor1gray {
	width: 21upx;
	height: 21upx;
	display: inline-block;
	background: white;
	border: 1upx solid #999999;
	border-radius: 50%;
}
.buttonGr {
	background: rgba(255, 68, 68, 1);
}
.buttonQy {
	background: rgba(51, 136, 255, 1);
}
.buttonJn {
	pointer-events: none;
	background: #999999;
}
.pB30 {
	padding-bottom: 30upx;
}
.lineHeight80 {
	line-height: 80upx;
}
.colorW {
	color: rgba(255, 255, 255, 1);
}
.marginT70Auto {
	margin: 70upx auto 20upx auto;
}
.submitButton {
	width: 690upx;
	height: 80upx;
	border-radius: 40upx;
}
.marginL10 {
	margin-left: 10upx;
}
.color4F6D8C {
	color: #4f6d8c;
}
.image22 {
	width: 22upx;
	height: 22upx;
}
.pL30 {
	padding: 0 30upx;
}
.marginT40 {
	margin-top: 40upx;
}
.marinT39 {
	margin-top: 39upx;
}
.pT30 {
	padding: 30upx 30upx 0 30upx;
}
.leftdot {
	display: inline-block;
	position: relative;
	right: 55upx;
	bottom: 20upx;
	background: #f8f8f8;
	width: 40upx;
	height: 40upx;
	border-radius: 50%;
}
.rightdot {
	display: inline-block;
	position: relative;
	left: 595upx;
	bottom: 20upx;
	background: #f8f8f8;
	width: 40upx;
	height: 40upx;
	border-radius: 50%;
}
.pL30 {
	padding: 0 30upx;
}
.marginT17 {
	margin-top: 17upx;
}
.color333333 {
	color: #333333;
}
.marginT38 {
	margin-top: 38upx;
}
.marinT2 {
	margin-top: 2upx;
}
.marinT9auto {
	margin: 9upx auto 0 auto;
}
.mainLine {
	width: 620upx;
	height: 2upx;
	background: repeating-linear-gradient(to right, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 3%, white 3%, white 5%, rgba(238, 238, 238, 1) 5%);
}
.priceList {
	padding: 30upx;
	background-color: #ffffff;
	margin: 30upx;
	border-radius: 10upx;
}
.price-item{
	height: 100upx;
	line-height: 100upx;
	display: flex;
	// margin: 20upx 0;
	border-bottom: 1upx dashed  #EEEEEE;
}
.inlineBlock {
	display: inline-block;
}
.color999999 {
	color: #999999;
}
.verticalM {
	vertical-align: middle;
}
.colorFF4444 {
	color: #ff4444;
}
.font24 {
	font-size: 24upx;
}
.font46 {
	font-size: 46upx;
}
.font28 {
	font-size: 28upx;
}
.flex {
	display: flex;
	justify-content: space-between;
}
.bond {
	font-size: 0;
	background-color: #f8f8f8;
}
.wid750 {
	width: 750upx;
	height: 340upx;
}
.absolute0 {
	position: absolute;
	top: 179upx;
	width: 750upx;
}
.mainView {
	width: 690upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.marginAuto {
	margin: auto;
}
.p30 {
	padding: 30upx;
}
.textC {
	text-align: center;
}
</style>
