<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="inforCenterTop row justify-between">
                        <view>时间</view>
                        <view class="text-right row items-center"
                        @click="showDateVisible(i)">
                            <text>{{ item.UseDate?item.UseDate:'选择使用时间' }}</text>
                            <img class="PL15" style="width: 30rpx;height: 30rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638869924349615962.png"/>
                        </view>
                    </view>
                    <u-icon v-if="i" @click="delInfor(i)" class="inforCenterTopDel" name="clear" color="#FA6967" size="36"/>
                    <view class="inputBox row justify-between">
                        <view class="row">
                            <text>费用项目</text>
                        </view>
                        <view class="inputBoxRight row" @click="showOptionVisible(i,1)">
                            <text>{{item.CostProjectStr?item.CostProjectStr:'选择费用项目'}}</text>
                            <u-icon class="iconRight" name="arrow-down" color="#BBBBBB" size="42"/>
                        </view>
                    </view>
                    <view class="inputBox row justify-between">
                        <view class="row">
                            <text>币种</text>
                        </view>
                        <view class="inputBoxRight row" @click="showOptionVisible(i)">
                            <text>{{ item.CurrencyName?item.CurrencyName:'选择币种' }}</text>
                            <u-icon class="iconRight" name="arrow-down" color="#BBBBBB" size="42"/>
                        </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,i,'金额')"/>
                        </view>
                    </view>
                    <!-- <view class="inputBox row justify-between">
                        <view class="row">
                            <text>返佣</text>
                        </view>
                        <view class="inputBoxRight">
                            <u-number-box :min="0" :value="item.Rebate" @change="(e)=>getNum(e,i,'返佣')"/>
                        </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 class="paymentTitle PA30">
                        <text>凭证</text>
                        <text class="tisp">(可上传多张图片)</text>    
                    </view>
                    <view class="PX30 PB30 row InforImgBox">
                        <view class="InforImg" v-for="(item,index) in item.VoucherPicList" 
                        @click="previewImage(item.url,i)">
                            <image :src="item.url" mode="aspectFill"></image>
                            <u-icon @click="delImg(i,index)" class="InforImgDel" name="clear" color="#FA6967" size="36"/>
                        </view>
                        <upload class="addUp" @onSuccess="(info)=>{onSuccess(info,i)}"></upload>
                    </view> -->
                </view>
            </view>
            
        </template>
        <!-- <view class="Sure">
            <view class="text-center" @click="addData">添加</view>
        </view> -->
        <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: {
        data:{
            handler(newVal,oldVal){
                this.params = JSON.parse(JSON.stringify(newVal))
                this.TipList = this.params.OtherOrderInfo.TipList
            },
            deep:true,
            immediate:true
        },
        TipList:{
            handler(newVal,oldVal){
                this.updateData()
            },
            deep:true,
            immediate:false
        }
    },
    mounted() {
        
    },
    methods:{
        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
        },
        getNum(e,index,type){
            if(type=='金额'){
                this.TipList[index].UnitPrice = e.value
            }
        },
        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',this.params)
        },
        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,
                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>