<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">
            <view class="inforCenter" v-for="(item,index) in datas.HotelOrderList[datas.hotelIndex].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>数量</text>
                    </view>
                    <view class="inputBoxRight">
                        <u-number-box :min="0" :value="item.UserNum" @change="(e)=>getNum(e,index,'数量')"/>
                    </view>
                </view>
                <view class="inputBox row justify-between">
                    <view class="row">
                        <text>单价</text>
                    </view>
                    <view class="inputBoxRight">
                        <u-number-box :min="0" :max="99999999999999999" v-model="item.UnitPrice" @change="(e)=>getNum(e,index,'金额')"/>
                    </view>
                </view>
                <view class="inputBox row justify-between noBorder">
                    <view class="row">
                        <text>金额小计</text>
                    </view>
                    <view class="text-right">{{ item.UserNum*item.UnitPrice }}</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].VoucherPicList" 
            @click="previewImage(item.url)">
                <image :src="item.url" mode="aspectFill"></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){
                this.params = JSON.parse(JSON.stringify(newVal))
                this.HotelOrderListReport = this.params.HotelOrderListReport //酒店信息，合团

                this.dataIndex = this.params.dataIndex2
                this.getRenderingData()
                this.getTotal()
            },
            deep:true,
            immediate:true
        },
        datas:{
            handler(newVal,oldVal){
                this.updateData()
            },
            deep:true,
            immediate:false
        }
    },
    mounted() {
        
    },
    methods:{
        getNum(e,index,type){
            if(type=='数量') {
                this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[index].UserNum = e.value
            }else if(type=='金额'){
                this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[index].UnitPrice = e.value
            }
            this.getTotal()
        },
        getTotal(){
            let total = 0
            this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList.forEach(x=>{
                total+=x.UserNum*x.UnitPrice
            })
            this.datas.TotalMoney = total
            this.updateData()
        },
        delInfor(index){
            this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList.splice(index,1)
        },
        delImg(index){
            this.datas.HotelOrderList[this.datas.hotelIndex].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.params)
        },
        // 酒店
        getRenderingData(){
            this.datas = this.HotelOrderListReport[this.dataIndex]
            this.ReimDatas = JSON.parse(JSON.stringify(this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList[0]))
        },
        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].VoucherPicList.map(x=> {return x.url}),
                current: src,
                longPressActions: {
                    itemList: ["发送给朋友", "保存图片", "收藏"],
                    success: function(data) {
                        
                    },
                    fail: function(err) {
                        
                    },
                },
            });
        },
        addData(){
            this.ReimDatas = {
                ...this.ReimDatas,
                UserType: null,
                UserTypeStr: '',
                UserNum: 0,
                UnitPrice: 0,
            }
            this.datas.HotelOrderList[this.datas.hotelIndex].ReimburseList.ReimburseDetailsList.push(JSON.parse(JSON.stringify(this.ReimDatas)))
        },
        onSuccess(infor){
            this.datas.HotelOrderList[this.datas.hotelIndex].VoucherPicList.push({
                FileName: infor.name,
                url: infor.url,
            })
        }
    }
}
</script>