<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;
	}
</style>
<template>
	<view>
		<view class="inforCenterBox PX30 MT20" v-if="datas&&datas.HotelOrderList&&datas.HotelOrderList[datas.hotelIndex]">
			<view class="inforCenter"
				v-for="(item,index) in datas.HotelOrderList[datas.hotelIndex].ReimburseList.ReimburseDetailsList"
				:key="index">
				<view class="inforCenterTop row items-center justify-between" @click="showOptionVisible(index)">
					<view>{{ item.UserTypeStr?item.UserTypeStr:'选择类型' }}</view>
					<view>
						<u-icon name="arrow-down" color="#BBBBBB" size="42" />
					</view>
				</view>
				<u-icon v-if="index" @click="delInfor(index)" 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="number" v-model="item.UserNum"
						@input="getTotal()"/>
					</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.UnitPrice"
						@input="handleInput($event,item,'UnitPrice',1)" 
						@blur="handleBlur(item,'UnitPrice',1)" />
						<!--<input class="text-right" type="text" v-model="item.UnitPrice" @input="getNum()" />-->
					</view>
				</view>
				<view class="inputBox row items-center justify-between noBorder">
					<view class="row">
						<text>金额小计</text>
					</view>
					<view class="text-right">{{ $utils.checkIsNum(item.UnitPrice)?(item.UserNum*item.UnitPrice).toFixed(2):0 }}</view>
				</view>
			</view>
		</view>
		<view class="Sure">
			<view class="text-center" @click="addData">添加</view>
		</view>
		<view class="paymentTitle PA30">支付方式</view>
		<view class="PX30 PB20 paymentTexts row">
			<template v-for="(item,index) in paymentList">
				<view
					:class="[datas.HotelOrderList[datas.hotelIndex].ReimburseList.SettlementType==item.id?'active':'']"
					@click="getSettlementType(item)">{{ item.name }}</view>
			</template>
		</view>
		<view class="paymentTitle PA30">备注</view>
		<view class="textareaBox PX30 row">
			<textarea class="PA20 flex1" placeholder-style="color:#AAAAAA"
				v-model="datas.HotelOrderList[datas.hotelIndex].ReimburseList.Remarks" placeholder="请输入备注信息"
				@blur="updateData" />
		</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 datas.HotelOrderList[datas.hotelIndex].ReimburseList.VoucherPicList">
				<image :src="item.url" mode="aspectFill" @click="previewImage(item.url)"></image>
				<u-icon @click="delImg(index)" class="InforImgDel" name="clear" color="#FA6967" size="36" />
			</view>
			<upload class="addUp" @onSuccess="onSuccess"></upload>
		</view>
		<singleChoice v-if="optionVisible" :current="optionObj.id" :list="optionList" @close="close"
			@change="popupCurrent"></singleChoice>
	</view>
