<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

	.Sure {
		padding: 0 20rpx;
		margin-top: 30rpx;
	}

	.Sure view {
		background: #257BF2;
		border-radius: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.paymentTitle {
		font-size: 28rpx;
	}

	.paymentTexts view {
		padding: 5rpx 15rpx;
		border: 1px solid #EDEDED;
		color: #888888;
		border-radius: 6rpx;
	}

	.paymentTexts view:last-child {
		margin-left: 40rpx;
	}

	.paymentTexts view.active {
		color: #fff;
		background: #257BF2;
		border: 1px solid #257BF2;
	}

	.paymentTitle .tisp {
		color: #666666;
	}

	.textareaBox textarea {
		height: 208rpx;
		background: #FFFFFF;
		border: 1rpx solid #EAEAEA;
		border-radius: 10rpx;
	}

	.InforImgBox {
		flex-wrap: wrap;
	}

	.InforImg,
	.addUp {
		width: 208rpx;
		height: 208rpx;
		margin-bottom: 20rpx;
	}

	.InforImg {
		border-radius: 10rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.InforImg image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.InforImgDel {
		position: absolute;
		left: 0;
		top: -14rpx;
		z-index: 1;
		background: #fff;
		border-radius: 50%;
	}

	.inforCenter {
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid rgba(102, 102, 102, 0.3);
		margin-bottom: 40rpx;
		position: relative;
	}

	.inforCenter:last-child {
		margin-bottom: 0;
	}

	.inforCenterTop {
		background: #F3F3F3;
		padding: 20rpx 29rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.inputBox {
		padding: 20rpx 0;
		margin: 0 29rpx;
		border-bottom: 1px solid #DDD;
		font-size: 28rpx;
	}

	.inputBox.noBorder {
		border: 0;
	}

	.tisp {
		color: red;
	}

	.inputBoxRight {
		position: relative;
	}

	.inputBoxRight u-number-box {
		position: absolute;
		right: 0;
		top: -7rpx;
	}

	/deep/.inputBoxRight u-number-box input {
		width: 130rpx !important;
		min-width: 130rpx !important;
	}

	.inforCenterTopDel {
		position: absolute;
		left: -7rpx;
		top: -7rpx;
		padding: 5rpx;
		z-index: 1;
	}

	.iconRight {
		transform: rotate(-90deg);
	}
</style>
<template>
	<view>
		<template v-for="(item,i) in SelfPlayingExpendList">
			<view class="inforCenterBox PX30 MT20">
				<view class="inforCenter">
					<view class="inforCenterTop row justify-between">
						<view>时间</view>
						<view class="text-right row items-center" @click="showDateVisible(i)">
							<text>{{ item.UseDate?item.UseDate:'选择使用时间' }}</text>
							<img class="PL15" style="width: 30rpx;height: 30rpx;display: inline-block;"
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638869924349615962.png" />
						</view>
					</view>
					<u-icon v-if="i" @click="delInfor(i)" class="inforCenterTopDel" name="clear" color="#FA6967"
						size="36" />
					<view class="inputBox row items-center justify-between">
						<view class="row">
							<text>金额</text>
						</view>
						<view class="inputBoxRight">
							<input class="text-right" type="text"
							v-model="item.UnitPrice"
							@input="handleInput($event,item,index,'UnitPrice')" 
							@blur="handleBlur(item,index,'UnitPrice')" />
							<!-- <input class="text-right" type="text" v-model="item.UnitPrice" /> -->
						</view>
					</view>
					<view class="inputBox row items-center justify-between">
						<view class="row">
							<text>返佣</text>
						</view>
						<view class="inputBoxRight">
							<input class="text-right" type="text"
							v-model="item.Rebate"
							@input="handleInput($event,item,index,'Rebate')" 
							@blur="handleBlur(item,index,'Rebate')" />
							<!-- <input class="text-right" type="text" v-model="item.Rebate" /> -->
						</view>
					</view>
					<view class="paymentTitle PA30">备注</view>
					<view class="textareaBox PX30 row">
						<textarea class="PA20 flex1" placeholder-style="color:#AAAAAA" v-model="item.Remark"
							placeholder="请输入备注信息" @blur="updateData" />
					</view>
					<view class="PY20"></view>
					<view class="paymentTitle PA30">
						<text>凭证</text>
						<text class="tisp">(可上传多张图片)</text>
					</view>
					<view class="PX30 PB30 row InforImgBox">
						<view class="InforImg" v-for="(item,index) in item.VoucherPicList"
							@click="previewImage(item.url,i)">
							<image :src="item.url" mode="aspectFill"></image>
							<u-icon @click="delImg(i,index)" class="InforImgDel" name="clear" color="#FA6967"
								size="36" />
						</view>
						<upload class="addUp" @onSuccess="(info)=>{onSuccess(info,i)}"></upload>
					</view>
				</view>
			</view>

		</template>
		<view class="Sure">
			<view class="text-center" @click="addData">添加</view>
		</view>
		<view class="PY50"></view>
		<singleChoice v-if="optionVisible" :current="optionObj.id" :list="optionList" @close="close"
			@change="popupCurrent"></singleChoice>
		<u-picker v-model="dateVisible" mode="time" :startMonth="$utils.GetDateFewFaysLater(-1).month"
			:params="dateParams" @cancel="setDateHandler" @confirm="setDateHandler" confirmColor="#257BF2"
			:defaultTime="time"></u-picker>
	</view>
</template>
<script>
	import upload from "../upload";
	import singleChoice from "../singleChoice";
	export default {
		props: ['data', 'options', 'currencyList'],
		components: {
			upload,
			singleChoice,
		},
		data() {
			return {
				optionVisible: false,
				optionList: [],
				optionObj: {},
				optionType: null,
				params: {},
				ReimIndex: 0,
				ReimDatas: {},
				BusList: [], //车信息
				HotelOrderListReport: [], //酒店信息，合团
				DiningList: [], //餐厅
				ScenicList: [], //景点
				OtherList: [], //其他订单信息
				TipList: [], //小费收入
				TeamList: [], //团费小计
				SelfPlayingIncomeList: [], //自费收入
				SelfPlayingExpendList: [], //自费支出
				LeaderShopList: [], //购物报账
				dateVisible: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
				},
				time: '',
			}
		},
		watch: {
			SelfPlayingExpendList: {
				handler(newVal, oldVal) {
					this.updateData()
				},
				deep: true,
				immediate: false
			}
		},
		mounted() {
			this.initData();
		},
		methods: {
			// 在模板中的使用示例
			handleInput(e,item,index,field) {
				const value = e.detail.value
				if(this.$utils.checkIsNum(value)){
					item[field] = value
				}else{
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
				}
			},
			handleBlur(item,index,field) {
				if(this.$utils.checkIsNum(item[field])){
					
				}else{
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
				}
			},
			initData() {
				this.params = JSON.parse(JSON.stringify(this.data))
				this.SelfPlayingExpendList = this.params.OtherOrderInfo.SelfPlayingExpendList
				this.SelfPlayingExpendList.forEach(x => {
					x.UseDate = x.UseDate ? this.$utils.formatDates(new Date(x.UseDate), 'yyyy-MM-dd') : null
					let findIndex = this.currencyList.findIndex(y => y.id == x.Currency)
					if (findIndex != -1) x.CurrencyName = this.currencyList[findIndex].name
				})
				this.getRenderingData()
			},
			showDateVisible(index) {
				this.ReimIndex = index
				this.time = this.SelfPlayingExpendList[index].UseDate
				this.dateVisible = true
			},
			setDateHandler(val) {
				this.time = `${val.year}-${val.month}-${val.day}`
				this.SelfPlayingExpendList[this.ReimIndex].UseDate = this.time
				this.dateVisible = false
			},
			delInfor(index) {
				this.SelfPlayingExpendList.splice(index, 1)
			},
			delImg(i, index) {
				this.SelfPlayingExpendList[i].VoucherPicList.splice(index, 1)
			},
			updateData() {
				//this.params.OtherOrderInfo.SelfPlayingExpendList = JSON.parse(JSON.stringify(this.SelfPlayingExpendList))
				this.$emit('change', JSON.parse(JSON.stringify(this.SelfPlayingExpendList)),9)
			},
			getRenderingData() {
				this.ReimDatas = JSON.parse(JSON.stringify(this.SelfPlayingExpendList[0]))
			},
			showOptionVisible(index, type) {
				this.optionType = type
				this.optionVisible = true
				this.ReimIndex = index
				if (this.optionType == 1) {
					this.optionList = this.options
					this.optionObj = {
						name: this.SelfPlayingExpendList[this.ReimIndex].CostProjectStr,
						id: this.SelfPlayingExpendList[this.ReimIndex].CostProject,
					}
				} else {
					this.optionList = this.currencyList
					this.optionObj = {
						name: this.SelfPlayingExpendList[this.ReimIndex].CurrencyName,
						id: this.SelfPlayingExpendList[this.ReimIndex].Currency,
					}
				}

			},
			close() {
				this.optionVisible = false
			},
			popupCurrent(value) {
				this.optionVisible = false
				let findIndex = this.optionList.findIndex(x => x.id == value)
				this.optionObj = this.optionList[findIndex]
				if (this.optionType == 1) {
					this.SelfPlayingExpendList[this.ReimIndex].CostProjectStr = this.optionObj.name
					this.SelfPlayingExpendList[this.ReimIndex].CostProject = this.optionObj.id
				} else {
					this.SelfPlayingExpendList[this.ReimIndex].CurrencyName = this.optionObj.name
					this.SelfPlayingExpendList[this.ReimIndex].Currency = this.optionObj.id
				}
			},
			previewImage(src, i) {
				uni.previewImage({
					urls: this.SelfPlayingExpendList[i].VoucherPicList.map(x => {
						return x.url
					}),
					current: src,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {

						},
						fail: function(err) {

						},
					},
				});
			},
			addData() {
				this.ReimDatas = {
					...this.ReimDatas,
					ID: 0,
					CostProject: null,
					CostProjectStr: '',
					CurrencyName: '',
					Currency: 0,
					Rebate: 0,
					UnitPrice: 0,
					Remark: '',
					VoucherPicList: [],
					UseDate: null,
				}
				this.SelfPlayingExpendList.push(JSON.parse(JSON.stringify(this.ReimDatas)))
			},
			onSuccess(infor, i) {
				this.SelfPlayingExpendList[i].VoucherPicList.push({
					FileName: infor.name,
					url: infor.url,
				})
			}
		}
	}
</script>