<template>
	<view class="file-box">
		<view class="u-flex" @click="selectUpload">
			<view class="txt u-flex-1">{{item.fieldsTitle}}</view>
			<u-icon name="arrow-right" color="#666" size="28"></u-icon>
		</view>
		<view class="pics u-flex u-flex-wrap">
			<u-image class="pic" v-for="(item,index) in imgList" width="170rpx" height="170" :src="item.path"></u-image>
			<!-- <u-image class="pic" v-for="item in 6" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image> -->
		</view>
		<u-popup v-model="maskShow" mode="center" width="500">
			<view class="upload-box u-p-30">
				<view class="title">请选择图片</view>
				<view class="u-flex u-row-between">
					<view class="upload-item u-text-center" @click="uploadFile('photo')">
						<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
						相册
					</view>
					<view class="upload-item u-text-center" @click="uploadFile">
						<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
						拍摄
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import objMixin from './objMixin'
	import baseFile from '@/components/upload/index';
	export default {
		name: 'XhFiles',
		components: {},
		mixins: [objMixin,baseFile],
		props: {},
		filters:{},
		data() {
			return {
				maskShow:false
			}
		},
		computed: {
			settings() {
				return this.item.settings || []
			}
		},
		watch: {},
		mounted() {},
		methods: {
			selectUpload(){
				// 弹窗展示
				this.maskShow = true
			},
			async uploadFile(type){
				const self = this
				if(type&&type==='photo'){
					// 直接打开相册
					let config = {
						options:{
							consourceType:['album'],//['album', 'camera']
						}
					}
					await this.chooseImage('qiniu',config)
					self.setValue()
					return
				}
				// 使用拍照工具拍摄
				
			},
			setValue() {
				const dataValue = []
				this.imgList.map(item=>{
					dataValue.push(item.key)
				})
				this.valueChange(dataValue)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pic{
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		&:nth-child(3n){
			margin-right: 0;
		}
	}
	// .list {
	// 	display: flex;

	// 	.txt {
	// 		color: #666;
	// 		padding: 10rpx;

	// 		&.active {
	// 			background-color: red;
	// 			color: #fff;
	// 		}
	// 	}
	// }
</style>
