<template>
	<view>
		<u-mask :show="isShow" :isBack="false">
			<cpn-navbar title="拍照上传" id='record-nav-bar'></cpn-navbar>
			<view class="content" :style="{'height':`calc(100vh - ${height}px)`}">
				<view class="content__img">
					<u-upload ref="uUpload" :custom-btn="true" :action="action" :auto-upload="false"
						:source-type="['camera']">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" color="#c0c4cc" label="点击拍摄" label-pos="bottom"></u-icon>
						</view>
					</u-upload>
				</view>
				<view class="content__btn">
					<u-button :custom-style="btnStyle1" shape="circle" type="error"
						@click="$emit('update:isShow',false),clearList()">取消</u-button>
					<u-button :throttle-time="2000" :custom-style="btnStyle2" shape="circle" type="primary" @click.stop="submit">确认</u-button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			type: Number
		},
		data() {
			return {
				height: 1400,
				btnStyle1: {
					letterSpacing: "4rpx",
					fontWeight: "600",
					width: '330rpx',
					background: "linear-gradient(133deg,#ff832a 36%, #FA3534)",
					filter: "drop-shadow(0 0 6rpx #FA3534) drop-shadow(0 0 10rpx #ff832a)"
				},
				btnStyle2: {
					letterSpacing: "4rpx",
					fontWeight: "600",
					width: '330rpx',
					background: "linear-gradient(133deg,#03d5ff 36%, #108cff)",
					filter: "drop-shadow(0 0 6rpx #108cff) drop-shadow(0 0 10rpx #03d5ff)"
				}
			}
		},
		methods: {
			clearList() {
				this.$refs.uUpload.clear()
			},

			submit() {
				if (!this.$refs.uUpload.lists || this.$refs.uUpload.lists.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择拍摄照片'
					})
					return
				}
				let fileList = this.$refs.uUpload.lists.map(item => {
					return item.url
				})
				this.$emit('confirm', fileList, this.type)
			},
		},
		computed: {

		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#record-nav-bar').boundingClientRect(data => {
				this.height = data.height
			}).exec();
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 1410rpx;

		padding: 20rpx;
		position: relative;

		&::before {
			content: '';
			width: 1800rpx;
			height: 1800rpx;
			border-radius: 100%;
			background: rgb(250, 250, 250);
			box-shadow: 0 6rpx 40rpx 6rpx #1479FF;

			position: absolute;
			top: -800rpx;
			left: calc(375rpx - 900rpx);
		}

		&__btn {
			display: flex;
			justify-content: space-between;

			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 40rpx;
		}
	}

	.slot-btn {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border: 2rpx #108cff solid;
		border-radius: 10rpx;
		box-sizing: content-box;
		filter: drop-shadow(0 0 4rpx #0fc7ff) drop-shadow(0 0 6rpx #00eaff);
		animation: flame 2s ease-in-out infinite alternate;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	@keyframes flame {
		to {
			filter: drop-shadow(0 0 2rpx #1063cf) drop-shadow(0 0 5rpx #1479FF) drop-shadow(0 0 7rpx #0fc7ff) drop-shadow(0 0 10rpx #08ffef);
		}
	}
</style>
