<template>
	<view
	class="button-group"
	>
		<button
		v-if="!pickMode"
		class="download-btn btn"
		type="default"
		@click="openPickMode"
		>
			<text class="text">下载</text>
		</button>
		<template
		v-else>
			<button
			class="confirm-btn btn"
			type="default"
			@click="confirm"
			>
				<text class="text">确认下载</text>
			</button>
			<button
			class="cancel-btn btn"
			type="default"
			@click="cancel"
			>
				<text class="text">取消</text>
			</button>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			pickMode: {
				type: Boolean
			}
		},
		methods: {
			openPickMode () {
				this.$emit('changePickMode', true);
			},
			confirm () {
				this.$emit('downloadConfirm');
			},
			cancel () {
				this.$emit('changePickMode', false);
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.button-group
		padding: 30rpx 0
		flex-direction: row
		justify-content: center
		.btn
			width: 610rpx
			height: 80rpx
			border-radius: 49rpx
			border: 2rpx solid #FF920A;
			.text
				font-size: 30rpx;
				color: #FF920A;
			&.download-btn
				width: 610rpx
			&.confirm-btn
				width: 290rpx
			&.cancel-btn
				margin-left: 30rpx
				width: 290rpx
				background: #F3F4F5
				border: 2rpx solid transparent;
				.text
					color: #333
</style>