<template>
	<view class="">
		<view class="inp_warp">
			<view class="inp_title key"><text :class="flag ? 'b_color' : 'bo_color'  ">*</text>{{title}}:</view>
			<view class="form_right" @click="toUploadFile" v-if="isEdit">
				<view>点击上传</view>
				<view class="iconfont icon-you"></view>
			</view>
		</view>
		<view class="doc_item" v-for="(item,index) in fileList" :key="index">
			<image :src="BASE_IMG_URL+'/file-clip.png'" class="remarkimg" ></image>
			<view class="doc_name" @click="toLookFile(item)">{{item.name}}</view>
			<image :src="BASE_IMG_URL+'/file_del.png'" @click="delFile(index)" class="deleimg" v-if="isEdit"></image>
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	import { uploadUrl } from '@/api/index.js'
	
	export default{
		props:{
			title:{
				type:String,
				default:'附件'
			},
			flag:{     //是否必填
				type:Boolean,
				default:false
			},
			fileList:{
				type:Array,
				default:[]
			},
			isEdit:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL
			}
		},
		methods:{
			//上传附件
			toUploadFile() {
				wx.chooseMessageFile({
					count:1,
					success:(res)=>{
						let data = res.tempFiles[0]
						this.Upload(data.path,data.name)
					}
				})
			},
			Upload(file,name) {
				uni.uploadFile({
					url: uploadUrl,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					filePath: file,
					formData:{name},
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code == 1) {
							let res = data.data
							res.name = name
							res.file_path = res.url
							console.log(res,'上传文件')
							this.$emit('uploadFile',res)
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//查看附件
			toLookFile(item) {
				this.openCommonFile(item)
			},
			//删除附件
			delFile(id,index) {
				console.log('删除文件')
				this.$emit('delFile',index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.doc_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24rpx 35rpx;
		background:#fff;
		border-bottom:1rpx solid #EDEDED;
		.remarkimg{
			width:31rpx;
			height:33rpx;
			margin-right:15rpx;
		}
		.deleimg{
			width:44rpx;
			height:44rpx;
		}
		.doc_name{
			width:575rpx;
			font-size:24rpx;
			color:#333;
			overflow: hidden;
		}
	}
	.inp_warp {
		padding:30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EDEDED;
		.inp_title {
			font-size: 32rpx;
			color:#999;
		}
		.form_right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #999;
			min-width:450rpx;
			text-align: right;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-left:24rpx;
			}
			.rightinput{
				width:100%;
				text-align: right;
			}
		}
		.add_in{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:26rpx;
			color:#FFA205;
			.icon-jiahaocu{
				font-size:28rpx;
				color:#FFA205;
				margin-right:5rpx;
			}
		}
	}
</style>