<template>
    <div>
        <div class="collection-all">
            <div class="collection-head">
                <div class="collection-head-li">
                    <label>团组名称:</label>
                    <el-select style="width:250px" @change="Receivables" v-model="value" filterable placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.groupName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="collection-head-li">
                    <el-button type="primary" @click="Saveition">保存数据</el-button>
                    <el-button type="primary">生成收款单(四川)</el-button>
                    <el-button type="primary">生成收款单(北京)</el-button>
                    <el-button type="primary">汇款账单</el-button>
                </div>
            </div>
            <div class="collection-info">
                <div class="collection-info-li">
                    <label>团 号：</label>
                    <span>{{groupInfo.tourCode}}</span>
                </div>
                <div class="collection-info-li">
                    <label>客 户：</label>
                    <span>{{groupInfo.clientName}}</span>
                </div>
                <div class="collection-info-li">
                    <label>出访国家：</label>
                    <span>{{groupInfo.visitCountry|filter_city}}</span>
                </div>
                <div class="collection-info-li">
                    <label>起止日期：</label>
                    <span> {{groupInfo.tontractTime|filter_time}}~{{groupInfo.visitDate|filter_time}}</span>
                </div>
                <div class="collection-info-li">
                    <label>天数/人数：</label>
                    <span>{{groupInfo.visitDays}}天/{{groupInfo.visitPNumber}}人</span>
                </div>
            </div>
            <div class="Unassigned-checked">
                <div class="checked-label">未分配收款账单</div>
                <el-dropdown @command="assignment">
                    <el-button type="primary">
                      分配至<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="(item,index) in tableData" :key="index" :command="item.id">{{item.priceName}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="Unassigned-form">
                <el-table
                :border="true"
                ref="multipleTable"
                :data="UnassignedData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="付款时间"
                    width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sectionTime"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="付款方信息"
                        width="230">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.client"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="付款方电话"
                        width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.customerTel"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="已收金额"
                        width="120">
                        <template slot-scope="scope">
                            <el-input-number :controls="false" :precision="2" v-model="scope.row.price"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="到款时间"
                        width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.customerName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="币种"
                        width="100">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.currency">
                                <el-option
                                        v-for="item in currencyoptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="收款类型"
                        width="140">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.receivablesType">
                                <el-option
                                        v-for="item in typeoptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="140">
                    </el-table-column>
                </el-table>
            </div>
            <div class="collection-checked">
                <div class="checked-label">收款账单</div>
                <el-button @click="addition" type="primary">添加一行</el-button>
            </div>
            <div class="collection-form">
                <el-table
                :border="barderis"
                ref="multipleTable"
                :data="tableData"
                style="width: 100%;"
                :expand-row-keys="expends"
                :row-key="getRowKeys"
                @expand-change="handledetail"
                :row-style="TableRowStyle"
                >
                    <!-- <el-table-column
                    type="selection"
                    width="40">
                    </el-table-column> -->
                    <el-table-column 
                    align="center" 
                    type="expand" 
                    >
                        <!-- eslint-disable-next-line -->
                        <template slot-scope="scope">
                            <div class="paid-box">
                                <div class="paid-label">已收款项</div>
                                <div>
                                    <el-button @click="Saveinif(scope.row._ProceedsReceivedDatas)" type="primary">保 存</el-button>
                                    <el-button @click="addinif(scope.row)" type="primary">新 增</el-button>
                                </div>
                            </div>
                            <el-table
                            class="inside-li" 
                            :border="barderis"
                            :data="scope.row._ProceedsReceivedDatas"
                            style="width: 99%;"
                            >
                                <el-table-column
                                    label="到款时间"
                                    width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.sectionTime"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="付款单位"
                                    width="230">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.client"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="客户名称"
                                    width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.customerName"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="付款方联系电话"
                                    width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.customerTel"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="已收金额"
                                    width="120">
                                    <template slot-scope="scope">
                                        <el-input-number :controls="false" :precision="2" v-model="scope.row.price"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="币种"
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.currency">
                                            <el-option
                                                    v-for="item in currencyoptions"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="收款类型"
                                    width="140">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.receivablesType">
                                            <el-option
                                                    v-for="item in typeoptions"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="备注">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.remark"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="操作"
                                width="140">
                                <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDeleteinif(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
                                </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="addingModeName"
                    label="增加方式"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="createTime"
                    label="时间"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    label="费用名称"
                    width="240">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.priceName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="单 价"
                    width="140">
                        <template slot-scope="scope">
                            <el-input-number :controls="false" :precision="2" class="editNum" v-model="scope.row.price"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="数 量"
                    width="80">
                        <template slot-scope="scope">
                            <el-input  v-model="scope.row.count"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="单 位"
                    width="80">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.unit"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="币 种"
                    width="100">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.currency">
                                <el-option
                                        v-for="item in currencyoptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                        <!-- <template slot-scope="scope">
                            <el-input v-model="scope.row.currency"></el-input>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                    label="汇 率"
                    width="100">
                        <template slot-scope="scope">
                            <el-input-number  :controls="false" :precision="2" v-model="scope.row.rate"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="应收金额"
                    width="120">
                    <template slot-scope="scope">
                        <div class="sub-box">{{scope.row.itemSumPrice=(scope.row.price*scope.row.count*scope.row.rate).toFixed(2)}}</div>
                    </template>
                    </el-table-column>
                    <el-table-column    
                    prop="remark"
                    label="备注">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="操 作"
                    width="100">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row,tableData)"><i class="el-icon-delete"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import { cl } from '@fullcalendar/core/internal-common'
export default {
    data() {
      return {
        diid:0,
        userid:'',
        expends:[],
        barderis:true,
        options: [],
        value: '',
        currencyoptions:'',
        typeoptions:[],
        tableData: [],
        multipleSelection: [],
        groupInfo:{},
        argument:[],
        UnassignedData:[]
      }
    },
    computed:{
        computeReceivables(row){
            console.log(row)
        }
    },
    methods:{
        //获取diid
        Receivables(){
            this.diid=this.value
            this.GetForeignReceivablesDataSources()
        },
        //获取团组
        GetForeignReceivablesDataSources(){
            var url = "/api/Financial/GetForeignReceivablesDataSources"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    currUserId:that.userid
                }
            }).then(function (res) {
                    console.log(res)
                    that.options=res.data.data.groupNameData;
                    that.currencyoptions=res.data.data.currencyData;
                    that.typeoptions=res.data.data.remittanceMethodData;
                    if(that.value==""){
                        that.value=that.options[0].id;
                    }
                    that.diid=that.value;
                    that.GetGroupReceivablesInfoByDiId();
            })
        },
        //获取收款账单
        GetGroupReceivablesInfoByDiId(){
            var url = "/api/Financial/GetGroupReceivablesInfoByDiId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    diId: that.diid
                }
            }).then(function (res) {
                    console.log(res)
                    that.groupInfo=res.data.data.groupInfo;
                    that.tableData=res.data.data.groupCollectionStatementData.receivedData;
                    that.UnassignedData=res.data.data.groupCollectionStatementData.unallocatedData;
                    that.getExpends();
            })
        },
        //默认展开
        getExpends(){
            var Id=[]
            this.tableData.forEach(item=>{
                if(item._ProceedsReceivedDatas.length>0){
                    Id.push(item.id)
                }
            })
            this.expends=Id;
        },
        getRowKeys(row){
            return row.id
        },
        handledetail(row,expandedRows){
            this.argument=this.expends;
            if (this.argument.indexOf(row.id) > -1) {
                this.argument.splice(this.argument.indexOf(row.id), 1)
            } else {
                this.argument.push(row.id)
            }
            // console.log(this.argument)
        },
        TableRowStyle(row, rowIndex){
            // console.log(row.row.id)
            if (row.row.id == 21675) {
                // console.log(row.rowIndex)
                return "{background:'#f4f5f6'}"
				//第二种
				// return 'cell-grey'
			}
        },
        //未分配多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection)
        },
        //分配按钮
        assignment(row){
            console.log(row)
            var arrnews = this.multipleSelection.map((obj,index) => {
                return obj.id;
            }).join(",").split(',')
            console.log(arrnews)
            if(this.multipleSelection.length!=0){
                this.$confirm('是否分配此条数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = "/api/Financial/PostAllocateAmountReceived"
                    var that = this
                    this.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + this.token
                        },
                        data:{
                            portType:1,
                            userId:that.userid,
                            parentId:row,
                            subIds:arrnews
                        }
                    }).then(function (res) {
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        that.GetGroupReceivablesInfoByDiId()
                    })
                })
            }
        },
        //添加一行
        addition(){
            var newinif={
                id: 0,
                priceName: "1",//费用名称
                price: 0,//费用
                count: 0,//数量
                unit:'',//单位
                itemSumPrice:0,// 单项总和
                rate:1,// 汇率
                currency:836,//币种
                addingWay:0,//添加方式
                remark:""//备注
            }
            var url = "/api/Financial/PostReceivablesOperate"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    diId: that.diid,
                    userId:that.userid,
                    foreignReceivablesInfos:[newinif]
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    console.log(res)
                    that.GetGroupReceivablesInfoByDiId()
                }else{
                    that.$message.error('添加失败!数据异常');
                }
            })
        },
        //对外收款账单删除
        handleDelete(index, row,rows) {
            this.$confirm('此条数据为大项数据删除后子项将一并删除 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Financial/PostGroupReceivablesDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        userId:that.userid,
                        id:row.id
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        rows.splice(index, 1);
                    }else{
                        that.$message.error('删除失败!数据异常');
                    }
                })
            })
        },
        //新增已收
        addinif(row){
            console.log(row.id)
            var newReceivedInfos={
                id: 0,
                sectionTime: "",
                price: 0,//费用
                currency:836,//币种
                receivablesType:73,
                client:"",
                customerName:"",
                customerTel:"",
                fid:row.id,
                remark:""
            }
            var url = "/api/Financial/PostAmountReceivedOperate"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    diId: that.diid,
                    userId:that.userid,
                    _ProceedsReceivedInfos:[newReceivedInfos]
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    console.log(res)
                    that.GetGroupReceivablesInfoByDiId()
                }else{
                    that.$message.error('添加失败!数据异常');
                }
            })
        },
        //删除已收
        handleDeleteinif(index, row){
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Financial/PostAmountReceivedDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        userId:that.userid,
                        id:row.id
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        that.GetGroupReceivablesInfoByDiId();
                    }else{
                        that.$message.error('删除失败!数据异常');
                    }
                })
            })
        },
        //保存已收款
        Saveinif(row){
            console.log(row)
            var Savedecide=true
            for(let i=0;i<row.length;i++){
                if(row[i].client==""||row[i].currency==""||row[i].customerName==""||row[i].customerTel==""||row[i].price==""||row[i].receivablesType==""||row[i].sectionTime==""){
                    Savedecide=false
                    break
                }
            }
            if(Savedecide==true){
                var url = "/api/Financial/PostAmountReceivedOperate"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        portType: 1,
                        userId:that.userid,
                        diId: that.diid,
                        _ProceedsReceivedInfos:row
                    }
                }).then(function (res) {
                    console.log(res)
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        that.GetGroupReceivablesInfoByDiId()
                    }else{
                        that.$message.error('保存失败!数据异常');
                    }
                })
            }else{
                this.$message.error('请检查数据是否完整！');
            }
        },
        //保存收款单
        Saveition(){
            console.log(this.tableData)
            //提取参数
            var arrnew = this.tableData.map((item,index) => {
                return Object.assign({},{
                    'id':item.id,
                    'priceName':item.priceName,
                    'price':item.price,
                    'count':item.count,
                    'unit':item.unit,
                    'itemSumPrice':item.itemSumPrice,
                    'rate':item.rate,
                    'currency':item.currency,
                    'addingWay':item.addingWay,
                    'remark':item.remark,
                })
            })
            console.log(arrnew)
            var Savedecides=true
            for(let g=0;g<arrnew.length;g++){
                if(arrnew[g].count==""||arrnew[g].currency==""||arrnew[g].itemSumPrice==""||arrnew[g].price==""||arrnew[g].priceName==""||arrnew[g].rate==""||arrnew[g].unit==""){
                    Savedecides=false
                    break
                }
            }
            if(Savedecides==true){
                var url = "/api/Financial/PostReceivablesOperate"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        portType: 1,
                        diId: that.diid,
                        userId:that.userid,
                        foreignReceivablesInfos:arrnew
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        console.log(res)
                        that.GetGroupReceivablesInfoByDiId()
                    }else{
                        that.$message.error('保存失败!数据异常');
                    }
                })
            }else{
                this.$message.error('请检查数据是否完整！');
            }
        },
        //计算应收
    },
    filters:{
        filter_time(value){
            return value;
        },
        filter_city(value){
            return value
        }
    },
    watch:{
        // 此处监听variable变量，当期有变化时执行
        // expends(item1,item2){
            // item1为新值，item2为旧值
            // console.log(item1,item2)
        // }
    },
    mounted(){
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.GetForeignReceivablesDataSources()
    }
}
</script>
<style>
.collection-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.collection-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.collection-head{
    display: flex;
    justify-content: space-between;
}
.collection-info{
    display: flex;
    margin-top: 10px;
}
.collection-info-li{
    margin-right: 30px;
}
.collection-info-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.collection-info-li span{
    color: #606266;
    font-size: 14px;
}
.collection-form{
    margin-top: 10px;
}
.collection-checked{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Unassigned-checked{
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.paid-box{
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin-bottom: 5px;
}
.paid-label{
    font-size: 14px;
    font-weight: 600;
}
.editNum input::-webkit-outer-spin-button,
.editNum input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.editNum input[type="number"] {
    -moz-appearance: textfield;
}
.el-table .el-table__expanded-cell[class*="cell"] {
    background: #F5F7FA;
}
.inside-li{
    margin: 0 8px;
}
.el-table__expanded-cell:hover {
    background-color: #F5F7FA!important;
}
.checked-label{
    font-size: 15px;
    font-weight:600 ;
    color: #606266;
}


.el-dropdown {
    vertical-align: top;
}
.el-dropdown + .el-dropdown {
    margin-left: 15px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.collection-all .el-input-number{
    width: 100%;
}
.sub-box{
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-family: cursive;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;  
}
</style>