</template>
<script>
	import upload from "../upload";
	import singleChoice from "../singleChoice";
	export default {
		props: ['data', 'dataIndex2', 'optionList'],
		components: {
			upload,
			singleChoice,
		},
		data() {
			return {
				paymentList: [{
						name: '现金支付',
						id: 1
					},
					{
						name: '公司结算',
						id: 2
					},
				],
				optionVisible: false,
				optionObj: {},
				params: {},
				datas: {
					HotelOrderList: [{
						ReimburseList: {
							ReimburseDetailsList: [],
						}
					}],
				}, //展示数据
				dataIndex: 0,
				ReimIndex: 0,
				ReimDatas: {},
				HotelOrderListReport: [], //酒店信息，合团
			}
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					if (newVal && oldVal) {
						//切换酒店日期
						if (newVal.dataIndex2 != oldVal.dataIndex2) {
							this.initData();
						}
						//切换同一天酒店
						else if (oldVal.HotelOrderListReport[this.dataIndex2].hotelIndex != newVal.HotelOrderListReport[
								this.dataIndex2]
							.hotelIndex) {
							this.initData();
						} //判断币种是否切换
						else {
							var newindex = oldVal.HotelOrderListReport[this.dataIndex2].hotelIndex;
							var oldCrrId = oldVal.HotelOrderListReport[this.dataIndex2].HotelOrderList[newindex]
							.CurrencyId;
							var newCrrid = newVal.HotelOrderListReport[this.dataIndex2].HotelOrderList[newindex]
							.CurrencyId;
							if (oldCrrId != newCrrid) {
								this.initData();
							}
						}
					}
				},
				deep: true,
				immediate: false
			},
		},
		mounted() {
			this.initData();
		},
		methods: {
			getNum(e,index){
				this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[index].UserNum = e.value
				this.getTotal()
			},
			// 在模板中的使用示例
			handleInput(e,item,field,type) {
				const value = e.detail.value
				if(this.$utils.checkIsNum(value)){
					item[field] = value
					this.getTotal()
				}else{
					//item[field] = 0
					uni.showToast({
						title: `请输入正确的${type?'金额':'数量'}`,
						icon: 'none'
					})
				}
			},
			handleBlur(item,field,type) {
				if(this.$utils.checkIsNum(item[field])){
					this.getTotal();
				}else{
					item[field] = 0
					uni.showToast({
						title: `请输入正确的${type?'金额':'数量'}`,
						icon: 'none'
					})
				}
			},
			initData() {
				this.params = JSON.parse(JSON.stringify(this.data))
				this.HotelOrderListReport = this.params.HotelOrderListReport //酒店信息，合团
				this.dataIndex = this.dataIndex2;
				this.datas = this.HotelOrderListReport[this.dataIndex]
				if(this.HotelOrderListReport&&this.HotelOrderListReport[this.dataIndex]&&this.HotelOrderListReport[this.dataIndex].ReimburseList){
					this.ReimDatas = JSON.parse(JSON.stringify(this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[0]))
					this.getTotal()
				}
			},
			getTotal() {
				let total = 0
				if (this.datas && this.datas.HotelOrderList && this.datas.HotelOrderList.length > 0 && this.datas
					.HotelOrderList[this.datas.hotelIndex].ReimburseList) {
					this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList.forEach(x => {
						total += x.UserNum * x.UnitPrice
					})
					this.datas.HotelOrderList[this.datas.hotelIndex].TotalMoney = total;
				}
				this.updateData()
			},
			delInfor(index) {
				this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList.splice(index, 1)
				this.getTotal();
			},
			delImg(index) {
				this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.VoucherPicList.splice(index, 1)
			},
			getSettlementType(item) {
				this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.SettlementType = item.id
				this.updateData()
				this.$forceUpdate()
			},
			updateData() {
				this.HotelOrderListReport[this.dataIndex] = JSON.parse(JSON.stringify(this.datas))
				this.params.HotelOrderListReport = JSON.parse(JSON.stringify(this.HotelOrderListReport))
				this.$emit('change', this.HotelOrderListReport,2)
			},

			showOptionVisible(index) {
				this.optionVisible = true
				this.ReimIndex = index
				this.optionObj = {
					name: this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[this
						.ReimIndex].UserTypeStr,
					id: this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[this
						.ReimIndex].UserType,
				}
			},
			close() {
				this.optionVisible = false
			},
			popupCurrent(value) {
				this.optionVisible = false
				let findIndex = this.optionList.findIndex(x => x.id == value)
				this.optionObj = this.optionList[findIndex]
				this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[this.ReimIndex]
					.UserTypeStr = this.optionObj.name
				this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[this.ReimIndex]
					.UserType = this.optionObj.id
			},
			previewImage(src) {
				uni.previewImage({
					urls: this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.VoucherPicList.map(x => {
						return x.url
					}),
					current: src,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {

						},
						fail: function(err) {

						},
					},
				});
			},
			addData() {
				this.ReimDatas = {
					...this.ReimDatas,
					ID: 0,
					UserType: 0,
					UserTypeStr: '',
					UserNum: 0,
					UnitPrice: 0,
				}
				if(this.datas&&this.datas.HotelOrderList&&this.datas.HotelOrderList[this.datas.hotelIndex]&&this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList) this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList.push(JSON.parse(JSON
					.stringify(this.ReimDatas)))
			},
			onSuccess(infor) {
				if(this.datas&&this.datas.HotelOrderList&&this.datas.HotelOrderList[this.datas.hotelIndex]&&this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList) this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.VoucherPicList.push({
					FileName: infor.name,
					url: infor.url,
				})
			}
		}
	}
</script>