<style scoped>
    .currentManage .addCompany {width: 440px;}
    /* 币种管理 */
    .cm_content{padding:0;overflow-x: auto;}
    .cmc_item{float: left;width:212px;height: 195px;background:rgba(255,255,255,1);border-radius:4px;overflow: hidden;margin-right: 12px;margin-bottom: 15px;border: 1px solid #ebebeb}
    .cmci_top{background-color: #3AD892;padding: 14px 20px;font-size: 14px;color: #009251}
    .cmci_top p span:nth-child(2){display: inline-block;padding: 2px 5px;font-size: 12px;color: #FFFFFF;background-color: #02AE62;border-radius:4px;margin-left: 5px;vertical-align:top;}
    .cmci_cen{padding: 14px 20px;color: #666666;font-size: 12px}
    .cmci_cen p{padding: 4px 0;}
    .cmci_cen p .fr{font-weight: bold;font-family: "PingFangSC-fine";color: #333333}
    .cmci_cen p .icon-shuaxin{background-color: #E7E7E7;color: #999999;display: inline-block;margin-left: 5px;border-radius: 50%;font-size: 12px;transform: rotate(60deg);cursor: pointer;transition: all linear 0.2s;width: 12px;height: 12px;line-height: 12px;}
    .cmci_cen p .icon-shuaxin:hover{background-color: #E95252;color: white;}
    .fc_green{color: #47BF8C !important}
    .fc_red{color: #E95252 !important}
    .cmci_bot{padding:0 20px 20px 20px;font-size: 12px !important;text-align: center}
    .cmci_bot .el-button-group .el-button{padding: 4px;}
    .cmci_bot .el-button{font-size: 12px !important}
    .cmc_item:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    ._benwei{background-color: #2AAEF2!important;color: #0877B0!important}
    ._benweiA{background-color: #0F80BA!important}
    ._underline{text-decoration: underline;cursor: pointer;}
    .currentManage ._vMG_edit{overflow: auto;display: none;position:absolute;font-family: 'PingFangSc-Fine';bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 10px;width: 100%;}
    .currentManage ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
    .currentManage ._vMG_edit ._tit span{color: #666666;font-size: 14px;}
    ._edHeight{height:400px;}
    .edHeight{display: block !important;height: 230px;}
    ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
    ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    ._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .currentManage ._info_box ul{margin-top: 15px}
    .currentManage ._info_box ul li{float: left;    width: 250px;}
    ._max_width{max-width: 100px; overflow:hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align:top;}
    ._yingkui{height: 40px;line-height: 40px;font-size: 12px;color: #666666}
    ._tips{font-size: 12px;color: #666666;padding: 15px 0}
        .currentManage .po_content{
    border-collapse: collapse;
}
.currentManage .po_content{
    width: 100%;
}
.currentManage .po_content tr:first-child{
    font-size: 12px;
    color: #666666;
    background-color: #DCDCDC;
}
.currentManage .po_content tr th,.currentManage .po_content tr td{
    padding: 10px 20px;
    text-align: left;
}
.currentManage .po_content tr td{
    color: #333333;
    font-size: 14px;
    border:1px solid #E6E6E6;
}
.currentManage .po_content tr td .iconfont{
    font-size: 14px;
    padding: 4px;
}
.currentManage .query-box .iconfont{
    cursor: pointer;
    background-color: #E95252;
    color: white;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 10px;
}
.currentManage ._yuan{
    width:12px;
    height:12px;
    background:rgba(233,82,82,1);
    border-radius:50%;
    display: inline-block;
}
.currentManage ._yuan._yuan_red{
    background:#47BF8C;
}
._flex_rete{
    cursor: pointer;
}
.display_none{
    opacity: 0;
}
._flex_rete .icon-qiehuan{
    background-color: #E5E5E5;
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    padding: 0 !important;
    line-height: 20px;
    float: right;
}
._flex_rete .icon-qiehuan:hover{
    background-color: rgba(233,82,82,1);
    color: white;
}
.Rform p{
    padding:6px 0;
    text-decoration: underline
}
.hoverFriD:hover{
    color:red;
}
.Rform span{
    display:inline-block;
    width:80px;
    text-align: right;
}
</style>
<template>
  <div class="flexOne currentManage">
       <div class="query-box">
           <ul>
               <li>
                   <span>
                       <em>{{$t('hotel.hotel_SerialNumber')}}</em>
                       <el-input type="Number" v-model="msg.ID"></el-input>
                   </span>
               </li>
               <li>
                   <span>
                       <em>{{$t('advmanager.v_type')}}</em>
                       <el-select  filterable  v-model='msg.BankType' @change="getBank">
                            <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                            <el-option :value="1" :label="$t('fnc.yinhang')"></el-option>
                            <el-option :value="2" :label="$t('fnc.pingtai')"></el-option>
                        </el-select>
                   </span>
               </li>
               <li>
                   <span>
                       <em>{{$t('fnc.a_yhzhanghu')}}</em>
                       <el-select  filterable  v-model='msg.BankAccountId' >
                            <el-option key="0" :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                            <el-option v-for="item in currencyTypeList" :key="item.ID" :value="item.ID" :label="item.Alias"></el-option>
                          </el-select>
                   </span>
               </li>
               <!-- <li>
                   <span>
                       <em>{{$t('objFill.v101.kaihumin')}}</em>
                       <el-input  v-model="msg.AccountName"></el-input>
                   </span>
               </li> -->

               <li>
                   <span>
                       <em>{{$t('fnc.skjine')}}</em>
                       <el-input style="width:100px" v-model="msg.SIncome"></el-input>
                       -
                       <el-input style="width:100px" v-model="msg.EIncome"></el-input>
                   </span>
               </li>
               <li>
                   <span>
                       <em>{{$t('fnc.fkjine')}}</em>
                       <el-input style="width:100px" v-model="msg.SRefund"></el-input>
                       -
                       <el-input style="width:100px" v-model="msg.ERefund"></el-input>
                   </span>
               </li>
               <li>
                   <span>
                       <em>{{$t('objFill.duifanghuming')}}</em>
                       <el-input  v-model="msg.Remitter"></el-input>
                   </span>
               </li>
               <li>
                   <span>
                       <em>{{$t('objFill.jiapyitime')}}</em>
                       <el-date-picker class="h34"
                                    @change="timeAdd"
                                    v-model="productionDate"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    :range-separator="$t('restaurant.res_To')">
                                </el-date-picker>
                   </span>
               </li>

               <li>
                   <span>
                       <em>{{$t('admin.admin_status')}}</em>
                       <el-select  filterable  v-model='msg.Type' >
                            <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                            <el-option :value="1" :label="$t('objFill.v101.yirenlin')"></el-option>
                            <el-option :value="2" :label="$t('objFill.v101.weirenlin')"></el-option>
                        </el-select>
                   </span>
               </li>

               <li>
                    <button class="hollowFixedBtn" @click="getList(),getTongji()">{{$t('pub.searchBtn')}}</button>
                    <button class="hollowFixedBtn" @click="outerVisible=true">{{$t('objFill.daoru')}}</button>
                    <a class="hollowFixedBtn downBtn" style="padding:6px 9px;" :href="downList">{{$t('objFill.v101.FinancialModule.daorumobxz')}}</a>

               </li>
           </ul>
       </div>
       <div style="margin:15px 0;font-size:14px">
           <span>{{$t('objFill.v101.weirenzongs')}}:{{datainfo.Income}}</span>
           <span>已认领:{{datainfo.ClaimMoney}}</span>
           <span>待认领:{{datainfo.SurplusMoney}}</span>
           <!-- <span style="margin:0 15px">{{$t('objFill.v101.shenhejine')}}:{{datainfo.AuditMoney}}</span>
           <span>{{$t('objFill.v101.jinribaob')}}:{{datainfo.ReportMoney}}</span> -->
       </div>
       <div class="cm_content _scrollbar">

           <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-loading="loading">
                <tr>
                    <th>{{$t('hotel.hotel_SerialNumber')}}</th>
                    <th>{{$t('advmanager.v_type')}}</th>
                    <th>{{$t('fnc.bieming')}}/{{$t('objFill.huming')}}</th>
                    <th>{{$t('objFill.v101.kaihuhzhao')}}</th>
                    <th>{{$t('objFill.jiapyitime')}}</th>
                    <th>客人付款</th>
                    <th>到账金额</th>
                    <th>手续费</th>
                    <th>{{$t('objFill.duifanghuming')}}</th>
                    <th>{{$t('objFill.v101.renlindanhao')}}/销售/金额</th>
                    <th>{{$t('objFill.v101.renkuanjine')}}</th>                    
                    <th>余额</th>    
                    <!-- <th>{{$t('objFill.v101.jinribaob')}}</th> -->
                    <th>{{$t('objFill.v101.caiwuryuan')}}</th>
                    <th>{{$t('system.table_operation')}}</th>
                </tr>
                <tr v-for="(item,index) in DataList" :key="index">
                    <td>{{item.ID}}</td>
                    <td>
                        <span v-if="item.BankType==1">{{$t('fnc.yinhang')}}</span>
                        <span v-if="item.BankType==2">{{$t('fnc.pingtai')}}</span>
                    </td>
                    <td>{{item.Alias}}
                        <!-- <p>{{item.AccountName}}</p> -->
                    </td>
                    <td>{{item.OpeningBank}}
                        <p>{{item.BackNo}}</p>
                    </td>
                    <td>{{item.TradeDate}}</td>
                    <td>{{item.TotalMoney}}</td>
                    <td>{{item.Income}}</td>
                    <td>{{item.Refund}}</td>
                    <td>{{item.Remitter}}</td>
                    <td>
                        <template v-for="(i,index) in item.ClaimList">
                            <span v-if="i.Status==0" class="hoverFriD" style="cursor: pointer;text-decoration: underline;margin-left:5px; color:blue;" @click="Gourl(i.FinanceId)">
                                {{i.FinanceId}} / {{i.EmName}} / {{i.Money}} </br>
                            </span>
                            <span v-else-if="i.Status==3" class="hoverFriD" style="cursor: pointer;text-decoration: underline;margin-left:5px; color: red;" @click="Gourl(i.FinanceId)">
                                {{i.FinanceId}} / {{i.EmName}} / {{i.Money}} </br>
                            </span>
                            <span v-else class="hoverFriD" style="cursor: pointer;text-decoration: underline;margin-left:5px" @click="Gourl(i.FinanceId)">
                                {{i.FinanceId}} / {{i.EmName}} / {{i.Money}} </br>
                            </span>
                        </template>
                    </td>
                    <td>{{item.ClaimMoney}}</td>
                    <td>{{item.SurplusMoney}}</td>
                    <!-- <td>{{item.ReportMoney}}</td> -->
                    <td>
                        <div>{{item.UpdateBy}}</div>
                        <div style="font-size:12px;">{{item.UpdateDate}}</div>
                    </td>
                    <td>
                        <span style="cursor: pointer;color:blue;text-decoration:underline" @click="AddR(item)" v-if="item.Type==2">{{$t('objFill.v101.renlin')}}</span>
                        <!-- <span> | </span> -->
                        <span style="cursor: pointer;color:red;text-decoration:underline" @click="Delete(item)" v-if="item.IsDelete==1">{{$t('system.table_delete')}}</span>
                    </td>
                </tr>
            </table>
           <div class="noData" v-if="DataList.length==0">
                {{$t('system.content_noData')}}
            </div>
           <div>
               <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="total,prev, pager, next, jumper"
                    :page-size=msg.pageSize
                    :total=total>
                </el-pagination>
           </div>
       </div>
        <el-dialog custom-class='w700' :title="$t('objFill.daoru')" :visible.sync="outerVisible" center>
            <el-upload style="text-align: center;" drag class="upload-demo" :action="importFileUrl2" :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">{{$t('tips.tuodongwenjian')}}<em>{{$t('tips.dianjishanhcuan')}}</em></div>
                <!-- <div slot="tip" class="el-upload__tip">{{$t('ground.znscexcel')}}</div> -->
            </el-upload>
        </el-dialog>
        <el-dialog custom-class='w400' :title="$t('objFill.v101.renlinweirenk')" :visible.sync="moneyR" center>
            <el-form class="Rform" ref="form" :model="form" label-width="100px">
                <p><span>{{$t('objFill.huming')}}:</span>{{form.AccountName}}</p>
                <p><span>{{$t('system.table_acc')}}:</span>{{form.BackNo}}</p>
                <p><span>到账:</span>{{form.Income}}</p>
                <p><span>手续费:</span>{{form.Refund}}</p>
                <el-form-item :label="$t('objFill.v101.bandincwdju')">
                    <el-input v-model="form.FrId" class="w180"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="moneyR = false">{{$t('pub.cancelBtn')}}</el-button>
                <el-button size="small" type="danger" @click="RSumbit">{{$t('pub.sureBtn')}}</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<script>
	export default {
		data() {
			return {
                form:{
                    ID:"",
                    FrId:'',
                },
                moneyR:false,
                outerVisible:false,
                msg:{
                    pageIndex:1,
                    pageSize:14,
                    ID:'',
                    StartTime:"",
                    EndTime:"",
                    BankAccountId:"",
                    Remitter:"",
                    SIncome:"",
                    EIncome:"",
                    SRefund:"",
                    ERefund:"",
                    AccountName:"",
                    Type:-1,
                    BankType:0,
                },
                productionDate:[],
                DataList:[],
                loading:false,
                currentPage:1,
                total:0,
                currencyTypeList:[],
                importFileUrl2: "",
                downList:"",
                TypeList1:[],
                TypeList2:[],
                datainfo:{},
			}
        },
        created(){
            let userInfo = this.getLocalStorage();
            this.importFileUrl2=this.domainManager().UploadFileUrl +
            "?cmd=dmc_post_LocalFileUpload&fileType=1&fileLimit=1&RB_Group_id=2&Type=5&EmployeeId="+userInfo.EmployeeId;
            this.downList =this.domainManager().LocalTemplateFileDownLoadUrl +"/Upload/Template/未认款导入模板.xls";
            this.msg.ID = this.$route.query.ClaimId ? this.$route.query.ClaimId : '';
            this.GetAccount();
            this.GetAccount2();
            this.getList();
            this.getTongji();


        },
        filters:{
            PNumber(val){
                if(val){
                    return val.substr(0, 4) + "****" + val.substr(-4,4)
                }

            },
        },
        mounted(){
            if(this.$route.query.StartTime){
                this.productionDate=[];
                this.productionDate[0]=this.$route.query.StartTime;
                this.productionDate[1]=this.$route.query.EndTime;
            }
        },
		methods: {
            getTongji(){
                this.apipost('Financial_get_GetFinanceRemittanceClaimStatistics',this.msg,res=>{
                            if(res.data.resultCode==1){
                                this.datainfo=res.data.data;
                            }else{
                                this.Error(res.data.message)
                            }
                        },err=>{})
            },
            getBank(val){
                if(val==1){
                    this.currencyTypeList=this.TypeList1;
                }if(val==2){
                    this.currencyTypeList=this.TypeList2;
                }
            },
            checkInt(obj){
            //    obj.value = obj.value.replace(/[^/d.]/g,"");

                //必须保证第一位为数字而不是.

                // obj.value = obj.value.replace(/^/./g,"");
            },
            AddR(item){
                this.form.ID=item.ID;
                this.form.AccountName=item.AccountName;
                this.form.BackNo=item.BackNo;
                this.form.Income=item.Income;
                this.form.Refund=item.Refund;
                this.moneyR=true;
            },
            Delete(item){
                var msg = {
                    ID: item.ID
                }
                this.$confirm(this.$t('tips.shifoushanchu'),  this.$t('tips.tips'), {
						confirmButtonText: this.$t('pub.sureBtn'),
						cancelButtonText: this.$t('pub.cancelBtn'),
						type: 'warning'
					}).then(() => {
                        this.apipost(
                            'Financial_post_DelFinanceRemittanceClaim',
                            msg,
                            res => {
                            if (res.data.resultCode == 1) {
                                this.Success(res.data.message)
                                this.getList()
                            } else {
                                this.Error(res.data.message)
                            }
                            },
                            null
                        )
					}).catch(() => {

					});

            },
            RSumbit(){
                if(this.form.FrId==""){
                    this.Error(this.$t('objFill.v101.qiingsrucwdjid'));
                    return;
                }
                this.apipost('Financial_post_GetFinanceMoney',{FrId:this.form.FrId},res=>{
                    if(res.data.resultCode==1){
                        this.apipost('Financial_post_SetFinanceRemittanceClaim',this.form,res=>{
                            if(res.data.resultCode==1){
                                this.getList();
                                this.moneyR=false;
                            }else{
                                this.Error(res.data.message)
                            }
                        },err=>{})
                    }else{
                        this.Error(res.data.message)
                    }
                },err=>{})

            },
            Gourl(i){
                this.$router.push({
                    name: "FinancialDocumentsDetail",
                    query: {
                        id: i,
                        blank: 'y'
                    }
                })
            },
            beforeAvatarUpload(file) {
                return;
                const isJPG = file.type === "application/x-msdownload";
                if (!isJPG) {
                this.$message.error(this.$t('tips.shangchuanExcel'));
                }
                return isJPG && isLt2M;
            },
            //上传
            handleAvatarSuccess(res, file) {
                if (res.resultCode == 1) {
                    this.Success(res.message);
                    this.outerVisible = false;
                    this.getList();
                }else{
                    this.Error(res.message);

                }
            },
            resetPageIndex(){  // 重置页码
                this.msg.pageIndex=1;
                this.currentPage = 1;
            },
            handleCurrentChange(val) { //翻页
                this.msg.pageIndex = val;
                this.getList();
            },
            getList(){
                this.loading=true;
                this.apipost('Financial_post_GetFinanceRemittanceClaimPageList', this.msg, res => {
                    this.loading=false;
                    if(res.data.resultCode == 1) {
                        this.DataList = res.data.data.pageData;
                        this.total=res.data.data.count;
                    } else {
                        this.Error(res.data.message);
                    }
                }, err => {})
            },
           timeAdd(){
               if(!this.productionDate){
                    this.msg.StartTime = '';
                    this.msg.EndTime = '';
                    return
                }
                this.msg.StartTime = this.productionDate[0];
                this.msg.EndTime = this.productionDate[1];
           },
           GetAccount(){
            this.apipost('bankaccount_post_GetList',{TypeId:'0'},res=>{
                if(res.data.resultCode==1){
                    this.TypeList1 = res.data.data;
                    if(this.$route.query.BankType){
                        this.msg.BankType=Number(this.$route.query.BankType)
                        this.getBank(this.msg.BankType)
                    }
                    if(this.$route.query.BankID){
                        this.msg.BankAccountId=Number(this.$route.query.BankID)
                    }

                }else{

                }
            },err=>{})
        },
        GetAccount2(){
            let msg = {
                BackId:0,
                TypeId:12,
                BranchId:-1,
                Alias:'',
               // RB_Branch_Id:this.RB_Branch_Id,
                }
                this.apipost('BankAccount_post_GetPlatformList',msg, res => {
                    if(res.data.resultCode == 1) {
                        let data = res.data.data;
                        this.TypeList2 = data;
                    }
                }, err => {})
            },
        },

	}
</script>