<template>
	<view class="det-wrap">
		<w-navbar title="配件押金"></w-navbar>
		<view class="content">
			<view class="toolbar">
				<view class="refund" @tap="refund">退押金</view>
			</view>
			<view class="deposit">
				<view class="title">我的配件押金</view>
				<view class="amount"><text class="prefix">￥</text>{{ amount }}</view>
			</view>
			<view class="rules">
				<view class="title">配件押金规则</view>
				<view class="item" v-for="(item, index) in rules" :key="index">
					<view class="question">
						<view class="qa-icon danger-bg">Q</view>
						<view class="txt">{{ item.question }}</view>
					</view>
					<view class="answer">
						<view class="qa-icon default-bg">A</view>
						<view class="txt">{{ item.answer }}</view>
					</view>
					<u-divider v-show="rules.length != (index+1)" half-width="315" border-color="#F4F5F7" height="20"></u-divider>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: [
					{
						question: '为什么缴纳配件押金？',
						answer: '充电桩为客户私人设备，由扳手会保管代发，为安装流程顺利进行，在接单至订单完工过程中由技工师傅保管，因此需缴纳一定额度配件押金，押金可退还。'
					},
					{
						question: '退还配件押金说明',
						answer: '技工师傅与扳手会结束合作关系后即可申请退还缴纳的配件押金。'
					}
				],
			};
		},
		computed: {
			amount() {
				return this.vuex_settled && this.vuex_settled.hasPaid || '0.00';
			},
			settled() {
				return this.vuex_settled && this.vuex_settled.record || null
			},
		},
		onLoad() {
			getApp().trackPage('配件押金列表页')
			if(!this.vuex_token) {
				this.$u.route({url: 'pages/login/index'})
			} else if(!this.settled) {
				this.getData();
			}
		},
		methods: {
			getData() {
				let self = this
				getApp().getBaseInfo(self);
			},
			refund() {
				this.$u.route({
					url: "pages/mine/customer/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.det-wrap {
	background-color: #F4F5F7;
	padding: 30rpx;
	
	.content {
		padding: 30rpx;
		width: 690rpx;
		min-height: 1120rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.toolbar {
			align-self: flex-end;
			.refund {
				text-align: center;
				width: 88rpx;
				height: 40rpx;
				background: #F4F5F7;
				border-radius: 26rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #2272FF;
				line-height: 40rpx;
			}
			
		}
		.deposit {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.title {
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
			}
			.amount {
				margin-top: 60rpx;
				font-size: 72rpx;
				font-weight: bold;
				color: #2272FF;
				line-height: 72rpx;
				.prefix{
					font-size: 40rpx;
				}
			}
		}
		.rules {
			align-self: flex-start;
			margin-top: 160rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 32rpx;
				margin-bottom: 10rpx;
			}
			.item {
				margin-top: 40rpx;
				.question {
					display: flex;
					margin-bottom: 30rpx;
					.txt {
						margin-left: 20rpx;
						width: 554rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						line-height:40rpx;
					}
				}
				.answer {
					display: flex;
					margin-bottom: 30rpx;
					.txt {
						margin-left: 20rpx;
						width: 554rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 36rpx;
					}
				}
			}
		}
	}
}
.qa-icon {
	text-align: center;
	width: 40rpx;
	height: 40rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 40rpx;
}
.danger-bg {
	background: #FA5A49;
}
.default-bg {
	background: #2272FF;
}
</style>
