<template>
	<view>
		<view class="" v-show="!subitShow">
			<view class="cu-list menu  ">
				<view class="cu-item solid-top radius">
					<view class="flex justify-start align-center">
						<text class="text-bold margin-right">项目信息</text>
						<text>
							{{form.projectName}}
						<text class="text-price text-red margin-left" >{{form.transactionPrice}}</text>
						</text>
					</view>
				</view>
				<view class="cu-item solid-top radius">
					<view class="flex justify-start align-center">
						<text class="text-bold margin-right">服务时间</text>
						<text>
							{{form.docDate}}
						</text>
					</view>
				</view>
				<view class="cu-item solid-top">
					<view class="flex justify-start align-center">
						<text class="text-bold margin-right">服务人员</text>
						<text>
							<view class="" v-for="(item,index) in  entities" :key='index'>
								<text>{{item.brandNumber}} - </text>
								<text>{{item.saleStaffName}}</text>
							</view>
						</text>
					</view>
				</view>
			</view>


			<view class="cu-bar bg-white  margin-top">
				<view class="action">
					<text class="cuIcon-titles text-red"></text>
					<text>使用前效果</text>
				</view>
			</view>
			<textarea class="texta" v-model="form.symptomatic" placeholder="请输入使用前效果" />
			<view class="flex solid-bottom padding align-center">
				<view v-for="(item,index) in before" :key='index'>
					<view class="huiyuan_img">
						<image @click="_previewImage(item.url)" style='width: 120upx;height: 120upx;' :src="item.url">
						</image>
						<text class="cuIcon-delete text-red" @click="delFile(item,index)"
							style="position: absolute;bottom: 5upx;right: 5upx; color: #000000;"></text>
					</view>
				</view>
				<view class="cuIcon-add addiamge" @click="beforeupload"></view>
			</view>
			<view class="cu-bar bg-white  margin-top">
				<view class="action">
					<text class="cuIcon-titles text-red"></text>
					<text>使用后效果</text>
				</view>
			</view>
			<textarea class="texta" v-model="form.nursingEffect" placeholder="请输入使用后效果" />
			<view class="flex solid-bottom padding align-center">
				<view v-for="(item,index) in later" :key='index'>
					<view class="huiyuan_img">
						<image @click="_previewImage(item.url)" style='width: 120upx;height: 120upx;' :src="item.url">
						</image>
						<text class="cuIcon-delete text-red" @click="delFile(item,index)"
							style="position: absolute;bottom: 5upx;right: 5upx; color: #000000;"></text>
					</view>
				</view>
				<view class="cuIcon-add addiamge" @click="laterupload"></view>
			</view>
			<view class="cu-bar bg-white  margin-top">
				<view class="action">
					<text class="cuIcon-titles text-red"></text>
					<text>意见反馈</text>
				</view>
			</view>
			<textarea class="texta" v-model="form.feedBack" placeholder="请填写您要反馈的意见" />
			<view class="sub-titles">
				<button class="bg-red" @click="subit">提 交</button>
			</view>
		</view>
		<view class="" v-show="subitShow">
			<view class="solids-bottom padding-xs flex align-center">
				<view class="flex-sub text-center">
					<view class="solid-bottom text-sl padding">
						<text class=" cuIcon-roundcheckfill text-green"></text>
					</view>
					<view class="padding " @click="backTar">意见反馈成功 , 请返回上一级</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import host from "../../../../../utils/host.js"
	export default {
		components: {},
		data() {
			return {
				imageList: [],
				image: '',
				before: [],
				later: [],
				entities:[],
				subitShow: false,
				form: {
					docNum: null,
					docDate: null,
					projectName: null,
					projectId: null,
					memberPhone: null,
					feedBack: null,
					symptomatic: null,
					nursingEffect: null,
					uploadFiles: [],
				},
				tempImg: [],
				userInfo: {}

			}
		},
		methods: {
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			subit: function() {
				this.form.source = 0
				this.$api.addProjectProgress(this.form).then(res => {
					if (res.code == '000000') {
						uni.showToast({
							title: res.message,
							icon: "success",
							duration: 3000
						});
						this.subitShow = true
					} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function() {}
						})
					}
				})
			},
			beforeupload: function() {
				var that = this
				uni.chooseImage({
					count: 5, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let image = []
						that.tempImg = res.tempFilePaths.map(item => {
							return {
								name: 'flieList',
								url: item
							}
						})
						var tempFilePaths = res.tempFilePaths
						let header = {
							'token': that.userInfo.token
						}
						uni.uploadFile({
							url: host +
							'/demay/ssm/memberCs/addFile', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'fileList',
							header: header,
							formData: {
								storeId: that.userInfo.storeId
							},
							success: (res) => {
								let row = JSON.parse(res.data)
								console.log(row);
								if (row.code == '000000') {
									row.data.type = 0
									that.form.uploadFiles.push(row.data)
									tempFilePaths.forEach(item => {
										let items = {
											url: item,
											filePath: row.data.filePath,
											fileName: row.data.fileName,
											type: 0
										}
										image.push(items)
									})
									that.before = [...that.before, ...image]
								} else {
									uni.showModal({
										title: '提示',
										content: row.message,
										showCancel: false,
										success: function() {}
									})
								}
							}
						});
					}
				});
			},
			laterupload: function() {
				var that = this
				uni.chooseImage({
					count: 5, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log('res', res);
						that.image = res.tempFilePaths[0]
						let image = []
						let header = {
							'token': that.userInfo.token
						}
						that.tempImg = res.tempFilePaths.map(item => {
							return {
								name: 'flieList',
								url: item
							}
						})
						var tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: host +
							'/demay/ssm/memberCs/addFile', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'fileList',
							header: header,
							formData: {
								storeId: that.userInfo.storeId
							},
							success: (res) => {
								let row = JSON.parse(res.data)
								if (row.code == '000000') {
									row.data.type = 1
									that.form.uploadFiles.push(row.data)
									tempFilePaths.forEach(item => {
										let items = {
											url: item,
											filePath: row.data.filePath,
											fileName: row.data.fileName,
											type: 1
										}
										image.push(items)
									})
									that.later = [...that.later, ...image]
								} else {
									uni.showModal({
										title: '提示',
										content: row.message,
										showCancel: false,
										success: function(row) {}
									})
								}
							}
						});
					}
				});
			},
			delFile: function(item, index) {
				let form = {
					filePath: item.filePath,
					fileName: item.fileName
				}
				this.$api.deleteFile(form).then(res => {
					if (res.code == '000000') {
						if (item.type == 1) {
							this.later.splice(index, 1)
						} else {
							this.before.splice(index, 1)
						}
						this.form.uploadFiles.forEach((items, index) => {
							if (items.filePath == item.filePath && items.fileName == item.fileName) {
								this.form.uploadFiles.splice(index, 1)
							}
						})
					} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						})
					}
				})
			},
			onLoad: function(option) {
				if (option.item) {
					let form = JSON.parse(option.item)
					console.log(form);
					this.entities =form.entities
					let ids = ''
					let names = ''
					this.form.storeId = form.storeId
					this.form.storeName = form.storeName
					this.form.memberId = form.memberId
					this.form.memberName = form.memberName
					this.form.memberIdentity = form.memberIdentity
					this.form.memberIdentity = null
					this.form.memberPhone = uni.getStorageSync('userInfo').mobilePhone
					this.form.projectId = form.projectId
					this.form.projectName = form.projectName
					this.form.transactionPrice = form.transactionPrice
					
					this.form.docId = form.id
					this.form.docNum = form.cashNum
					this.form.docDate = form.cashDate


					form.entities.forEach((item, index) => {
					
						ids += item.saleStaffId+ ','
						names += item.saleStaffName+ ','
					})
					// ids = ids.substring(0,ids.lastIndexOf(","))			
					// names = names.substring(0,names.lastIndexOf(","))			
					this.form.staffNames = names
					this.form.staffIds = ids
					console.log(this.form);
				}
			},

			backTar() {
				uni.redirectTo({
					url: '../service-feedback'
				});
			}

		},
		onShow: function() {

			this.userInfo = uni.getStorageSync('userInfo')
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: '../service-feedback'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style>
	.texta {
		padding: 10upx 5%;
		height: 10vh;
		width: 100%;
	}

	.texta view {
		display: inline-block;
	}

	.huiyuan_img {
		width: 120upx;
		height: 120upx;
		border: #b5ccd9 1upx solid;
		margin: 10upx;
		background-color: #DDDDDD;
		overflow: hidden;
		position: relative;
	}

	.addiamge {
		width: 120upx;
		height: 120upx;
		text-align: center;
		line-height: 120upx;
		border: #CCCCCC 1upx solid;
		margin: 10upx;
		background-color: #fff;
		font-size: 48upx;
		display: inline-block;
	}

	.sub-titles {
		width: 90%;
		margin: 10upx 5%;
		background-color: red;
		border-radius: 15upx;
	}
</style>
