<style scoped>
    .page_fnDm{background-color: white}
    .query-box{overflow: inherit}
    ._nav{margin: 20px 0 0 0 ;background-color: #f5f5f5;}
    ._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
    ._nav li._active{background-color:#FFFFFF;color: #333333 }
    ._nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
    .el-range-editor.el-input__inner{border-radius: 0}
    .query-box{border: none}
    .hight_query{position: relative;}
    .hight_query span{height: 34px;line-height: 34px;color: #E95252}
    .hight_query span .icon-gengduo{font-size: 12px}
    .hight_query span em{text-decoration: underline;cursor: pointer;}
    .hight_query_box{position: absolute;background-color: white;z-index: 2000;right: 200px;width: 800px;}
    ._hqb_shadow{box-shadow:3px 2px 10px rgb(204, 203, 203);border: 1px solid #ececec;}
    .query-box ul {overflow: initial;}
    .hqb_t{padding: 10px 20px;font-size: 16px;background-color: #E95252;border: 1px solid #E95252;color: #fff;text-align: center;margin-bottom: 15px}
    .query-box li:last-child{float: left}
    .query-box>ul>li:last-child{float: right;}
    .query-box .hight_query ul .el-input{width: inherit  }
    .hight_query_box ul li{margin-top: 0;float: left;margin-right: 15px}
    .hight_query_box ul li label{font-size: 14px}
    .hight_query_box .el-form{padding: 0 20px}
    .hight_query_box ul li._hqb_btn{float: right;margin-right: 25px;padding-top: 5px;position: inherit}
    .Receipt_box{padding: 15px;color: #c94052;width: 614px;background-color: rgba(242, 242, 242, 1);border: 1px solid rgba(228, 228, 228, 1)}
    .Receipt_box.color_blur{color: #106BAF;}
    .Receipt_box.color_blur .rb_stit span{display: inline-block;border-bottom: 2px solid #106BAF;padding: 0 20px}
    .rb_tit{font-size: 18px;text-align: center}
    .rb_stit{font-size: 14px;text-align: center}
    .rb_stit span{display: inline-block;border-bottom: 2px solid #C94052;padding: 0 20px}
    .rb_top_row{display: flex;justify-content: space-between;font-size: 12px;}
    .rb_top_row span._r_name{color: #333333}
    .rb_top_row span._r_bold{font-weight: bold}
    .rb_top_row ._r_time span{color: #333333}
    ._r_mb5{margin-bottom: 5px;}
    .Receipt_table{width: 100%;font-size: 14px;text-align: center}
    .Receipt_table .th{font-weight: 200 !important}
    ._r_mt10{margin-top: 10px;}
    ._bg__{display: inline-block;padding: 2px 8px;color: white;border-radius: 4px}
    ._bg_red{background-color: #E95252;}
    ._bg_green{background-color: #2BB87C}
    .text_d{text-decoration: underline;cursor: pointer;}
    .PingFangSC{font-weight: bold}
    .Bill_par{position: relative;}
    tr th,tr td{text-align: left;padding-left: 20px;}
    tr._item_list{border-bottom: 1px solid #E5E5E5;height: 78px;}
    tr._item_list td{border-bottom: 1px solid #e5e5e5;    padding: 10px;}
    /* tr._t_head th{border-top: 1px solid #e5e5e5;} */
    tr._item_list td:first-child{border-left: 1px solid #e5e5e5;}
    tr._item_list td:last-child{border-right: 1px solid #e5e5e5;}
    ._head_img{width: 28px;height: 28px;border-radius: 50%;vertical-align:middle;}
    ._btn_group{font-size: 14px;}
    .icon-daiqueren{color: #4BCA81}
    .icon-yiqueren{color: #4BCA81}
    .icon-yiquxiao{color: #959595}
    .icon-shenhebohui{color: #E95252}
    .icon-icon-zancun{color: #FF9C01}
    .singeRowTable tr:hover{background-color: white}
    ._TradeWayList{padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;margin: 10px 0;width: 230px}
    ._bold{font-weight: bold}
    ._bank_name,._bank_type{display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;}
    ._bank_name{margin-left: 10px;}
    ._bank_type{background-color: #2AAEF2}
    ._bank_type2{background-color: #FF9C01}
    ._font_init{color: #333333;font-size: 12px;vertical-align:top;}
    .InfoChangeLog{height: auto;max-height: 220px;background-color: #FFFFFF;}
    .changLogList{padding-left: 20px;max-height: 180px;overflow: auto;}
    .changLogList_l{border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;}
    ._radius_green{background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;}
    .changLog_time{color: #666666;font-size: 12px;display: inline-block;padding-right: 10px}
    ._icon_btn i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;outline: none;}
    ._icon_btn i.edit{background-color: #00C6FF;font-size: 16px;}
    ._icon_btn i.edit:hover{background-color: #59daff}
    ._icon_btn i.edit:active{background-color: #00b8ec}
    ._icon_btn i.icon-sousuo{background-color: #47BF8C;}
    ._icon_btn i.icon-sousuo:hover{background-color: #66bb97}
    ._icon_btn i.icon-sousuo:active{background-color: #35ab79}
    ._icon_btn i.icon-ico_commodity_defaul{background-color: #F16C3C;}
    ._icon_btn i.icon-ico_commodity_defaul:hover{background-color: #e87c54}
    ._icon_btn i.icon-ico_commodity_defaul:active{background-color: #f76630}
    ._icon_btn i.icon-quxiao1{background-color: #E95252;}
    ._icon_btn i.icon-quxiao1:hover{background-color: #ea6d6d}
    ._icon_btn i.icon-quxiao1:active{background-color:#e42d2d}
    ._icon_btn i.icon-zhuanjiao1{background-color: #E6A014;font-size: 16px;}
    ._icon_btn i.icon-zhuanjiao1:hover{background-color: rgb(235, 184, 84)}
    ._icon_btn i.icon-zhuanjiao1:active{background-color: rgb(223, 150, 6)}
    ._tag_span{background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #409eff;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;}
    ._tag_span._tag_warr{background-color: rgba(103,194,58,.1);border-color: rgba(103,194,58,.2);color: #67c23a;}
    ._fex_cen{display: flex;align-items: center}
    ._pad5{padding: 5px 10px;}
    ._color_gar{color: gray}
    ._TCIDAndTCNUMList{
        display: flex;
    }
    .JumpDivTitleOne{
        margin-left:20px;
        font-size:14px;
    }
    .JumpDivTitleTwo{
        margin:10px 0 0 20px;
        font-size:14px;
    }
    .JumpSpan{
        margin:0 20px;
    }
</style>

<template >
    <div class="page_fnDm page_RecPayQuery"  @keyup.enter="resetPageIndex(),getPageList()">
        <div class="query-box">
            <el-form class="_info_box clearfix"  label-width="110px">
                <el-row style="padding:15px 20px 0 0;">
                    <el-col :span="4">
                        <el-form-item :label="$t('fnc.danhao')">
                            <el-input placeholder="" class="" v-model="msg.FrID"></el-input>
                        </el-form-item>
                    </el-col>
                    <!--
                    <el-col :span="4">
                        <el-form-item :label="$t('scen.sc_temID')">
                            <el-input v-model="msg.TCID" class=""></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="4">
                        <el-form-item :label="$t('fnc.ssuogongsi')">
                            <el-select  filterable  v-model='msg.RB_Branch_Id' @change="getDepartmentMsg.RB_Branch_Id=msg.RB_Branch_Id,msg.RB_Depart_Id='',msg.UpdateBy=''"  class="">
                                <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                                <el-option v-for='item in CompanyList'
                                    :label='item.BName'
                                    :value='item.Id'
                                    :key='item.Id'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <template>
                      <el-col :span="4">
                        <el-form-item :label="$t('fnc.shzhuangtai')">
                          <el-select  filterable  v-model='msg.Status'  class="">
                            <el-option key="-1" :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                            <el-option key="0" value="0" :label="$t('fnc.zancun')"></el-option>
                            <el-option key="1" value="1" :label="$t('fnc.a_shezhong')"></el-option>
                            <el-option key="2" value="2" :label="$t('visa.v_tongguo')"></el-option>
                            <el-option key="3" value="3" :label="$t('fnc.bohui')"></el-option>
                            <el-option key="4" value="4" :label="$t('active.cl_zuofei')"></el-option>
                            <el-option key="5" value="5" :label="$t('fnc.a_cnzancun')"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item :label="$t('system.query_type')" >
                          <el-select  filterable  v-model='msg.Type' >
                            <el-option key="0" :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                            <el-option key="1" :value="1" :label="$t('restaurant.res_income')"></el-option>
                            <el-option key="2" :value="2" :label="$t('restaurant.res_outcome')"></el-option>
                            <el-option key="4" :value="4" :label="$t('fnc.zjdiaobo')"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item :label="$t('fnc.zdrenyuan')">
                            <el-select  filterable  v-model='msg.UpdateBy'  class="">
                                <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                                <el-option v-for='item in EmployeeList'
                                    :label='item.EmName'
                                    :value='item.EmployeeId'
                                    :key='item.EmployeeId'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                      <el-col :span="6">
                        <el-form-item :label="$t('fnc.jiaoyiriqi')">
                          <el-date-picker class="h34"
                                          v-model="transactionDate"
                                          @change="timeAdd(3)"
                                          type="daterange"
                                          value-format="yyyy-MM-dd">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item :label="$t('fnc.zdriqi')">
                          <!-- <el-date-picker class="h34"
                                          @change="timeAdd(1)"
                                          v-model="productionDate"
                                          type="daterange"
                                          value-format="yyyy-MM-dd">
                          </el-date-picker> -->
                          <StartDateLimit :clearable="false" :dateTime="productionDate" @change="(startDate,endDate)=>{msg.sDate=startDate,msg.eDate=endDate}"></StartDateLimit>
                        </el-form-item>
                      </el-col>

                    </template>
                </el-row>
            </el-form>
            <ul class="clearfix">
                <li class="hight_query">
                    <!-- <span>
                        <em @click.stop="heightQueryBox=!heightQueryBox">{{$t('visa.v_gjchaxun')}} <i class="iconfont icon-gengduo"></i></em>
                    </span> -->
                    <button class="hollowFixedBtn" @click="resetPageIndex(),getPageList()">{{$t('pub.searchBtn')}}</button>
                    <!-- <button class="normalBtn" @click="method5()">{{$t('visa.v_daochu')}}</button> -->
                </li>
            </ul>
            <div class="JumpDivTitleOne">{{$t('fnc.ysjine')}}：{{SumYingShou}} <span class="JumpSpan">{{$t('objFill.shishoujine')}}：{{SumShiShou}}</span> {{$t('Operation.Op_daishou')}}：{{SumDaiShou}}</div>
            <div class="JumpDivTitleTwo">{{$t('objFill.yingfujine')}}：{{SumYingFu}} <span class="JumpSpan">{{$t('fnc.sfjine')}}：{{SumShiFu}}</span> {{$t('objFill.v101.FinancialModule.daifuje')}}：{{SumDaiFu}}</div>
        </div>
        <div class="_fnDm_content" v-loading='loading'>
            <v-table
                is-horizontal-resize
                column-width-drag
                style="width:100%"
                :columns="columns"
                :table-data="DataList"
                :filter-method="filterMethod"
                :total='total'
                :pageSize='pageSize'
                :pageIndex='pageIndex'
                :handleCurrentChange='handleCurrentChanges'
                :row-height='100'
                @on-custom-comp="customCompFunc"
                @sort-change="sortChange"
                multiple-sort><!-- 多个排序 -->
            </v-table>
        </div>
    </div>
</template>
<script>
import myBill from "./FinancialSubmodule/BillModule.vue";
import myrbvBill from "./FinancialSubmodule/ReceivablesModule.vue";
import myhrBill from "./FinancialSubmodule/MergeBillModule.vue";
import Vue from 'vue'
import StartDateLimit from '../public/StartDateLimit.vue';
// 自定义列组件
Vue.component('table-BranchName',{  //查看操作按钮
  template:`<span>{{rowData.BranchName}}</span>`,
  props:{
    rowData:{
      type:Object
    },
    field:{
      type:String
    },
    index:{
      type:Number
    }
  },
  methods:{
    goUrl(path){
      // let routeData = this.$router.resolve({
      //     name: path,
      //     query: {id:this.rowData.FrID}
      // });
      // window.open(routeData.href, "_blank");
      this.$router.push({
        path: '/' + path,
        query: {id:this.rowData.FrID,blank:'y',tab:this.rowData.FrID+'单据详情'}
      })
    },
  }
})
Vue.component('table-operation',{  //查看操作按钮
    template:`<span>
        <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')"  placement="top">
            <i style="width: 30px;
                height: 30px;
                display: inline-block;
                color: white !important;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
                margin-right: 10px;
                cursor: pointer;
                background-color: #47BF8C;
                outline: none;"
                class="iconfont icon-sousuo" @click="goUrl">
            </i>
        </el-tooltip>
    </span>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },
    methods:{
        goUrl(){
            let status=false;
            if(this.rowData.CostTypeList){
                this.rowData.CostTypeList.forEach(cost=>{
                    if(cost=="资金调拨"){
                        status=true;
                    }
                })
            }
            if(status){
                this.$router.push({ name: "CapitalAllocationDetail",query:{id:this.rowData.FrID,blank:'y'} })
            }else{
                this.$router.push({ name: "FinancialDocumentsDetail",query: {id:this.rowData.FrID,blank:'y',tab:this.rowData.FrID+'单据详情'}})
            }
            // this.$router.push({
            //     path: '/' + path,
            //     query: {id:this.rowData.FrID,blank:'y',tab:this.rowData.FrID+'单据详情'}
            // })
        },
    }
})
Vue.component('table-RecPay',{  //收支样式
    template:`
        <span>
            <span v-if="rowData.Type==2" style="display: inline-block;
                padding: 2px 8px;
                color: white;
                background-color: #E95252;
                line-height: 16px;
                border-radius: 4px;">
                {{$t('restaurant.res_outcome')}}
            </span>
            <span v-if="rowData.Type==1" style="display: inline-block;
                padding: 2px 8px;
                color: white;
                background-color: #2BB87C;
                line-height: 16px;
                border-radius: 4px;">
                {{$t('restaurant.res_income')}}
            </span>
        </span>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },
    methods:{

    }
})
Vue.component('table-BillRVB',{  //单据样式
    template:`
        <el-popover
            popper-class="detailsIT_Journal"
            placement="bottom-start"
            trigger="click">
                <template v-if="rowData.Type!=1&&rowData.modelShow&&(rowData.Is_Merge==0||rowData.Is_Merge==null)">
                    <my-Bill :ID="rowData.FrID" :width="widthSon" :color="colorSon"></my-Bill>
                </template>
                <template v-else-if="rowData.Type==1&&rowData.modelShow&&(rowData.Is_Merge==0||rowData.Is_Merge==null)">
                    <my-RVB-Bill :ID="rowData.FrID" :width="widthSon" :color="colorSon"></my-RVB-Bill>
                </template>
                <template v-else-if="rowData.Is_Merge==1&&rowData.modelShow">
                    <my-HB-Bill :ID="rowData.FrID" :width="widthSon"  :color="colorSon"></my-HB-Bill>
                </template>
            <span slot="reference" @click="rowData.modelShow = true" style="text-decoration: underline;cursor: pointer;font-weight: bold" >{{rowData.FrID}}</span>
        </el-popover>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },components: {
        "my-Bill": myBill,
        "my-RVB-Bill":myrbvBill,
        "my-HB-Bill":myhrBill,
    },
    data(){
        return{
            widthSon:'700px',
            colorSon:"#f5f5f5",
        }
    },
    methods:{
    }
})
Vue.component('table-Info',{  //关联信息
    template:`
        <div>
            <template v-if="rowData.TCIDAndTCNUMList.length>0">
                <p class="_TCIDAndTCNUMList" style="display: flex;">
                    <span>{{$t('visa.v_tuanhao')}}：</span>
                    <template v-if="rowData.TCIDAndTCNUMList&&rowData.TCIDAndTCNUMList.length>0">
                        <p><span v-for="(i,ix) in rowData.TCIDAndTCNUMList">{{i.TCNUM}}（{{i.TCID}}） <span v-if="ix!=rowData.TCIDAndTCNUMList.length-1">,</br></span></span></p>
                    </template>
                    <template v-else>
                        <span>{{$t('fnc.no')}}</span>
                    </template>
                </p>
                <p v-if="rowData.OrderID>0 && rowData.OrderSource==8">{{$t('fnc.danhao')}}：</span class="">{{rowData.OrderID}}</span></p>
            </template>
            <template v-else-if="rowData.OrderSource==8 && rowData.TCIDAndTCNUMList.length==0">
                    <p class="_TCIDAndTCNUMList">{{$t('tips.zwtqxinxi')}}</p>
            </template>
           <template v-else-if="rowData.OrderSource==4 && rowData.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList" style="text-decoration: underline;cursor: pointer;" @click="goTicketPage(rowData)">{{$t('fnc.jpbianhao')}}：{{rowData.SourceID}}</p>
                  <p style="margin-top: 5px;">{{$t('advmanager.v_line')}}：<span>{{rowData.LineName?rowData.LineName:$t('tips.jpswxzxianlu')}}</span></p>
            </template>
            <template v-else-if="rowData.OrderSource==9 && rowData.TCIDAndTCNUMList.length==0">
                    <p class="_TCIDAndTCNUMList">{{$t('fnc.gnjpqishu')}}：{{rowData.Term}}</p>
            </template>
            <template v-else-if="rowData.OrderSource==10 && rowData.TCIDAndTCNUMList.length==0">
                    <p class="_TCIDAndTCNUMList">{{$t('tips.qzcpbianhao')}}：{{rowData.SourceID}}</p>
            </template>
            <template v-else-if="rowData.OrderSource==0 || rowData.OrderSource==null">
                    <p class="_TCIDAndTCNUMList">{{ rowData.BranchName }}-{{rowData.DepartName}} </p>
            </template>
            <template v-else>
                    <p class="_TCIDAndTCNUMList">{{$t('pub.noMsg')}}</p>
            </template>
        </div>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },
    methods:{
      goTicketPage(data) {  //  跳转机票
        this.$router.push({ name: 'TicketManager',query:{id:data.SourceID,blank:'y',tab:'票务管理'} })
      },
    }
})
Vue.component('table-CostType',{  //费用类型
    template:`
        <div>
            <template v-for="(s,si) in rowData.CostTypeList">
                <span  style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;">{{s}}</span></br>
            </template>
        </div>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },
    methods:{

    }
})
Vue.component('table-TradeWay',{  //交易方式
    template:`
        <div>
            <template v-if="rowData.TradeWayList&&rowData.TradeWayList.length>0">
                <div class="_TradeWayList"   v-for="(tw,twIn) in rowData.TradeWayList" style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;margin: 10px 0;width:230px">
                    <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name" style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{rowData.TradeWayList[0].TypeName}}</span><span style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;" :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?$t('fnc.no'):tw.AccountType}}</span> </p>
                    <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
            </template>
            <template v-else>
                <div class="_pad5">
                    {{$t('fnc.no')}}
              </div>
            </template>
        </div>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },
    methods:{

    }
})
Vue.component('table-Money',{  //金额
    template:`
        <span>
            <p style="line-height:20px">{{rowData.Type==1?$t('fnc.yingshou'):$t('fnc.yingfu')}}：<span>{{rowData.Money}}</span></p>
            <p style="line-height:20px">{{rowData.Type==1?$t('fnc.shishou'):$t('fnc.shifu')}}：<span>{{rowData.PayMoney}}</span></p>
        </span>`,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    }
})
Vue.component('table-ClientTypeName',{  //付款对象
    template:`
        <span>
         <span style="color: gray">{{rowData.Type==2?rowData.ClientTypeName+'：':$t('fnc.huikuanren')+'：'}}</span><span>{{rowData.RemitterName}}</span>
        </span>
        `,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    }
})
Vue.component('table-StatusStr',{  //单据状态
    template:`
        <i v-if="rowData.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
        <i v-if="rowData.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
        <i v-if="rowData.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
        <i  v-if="rowData.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
        <i  v-if="rowData.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
        <el-popover
            popper-class="detailsIT_Journal"
            width="250"
            trigger="click">
                <div style="height: auto;max-height: 220px;background-color: #FFFFFF;">
                    <div class="changLog">
                        <p class="_log_t">{{$t('fnc.lcrizhi')}}</p>
                        <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList" v-loading='LogLoading'>
                            <li style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;" v-for="(log,li) in GetFinancLogList">
                                <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                                <p> <span class="_color_blue">{{log.EmName}}</span>  <span class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                                <p class="_dtel">{{log.StartValue}}</p>
                            </li>
                        </ul>
                        <ul v-else>
                            <li>{{$t('fnc.zwxgrizhi')}}</li>
                        </ul>
                    </div>
                </div>
            <span slot="reference" class="text_d _font_init"  @click="Financial_post_GetFinancLogList(rowData.FrID)">{{rowData.StatusStr}}</span>
        </el-popover>
        `,
    props:{
        rowData:{
            type:Object
        },
        field:{
            type:String
        },
        index:{
            type:Number
        }
    },
    data(){
        return{
            GetFinancLogList:[],
        }
    },
    methods:{
        Financial_post_GetFinancLogList(id){  // 获取单据日志
            if(this.checkboxShow) return
            this.LogLoading = true;
            this.apipost('Financial_post_GetFinancLogList',{ID:id,Type:2}, res => {
                if(res.data.resultCode == 1) {
                    let data = res.data.data;
                    data.forEach(x=>{
                        x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
                    })
                    this.LogLoading = false;
                    this.GetFinancLogList = data;
                }
            }, err => {})
        }
    }
})

export default {
    data(){
        return{
            showID:false,
            active:1,
            userId:0,
            msg:{
                pageIndex:1,
                pageSize:5,
                FrID:'',
                sDate:'',
                eDate:'',
                RB_Branch_Id:'',
                RB_Depart_Id:'',
                sTradeDate:'',
                eTradeDate:'',
                Type:0,
                UpdateBy:'',
                Status:-1,
                sDate:"",
                eDate:"",
                CostTypeIDslist:[],
            },
            getCompanyMsg:{  // 公司
                RB_Group_Id:'0',
                Status:'0',
            },
            getDepartmentMsg:{// 部门
                RB_Group_Id:'',
                RB_Branch_Id:'',
                Status:0,
                ParentId:-1,
                Tier:0,
            },
            employeeMsg:{ // 员工
                GroupId:'',
                BranchId:-1,
                DepartmentId:0,
                PostId:0,
                IsLeave:0,
            },
            DataList:[],
            GetFinancLogList:[],
            EmployeeList:[],
            CompanyList:[],
            approvalDate:[],
            transactionDate:[],
            GetCostTypeList:[],
            checkList:[],
            checkAllList:[],
            dateStart:'',
            dateEnd:'',
            dateArr:'',
            status:'1',
            type:'1',
            productionDate:[],
            loading:false,
            LogLoading:false,
            isCkedAll: false,
            currentPage:1,
            total:0,
            SumYingShou:0,
            SumShiShou:0,
            SumDaiShou:0,
            SumYingFu:0,
            SumShiFu:0,
            SumDaiFu:0,
            ChineseStr:'',
            mathNumber:'',
            DepartIDs:'',
            loading2:false,
            tableData: [],
            columns: [
                {field: 'BranchName', title: this.$t('system.query_company'), width: 80, titleAlign: 'left',columnAlign:'left',isResize:true,componentName:'table-BranchName'},
                {field: 'FrID', title: this.$t('fnc.danhao'), width: 80, titleAlign: 'left',columnAlign:'left',isResize:true,  //orderBy排序 asc 升序  desc降序
                    // filterMultiple: true,  // 筛选项是否多选
                    // filters: [
                    //     {}
                    //     //筛选项  无筛选项 传[{}]
                    // ],
                    result:[],  //筛选项默认值  单选传字符串'1'  多选数组 [1,2,2]
                    type:'select',// 筛选项方式 select 下拉 check 单选、多选 text搜索 datetime时间
                    isFrozen:true,
                    componentName:'table-BillRVB'
                },
                {field: 'custome-RecPay', title: this.$t('fnc.djleixing'), width: 120, titleAlign: 'left',columnAlign:'left',isResize:true,componentName:'table-RecPay'},
                {field: 'custome-Info', title: this.$t('hotel.hotel_corrlelatition'), width: 120, titleAlign: 'left',columnAlign:'left',isResize:true,result:'',filterMultiple:false,type:'text',componentName:'table-Info'},
                {field: 'dateRange', title: this.$t('fnc.feiyongleixing'), width: 120, titleAlign: 'left',columnAlign:'left',isResize:true,result:{},filterMultiple:false,type:'datetime',componentName:'table-CostType'},
                {field: 'TradeWay', title: this.$t('tips.jiaoyifangshi'),width: 210, titleAlign: 'left',columnAlign:'left',isResize:true,componentName:'table-TradeWay'},
                {field: 'Money', title: this.$t('fnc.jine'),width: 120, titleAlign: 'left',columnAlign:'left',isResize:true,componentName:'table-Money'},
                {field: 'ClientTypeName', title: this.$t('fnc.fkduixiang'),width: 180, titleAlign: 'left',columnAlign:'left',isResize:true,componentName:'table-ClientTypeName'},
                {field: 'EmName', title: this.$t('fnc.zdrenyuan'),width: 120, titleAlign: 'left',columnAlign:'left',isResize:true},
                {field: 'StatusStr', title: this.$t('fnc.dqzhuangtai'),width: 120, titleAlign: 'left',columnAlign:'left',isResize:true},
                {field: 'custome-operation', title: this.$t('system.table_operation'),width: 200, titleAlign: 'left',columnAlign:'left',componentName:'table-operation',isResize:true}
            ],
            pageSize:6,
            pageIndex:1,
          heightQueryBox:false,
        }
    },
    created(){
    },
    components: {
        "my-Bill": myBill,
        "my-RVB-Bill":myrbvBill,
        StartDateLimit
    },
    mounted(){
        this.GetSupperOrderEditAuth()
        let userInfo=this.getLocalStorage();
        this.getCompanyMsg.RB_Group_Id= this.employeeMsg.GroupId = this.getDepartmentMsg.RB_Group_Id = userInfo.RB_Group_id;    //集团ID
        this.DepartIDs = userInfo.RB_Department_Id;
        this.userId = userInfo.EmployeeId;
        this.msg.EmployeeId= userInfo.EmployeeId;
        this.financeinfo_post_GetCostTypeList();
        this.getCompanyList();
        this.getEmployee();
        this.getPageList();
    },
    methods:{
      GetSupperOrderEditAuth() {
        var actionCode = this.$AuthCode.isQueryHistoryData;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {

          }else{
            let StartDate = this.getBeforeDate(186, new Date().Format("yyyy-MM-dd"))
            let EndDate = this.getBeforeDate(-1, new Date().Format("yyyy-MM-dd"))
            this.productionDate = [StartDate, EndDate]
            this.msg.sDate = this.productionDate[0];
            this.msg.eDate = this.productionDate[1];
          }
        });

     },
        getEmployee() { //员工
            this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
                if(res.data.resultCode == 1) {
                    this.EmployeeList = res.data.data;
                }
            }, err => {})
        },
        customCompFunc(params){
        },
        sortChange(param){
            //自己写实现
        },
        // 数据筛选
        filterMethod(filters){
        },
        handleCurrentChanges(val){
            this.pageIndex = this.msg.pageIndex = val;
            this.getPageList();
        },
        getPageList(){  // 获取列表数据
            if(!this.msg.ClientID)this.msg.ClientID=0;
            if(!this.msg.ClientType)this.msg.ClientType=0;
            if(!this.msg.CostTypeID)this.msg.CostTypeID=0;
            if(this.msg.RB_Branch_Id=='undefined')this.msg.RB_Branch_Id=-1;
            if(!this.msg.RB_Depart_Id)this.msg.RB_Depart_Id=0;
            if(!this.msg.UpdateBy)this.msg.UpdateBy=0;
            if(!this.msg.TCID)this.msg.TCID=0;
            if(!this.msg.OrderID)this.msg.OrderID=0;
            if(!this.msg.Status)this.msg.Status=0;
            if(!this.msg.FrID)this.msg.FrID=0;
            if(!this.msg.Conditon)this.msg.Conditon=1;
            if(this.msg.CostTypeIDslist.length) {
                this.msg.CostTypeIDs = ''
                this.msg.CostTypeIDslist.forEach(x=>{
                    this.msg.CostTypeIDs += x + ','
                })
            }
            this.loading= true;
            this.apipost('Financial_post_GetExChangeDiffPageList',this.msg,res=>{
                if(res.data.resultCode == 1) {
                    let data = res.data.data.pageData.list;
                    this.total = res.data.data.count;
                    this.SumYingShou=res.data.data.pageData.SumYingShou;
                    this.SumShiShou=res.data.data.pageData.SumShiShou;
                    this.SumDaiShou=res.data.data.pageData.SumDaiShou;
                    this.SumYingFu=res.data.data.pageData.SumYingFu;
                    this.SumShiFu=res.data.data.pageData.SumShiFu;
                    this.SumDaiFu=res.data.data.pageData.SumDaiFu;
                    if(this.total==0){
                        this.DataList=[];
                    }else{
                        data.forEach(x=>{
                            x.modelShow = false;
                        })
                        this.DataList = data;
                    }
                    this.loading=false;
                }else{
                    this.loading= false;
                    this.$message.error(res.data.message);
                }
                this.msg.TCID= this.msg.TCID=0?this.msg.TCID:'';
                // this.queryInfoInit();
                this.currentPage = parseInt(this.msg.pageIndex);
            },err=>{})
        },
        method5: function() {
        if(!this.msg.ClientID)this.msg.ClientID=0;
        if(!this.msg.ClientType)this.msg.ClientType=0;
        if(!this.msg.CostTypeID)this.msg.CostTypeID=0;
        if(!this.msg.RB_Branch_Id)this.msg.RB_Branch_Id=-1;
        if(!this.msg.RB_Depart_Id)this.msg.RB_Depart_Id=0;
        if(!this.msg.UpdateBy)this.msg.UpdateBy=0;
        if(!this.msg.TCID)this.msg.TCID=0;
        if(!this.msg.OrderID)this.msg.OrderID=0;
        if(!this.msg.Status)this.msg.Status=0;
        if(!this.msg.FrID)this.msg.FrID=0;
        if(!this.msg.Conditon)this.msg.Conditon=1;
        this.GetLocalFile("Financial_post_DownInOrOut", this.msg,this.$t('objFill.shouzhikuan')+".xls");
        } ,

        Financial_post_GetFinancLogList(id){  // 获取单据日志
            this.LogLoading = true;
            this.apipost('Financial_post_GetFinancLogList',{ID:id,Type:2}, res => {
                if(res.data.resultCode == 1) {
                    let data = res.data.data;
                    data.forEach(x=>{
                        x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
                    })
                    this.LogLoading = false;
                    this.GetFinancLogList = data;
                }
            }, err => {})
        },
        mathMoney(n){  // 数字转中文大写 1
            this.ChineseStr = this.$commonUtils.changeMoneyToChinese(n)
        },



        getEmployee() { //员工
            this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
                if(res.data.resultCode == 1) {
                    this.EmployeeList = res.data.data;
                }
            }, err => {})
        },
        getCompanyList(){ //获取公司列表
            this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                if(res.data.resultCode==1){
                        this.CompanyList=res.data.data;
                }else{}
            },err=>{})
        },

        financeinfo_post_GetCostTypeList(){  // 费用类型
            this.apipost('financeinfo_post_GetCostTypeList',{Name:'',type:0,DepartIDs:this.DepartIDs},res=>{
                if(res.data.resultCode==1){
                    this.GetCostTypeList = res.data.data;
                }else{

                }
            },err=>{})
        },
        timeAdd(t){  // 日期格式
            if(t==1){     //制单日期
                if(!this.productionDate){
                    this.msg.sDate = '';
                    this.msg.eDate = '';
                    return
                }
                this.msg.sDate = this.productionDate[0];
                this.msg.eDate = this.productionDate[1];
            }
            if(t==2){             //审批日期
                if(!this.approvalDate){
                    this.dateStart = '';
                    this.dateEnd = '';
                    return
                }
                this.dateStart = this.approvalDate[0];
                this.dateEnd = this.approvalDate[1];
            }if(t==3){            //交易日期
                if(!this.transactionDate){
                    this.msg.sTradeDate = '';
                    this.msg.eTradeDate = '';
                    return
                }
                this.msg.sTradeDate = this.transactionDate[0];
                this.msg.eTradeDate = this.transactionDate[1];
            }
        },
        queryInfoInit(){  // 初始化msg
            let msg = {
                pageIndex:this.msg.pageIndex,
                pageSize:6,
                FrID:this.msg.FrID==0?'':this.msg.FrID,
                sDate:this.msg.sDate,
                eDate:this.msg.sDate,
                Status:this.msg.Status,
                RB_Branch_Id:this.msg.RB_Branch_Id,
                RB_Depart_Id:this.msg.RB_Depart_Id,
                UpdateBy:this.msg.UpdateBy,
                sTradeDate:this.msg.sTradeDate,
                eTradeDate:this.msg.eTradeDate,
                ClientType:this.msg.ClientType,
                RemitterName:this.msg.RemitterName,
                ClientID:this.msg.ClientID,
                eMoney:this.msg.eMoney,
                CostTypeID:this.msg.CostTypeID,
                CostTypeIDs: this.msg.CostTypeIDs,
                CostTypeIDslist: this.msg.CostTypeIDslist,
                Conditon:this.msg.Conditon,
                TCID:this.msg.TCID,
                Type:this.msg.Type,
                QEndDate:this.msg.QEndDate,
                QStartDate:this.msg.QStartDate,
                OrderID:this.msg.OrderID==0?'':this.msg.OrderID,
                EmployeeId:this.msg.EmployeeId,

            }
            this.msg = msg;
        },
        handleCurrentChange(val) { //翻页
            this.msg.pageIndex = val;
            this.getPageList();
        },
        resetPageIndex(){  // 重置页码
            this.msg.pageIndex=1;
            this.currentPage = 1;
        },
        goUrl(path,id,Conditon,pageIndex){
            this.$router.push({ name: path,query:{"id":id,"Conditon":Conditon,"pageIndex":pageIndex,blank:'y',tab:'单据详情'} })
        },
        goEit(path,type,id,edit,Conditon,pageIndex){
            this.$router.push({ name: path,query:{"type":type,"FrID":id,"edit":edit,"Conditon":Conditon,"pageIndex":pageIndex} })
        }
    }
}
</script>
