<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 TipList">
			<view class="inforCenterBox PX30 MT20">
				<view class="inforCenter">
					<view class="inputBox row 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="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>
			</view>
		</template>
		<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"
			:startDay="$utils.GetDateFewFaysLater(-1).dd" :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: {
			TipList: {
				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.TipList = this.params.OtherOrderInfo.TipList
				this.getRenderingData()
			},
			showDateVisible(index) {
				this.ReimIndex = index
				this.time = this.TipList[index].UseDate
				this.dateVisible = true
			},
			setDateHandler(val) {
				uni.hideLoading()
				this.time = `${val.year}-${val.month}-${val.day}`
				this.TipList[this.ReimIndex].UseDate = this.time
				this.dateVisible = false
			},
			delInfor(index) {
				this.TipList.splice(index, 1)
			},
			delImg(i, index) {
				this.TipList[i].VoucherPicList.splice(index, 1)
			},
			updateData() {
				//this.params.OtherOrderInfo.TipList = JSON.parse(JSON.stringify(this.TipList))
				this.$emit('change', JSON.parse(JSON.stringify(this.TipList)),this.params.type);
			},
			getRenderingData() {
				this.ReimDatas = JSON.parse(JSON.stringify(this.TipList[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.TipList[this.ReimIndex].CostProjectStr,
						id: this.TipList[this.ReimIndex].CostProject,
					}
				} else {
					this.optionList = this.currencyList
					this.optionObj = {
						name: this.TipList[this.ReimIndex].CurrencyName,
						id: this.TipList[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.TipList[this.ReimIndex].CostProjectStr = this.optionObj.name
					this.TipList[this.ReimIndex].CostProject = this.optionObj.id
				} else {
					this.TipList[this.ReimIndex].CurrencyName = this.optionObj.name
					this.TipList[this.ReimIndex].Currency = this.optionObj.id
				}
			},
			previewImage(src, i) {
				uni.previewImage({
					urls: this.TipList[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: null,
					Rebate: 0,
					UnitPrice: 0,
					Remark: '',
					VoucherPicList: [],
				}
				this.TipList.push(JSON.parse(JSON.stringify(this.ReimDatas)))
			},
			onSuccess(infor, i) {
				this.TipList[i].VoucherPicList.push({
					FileName: infor.name,
					url: infor.url,
				})
			}
		}
	}
</script>