<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 v-if="datas&&datas.ReimburseList&&datas.ReimburseList.ReimburseDetailsList.length>0"
			class="inforCenterBox PX30 MT20">
			<view class="inforCenter" v-for="(item,index) in datas.ReimburseList.ReimburseDetailsList" :key="index">
				<view class="inforCenterTop row 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 justify-between">
					<view class="row">
						<text class="tisp MR10">*</text><text>出发地</text>
					</view>
					<view><input class="text-right" type="text" v-model="item.StartPlace" placeholder="请输入出发地" /></view>
				</view>
				<view class="inputBox row justify-between">
					<view class="row">
						<text class="tisp MR10">*</text><text>目的地</text>
					</view>
					<view><input class="text-right" type="text" v-model="item.EndPlace" placeholder="请输入目的地" /></view>
				</view>
				<view class="inputBox row justify-between">
					<view class="row">
						<text>数量</text>
					</view>
					<view class="inputBoxRight">
						<input class="text-right" type="text" v-model="item.UserNum"
							@input="checkInteger(item,'UserNum')" @change="getNum()" />
					</view>
				</view>
				<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="changePrice($event,item,index,true)" />
					</view>
				</view>
				<view class="inputBox row justify-between noBorder">
					<view class="row">
						<text>金额小计</text>
					</view>
					<view class="text-right">{{ (item.UserNum*item.UnitPrice).toFixed(2) }}</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.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.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.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', 'optionList'],
		components: {
			upload,
			singleChoice,
		},
		data() {
			return {
				paymentList: [{
						name: '现金支付',
						id: 1
					},
					{
						name: '公司结算',
						id: 2
					},
				],
				optionVisible: false,
				optionObj: {},
				params: {},
				datas: null, //展示数据
				dataIndex: 0,
				ReimIndex: 0,
				ReimDatas: {},
				BusList: [], //车信息
				HotelOrderListReport: [], //酒店信息，合团
				DiningList: [], //餐厅
				ScenicList: [], //景点
				OtherList: [], //其他订单信息
				TipList: [], //小费收入
				TeamList: [], //团费小计
				SelfPlayingIncomeList: [], //自费收入
				SelfPlayingExpendList: [], //自费支出
				LeaderShopList: [], //购物报账
			}
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					var newJson = JSON.parse(JSON.stringify(newVal));
					console.log("newJson", newJson);
					this.params = newJson;
					this.BusList = this.params.BusList //车信息
					this.dataIndex = this.params.dataIndex1;
					this.getRenderingData()
					this.getTotal()
				},
				deep: true,
				immediate: false
			},
			datas: {
				handler(newVal, oldVal) {
					//this.updateData()
					this.getRenderingData();
				},
				deep: true,
				immediate: false
			}
		},
		mounted() {

		},
		methods: {
			changePrice(e, item, index, isMinus) {
				var value = e.detail.value;

				var t = value.charAt(0);
				value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				value = value
					.replace(".", "$#$")
					.replace(/\./g, "")
					.replace("$#$", ".");
				value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				//如果第一位是负号，则允许添加   如果不允许添加负号 可以把这块注释掉
				//是否允许负数
				if (isMinus && t == '-') {
					value = '-' + value;
				}
				if (value === '' || value === '.') {
					value = 0;
				}
				item.UnitPrice = value;
				this.$set(this.datas.ReimburseList.ReimburseDetailsList, index, item);
				this.getNum();

			},
			getNum() {
				this.getTotal();
			},
			getTotal() {
				let total = 0;
				console.log("getTotal", JSON.parse(JSON.stringify(this.datas.ReimburseList.ReimburseDetailsList)))
				this.datas.ReimburseList.ReimburseDetailsList.forEach(x => {
					total += x.UserNum * x.UnitPrice
				})
				this.datas.TotalMoney = total
				this.updateData()
			},
			delInfor(index) {
				this.datas.ReimburseList.ReimburseDetailsList.splice(index, 1)
			},
			delImg(index) {
				this.datas.ReimburseList.VoucherPicList.splice(index, 1);
			},
			getSettlementType(item) {
				this.datas.ReimburseList.SettlementType = item.id
				this.updateData()
				this.$forceUpdate()
			},
			updateData() {
				this.BusList[this.dataIndex] = JSON.parse(JSON.stringify(this.datas))
				this.params.BusList = JSON.parse(JSON.stringify(this.BusList))
				this.$emit('change', this.params)
			},
			getRenderingData() {
				this.datas = this.BusList[this.dataIndex]
				console.log("this.datas", this.datas);
				if (this.datas.VoucherPicList == null) this.datas.VoucherPicList = []
				this.ReimDatas = JSON.parse(JSON.stringify(this.datas.ReimburseList.ReimburseDetailsList[0]))
			},
			showOptionVisible(index) {
				this.optionVisible = true
				this.ReimIndex = index
				this.optionObj = {
					name: this.datas.ReimburseList.ReimburseDetailsList[this.ReimIndex].UserTypeStr,
					id: this.datas.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.ReimburseList.ReimburseDetailsList[this.ReimIndex].UserTypeStr = this.optionObj.name
				this.datas.ReimburseList.ReimburseDetailsList[this.ReimIndex].UserType = this.optionObj.id
			},
			previewImage(src) {
				uni.previewImage({
					urls: this.datas.ReimburseList.VoucherPicList.map(x => {
						return x.url
					}),
					current: src,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {

						},
						fail: function(err) {

						},
					},
				});
			},
			addData() {
				this.ReimDatas = {
					...this.ReimDatas,
					ID: 0,
					StartPlace: '',
					EndPlace: '',
					UserType: 0,
					UserTypeStr: '',
					UserNum: 0,
					UnitPrice: 0,
				}
				this.datas.ReimburseList.ReimburseDetailsList.push(JSON.parse(JSON.stringify(this.ReimDatas)))

			},
			onSuccess(infor) {
				this.datas.ReimburseList.VoucherPicList.push({
					FileName: infor.name,
					url: infor.url,
				})
			}
		}
	}
</script>