<template>
	<view>
		<view class="content photo_back" style="background-color: #000;">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" theme="light" />
			<view class="photo_main" :style="'margin-top:'+margin_top+'px'" style="width:100%;margin-left: 0;">
				<view class="photo_cartoon_2" v-if="loaded && cameraEnable">

					<camera flash="auto" :device-position="devicePosition" @error="errorCamera"
						style="width: 100%; height: 100%;">
					</camera>

				</view>

				<view class="photo_cartoon_2" v-else style="overflow: hidden;">
					<view style="display: flex;justify-content: center;margin-top: 200rpx;overflow:hidden;">请授权使用摄像头
					</view>
				</view>

				<view class="photo_cartoon_2_2">
					<view class="photo_cartoon_2_2_1">
						<image src="/static/img/photo/cartoon_4.png" />
					</view>
					<view class="photo_cartoon_2_2_2">
						<image src="/static/img/photo/cartoon_3.png" />
					</view>
					<view class="photo_cartoon_2_2_1">
						<image src="/static/img/photo/cartoon_5.png" />
					</view>
				</view>

			</view>

		</view>


	</view>
</template>

<script>
	import custom_navbar from "./components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: '卡通画风',
				margin_top: 0,
				loaded: false,
				cameraEnable: true,
				loop: false,
				devicePosition: "back",
				use_camera: 1,
				cameraContext: {},
			}
		},

		mounted() {
			setTimeout(() => {
				this.loaded = true;
				this.loopGetCameraInfo();
			}, 500);
		},
		onShow() {
			if (this.loaded && !this.loop) {
				// 轮询当前相机权限状态，当用户授权则将cameraEnable设置为true
				this.loopGetCameraInfo();
			}
		},
		onLoad() {
			if (uni.createCameraContext) {
				this.cameraContext = uni.createCameraContext()
			} else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}
		},
		methods: {

			getNavHeight(e) {
				this.margin_top += e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';
</style>