<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">
						<u-number-box :min="0" v-model="item.UserNum" @change="(e)=>getNum(e,index)"/>
					</view>
				</view>
				<view class="inputBox row justify-between">
					<view class="row">
						<text>金额</text>
					</view>
					<view class="inputBoxRight">
						<input class="text-right" type="number"
						v-model="item.UnitPrice"
						@input="handleInput($event,item,index,'UnitPrice')" 
						@blur="handleBlur(item,index,'UnitPrice')" />
					</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', 'dataIndex1', '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: [], //车信息
			}
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					if (oldVal.dataIndex1 != newVal.dataIndex1) {
						this.initData();
					} else {
						var newCrrId = newVal.BusList[this.dataIndex1].ReimburseList.CurrencyId;
						var oldCurrId = oldVal.BusList[this.dataIndex1].ReimburseList.CurrencyId;
						if (newCrrId != oldCurrId) {
							this.initData();
						}
					}
				},
				deep: true,
				immediate: false
			},
			datas: {
				handler(newVal, oldVal) {
					this.updateData();
				},
				deep: true,
				immediate: false
			},
		},
		mounted() {
			this.initData();
		},
		methods: {
			getNum(e,index){
				this.datas.ReimburseList.ReimburseDetailsList[index].UserNum = e.value
				this.getTotal()
			},
			// 在模板中的使用示例
			handleInput(e,item,index,field) {
				const value = e.detail.value
				if(this.$utils.checkIsNum(value)){
					item[field] = value
					this.getTotal()
				}else{
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
				}
			},
			handleBlur(item,index,field) {
				if(this.$utils.checkIsNum(item[field])){
					this.getTotal();
				}else{
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
				}
			},
			//初始化数据
			initData() {
				var newJson = JSON.parse(JSON.stringify(this.data));
				this.params = newJson;
				this.BusList = this.params.BusList //车信息
				this.dataIndex = this.params.dataIndex1;
				this.getRenderingData();
				this.getTotal();
			},
			getTotal() {
				let total = 0;
				this.datas.ReimburseList.ReimburseDetailsList.forEach(x => {
					total += x.UserNum * x.UnitPrice
				})
				this.datas.TotalMoney = total
			},
			delInfor(index) {
				this.datas.ReimburseList.ReimburseDetailsList.splice(index, 1)
				this.getTotal()
			},
			delImg(index) {
				this.datas.ReimburseList.VoucherPicList.splice(index, 1);
			},
			getSettlementType(item) {
				this.datas.ReimburseList.SettlementType = item.id

				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.BusList,1)
			},
			getRenderingData() {
				this.datas = this.BusList[this.dataIndex]
				if (!this.datas.VoucherPicList) this.datas.VoucherPicList = []
				if (!this.datas.ReimburseList.ReimburseDetailsList) this.datas.ReimburseList.ReimburseDetailsList = []
				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,
				}
				if(this.datas&&this.datas.ReimburseList&&this.datas.ReimburseList.ReimburseDetailsList) 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>