<template>
	<view >
		<uni-grid column="4"   :showBorder="false" @change="change" >
			<view v-for="(item,index) in lists">
		    <uni-grid-item :index="index" >
				
		        <view style="border-radius: 5px;padding:10rpx;width:60rpx;height:60rpx;margin:5px 5px 0px 5px;vertical-align: middle; text-align: center;" >
					<image :src="item.url" style="width: 60px;height: 40px; "></image>
					<view class="title" style="width: 60px;height: 40px; ">{{item.title}}</view>
					</view>
		    </uni-grid-item>
		    </view>
		</uni-grid>
		
	
			<view class="page-body">
				<view class="page-section page-section-gap" style="text-align: center;">
					<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls="false"></audio>
				</view>
			</view>
			<view>
			        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
			        <button type="primary" @click="takePhoto">拍照</button>
			        <view>预览</view>
			        <image mode="widthFix" :src="src"></image>
			    </view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[{
				title:"采购入库单",url:"../../static/icon/crk.png"},
				{title:"成品入库单",	},
				{title:"材料出库单",	},
				{title:"调拨单",},
				],
				current: {
								poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
								name: '致爱丽丝',
								author: '暂无',
								src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
							},
							audioAction: {
								method: 'pause'
							}
			}
		},
		methods: {
			change(e){
				if(e.detail.index==0){
					uni.navigateTo({
					  url:'../cgorder/cgorder'
					 }) 
					
				}
				
				console.log(e.detail.index);
				},
				 takePhoto() {
				            const ctx = uni.createCameraContext();
				            ctx.takePhoto({
				                quality: 'high',
				                success: (res) => {
				                    this.src = res.tempImagePath
				                }
				            });
				        },
		}
	}
</script>
<style>
.title{
	font-size: 12rpx;
	color: #8f8f94;
	}
</style>