<style>
 @import url('../../assets/css/financia/CashierWorkDetail.css');
</style>
<template>
    <div class="flexOne page_CashierWorkDetail">
        <div class='query-box'>
            <el-form class="_info_box clearfix"  label-width="110px">
                <el-row>
                    <el-col :span="3" :gutter="35">
                        <div class="_qishu">
                            {{Name}} 窗口单据信息
                        </div>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item :label="msg.WindowType==1?'出纳':'会计'">
                            <el-select  filterable  v-model='msg.CreateBy' @change="changeEm">
                                <el-option label='不限' :value='-1'></el-option>
                                <el-option v-for='item in emList' 
                                    :label='item.emName'
                                    :value='item.EmId'
                                    :key='item.EmId'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :gutter="35">
                        <el-form-item label="审核时间">
                            <el-date-picker                     
                                @change="timeAdd()"
                                v-model="productionDate"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item label="单据状态">
                            <el-select  filterable  v-model='msg.Status' >
                                <el-option label='不限' :value='-1'></el-option>
                                <el-option label='已审核' :value='2'></el-option>
                                <el-option label='待审核' :value='3'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item label="金额范围" class="__Money">
                            <el-input v-model="msg.sMoney" ></el-input>-<el-input v-model="msg.eMoney" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35" v-if="msg.WindowType==1">
                        <el-form-item label="银行账户">
                            <el-select  filterable  v-model='msg.accNum' @change="changeAcc">
                                <el-option label='不限' :value='-1'></el-option>
                                <el-option v-for='item in accList' 
                                    :label='item.Alias'
                                    :value='item.ID'
                                    :key='item.ID'>
                                    <span style="float: left">{{ item.Alias }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.BackNo }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>        
			<ul>
				<li>
                    <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList(1)"/>
                    <input type="button" class="hollowFixedBtn" value="返回" @click="goUrl()"/>
                </li>
			</ul>
		</div>
        <table class="singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-loading="loading">
            <tr>
                <th>单号</th>
                <th>单据类型</th>
                <th>关联信息</th>
                <th>费用类型</th>
                <th>交易方式</th>
                <th>金额</th>
                <th>收款/付款对象</th>
                <th>制单人员</th>
                <th>当前状态</th>
                <th>操作</th>
            </tr>
            <tr  class="_item_list" v-for="(item,index) in DataList">
                    <td class="Bill_par">
                        <el-popover           
                            popper-class="detailsIT_Journal" 
                            placement="bottom-start"
                            trigger="click">
                                <template v-if="item.Type!=1&&item.modelShow">
                                    <my-Bill :ID="item.FrID" :width="widthSon" :color="colorSon"></my-Bill>
                                </template>
                                <template v-else-if="item.Type==1&&item.modelShow">
                                    <my-RVB-Bill :ID="item.FrID" :width="widthSon"  :color="colorSon"></my-RVB-Bill> 
                                </template>
                            <span slot="reference" @click="item.modelShow = true" class="text_d PingFangSC" >{{item.FrID}}</span>
                        </el-popover>
                    </td>
                    <td><span class="_bg__" :class="item.Type==1?'_bg_green':'_bg_red'">{{item.TypeName}}</span></td>
                    <td class="_number">
                      <p>团号：
                        <template v-if="item.TCIDAndTCNUMList&&item.TCIDAndTCNUMList.length>0"><span><span v-for="(i,ix) in item.TCIDAndTCNUMList">{{i.TCNUM}}（{{i.TCID}}） <span v-if="ix!=item.TCIDAndTCNUMList.length-1">,<br/></span></span></span></template>
                        <template v-else><span>无</span></template>
                      </p>
                      <p>单号：<span class="" @click="msg.OrderID>0?jumpPage('RegistrationList',GetDetail,8):''">{{item.OrderID==0 || item.OrderID==null?'无':item.OrderID}}</span></p>
                      <p style="margin-top: 5px;" v-if="item.OrderSource==4 && !item.TCIDAndTCNUMList">线路：<span>{{item.LineName?item.LineName:'机票尚未选择线路'}}</span></p>
                    </td>
                    <td>
                        <template v-for="(s,si) in item.CostTypeList">
                            <span  class="_tag_span">{{s}}</span><br/>
                        </template>
                    </td>
                    <td class="_number">
                        <template v-if="item.BankList&&item.BankList.length>0">
                            <div class="_TradeWayList"   v-for="(tw,twIn) in item.BankList">
                                <p class="_fex_cen clearfix"><span class="_bold">{{tw.Alias}}</span><span class="_bank_name">{{tw.TypeName}}</span><span class="_bank_type" :class="tw.AccountType=='私'?'':'_bank_type2'">{{tw.AccountType==""?'无':tw.AccountType}}</span> </p>
                                <p>{{tw.BankNo}}</p>
                            </div>
                        </template>
                        <template v-else>
                            <div class="_pad5">
                                无
                            </div>
                        </template>                        
                    </td>
                    <td>
                        <p>{{item.Type==1?'应收':'应付'}}：<span class="">{{item.Money}}</span></p>
                        <p>{{item.Type==1?'实收':'实付'}}：<span class="">{{item.PayMoney}}</span></p>
                    </td>
                    <td>
                        <span class="_color_gar">{{item.Type==2?item.ClientTypeName+'：':'汇款人：'}}</span><span>{{item.RemitterName}}</span>
                    </td>
                    <td valign="middle">
                        <img class="_head_img" :src="item.EmPhoto" :onerror='defaultHeadImg'>
                        <span>{{item.EmName}}</span>
                    </td>
                    <td class="_btn_group">
                        <i v-if="item.Status==1" class="iconfont icon-daiqueren"></i>
                        <i v-if="item.Status==4" class="iconfont icon-yiquxiao"></i>
                        <i v-if="item.Status==2" class="iconfont icon-yiqueren"></i>
                        <i  v-if="item.Status==3" class="iconfont icon-shenhebohui"></i>
                        <i  v-if="item.Status==0" class="iconfont icon-zancun"></i>
                        <el-popover           
                            popper-class="detailsIT_Journal"                                 
                            width="250"
                            trigger="click">
                                <div class="InfoChangeLog" >                                       
                                    <div class="changLog">
                                        <p class="_log_t">流程日志</p>
                                        <ul class="changLogList" v-if="GetFinancLogList" v-loading='LogLoading'>
                                            <li class="changLogList_l" v-for="(log,li) in GetFinancLogList">
                                                <span style="background-color: #47BF8C"  class="_radius_green"></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>暂无修改日志</li>
                                        </ul>
                                    </div>
                                </div>                           
                            <span slot="reference" class="text_d _font_init"  @click="Financial_post_GetFinancLogList(item.FrID)">{{item.StatusStr}}</span>
                        </el-popover>        
                    </td>
                    <td class="_icon_btn">
                        <el-tooltip class="item" effect="dark" content="查看"  placement="top">
                            <i class="iconfont icon-sousuo" @click="goUrlT('FinancialDocumentsDetail',item.FrID,msg.pageIndex)"></i>
                        </el-tooltip>
                        <el-tooltip class="item"  effect="dark" content="审核"   placement="top">
                            <i v-if="item.Conditon==3 && item.InOrNotProcess==1" class="iconfont icon-ico_commodity_defaul" @click="goUrlT('BasicDocuments',item.FrID,msg.pageIndex)"></i>
                        </el-tooltip> 
                    </td>
                </tr>  
        </table>
        <div class="noData" v-show="noData">
            {{$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>
</template>

<script>
import myBill from "./FinancialSubmodule/BillModule.vue";
import myrbvBill from "./FinancialSubmodule/ReceivablesModule.vue";
export default {
    data(){
        return{
            DataList:[],
            GetFinancLogList:[],
            loading:false,
            LogLoading:false,
            noData:false,
            total:0,
            currentPage:1,
            msg:{
                PageIndex:1,
                pageSize:15,
                WindowType:1,
                WindowId:0,
                Status:-1,
                sMoney:0,
                eMoney:0,
                sAduitDate:'',
                eAduitDate:'',
                WindowEmIdList:[],
                BankList:[],
                accNum:-1,
                emNum:-1,
                CreateBy:-1,
                RB_Branch_Id:-1,
            },
            AirportNameList:[],
            airlineList:[],
            Name:'',
            cmd:'',
            emList:[],
            productionDate:[],
            accList:[],
            colorSon:"#f5f5f5",
            widthSon:'700px',
            contenWidth:0,
            contenHeight:0,
            defaultHeadImg:'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
        }
    },components: {
        "my-Bill": myBill,
        "my-RVB-Bill":myrbvBill,
    },created(){
        let allH,allW,cH,cW;
        allH = document.documentElement.clientHeight;
        allW = document.documentElement.clientWidth;
        cW = allW-90;
        cH = allH-222; //255 = 82 50 41 49
        this.contenWidth = cW;
        this.contenHeight = cH;
        this.msg.pageSize = parseInt(cH/52)-1;
        this.msg.WindowType = this.$route.query.WindowType;
        this.Name = this.$route.query.name;
        this.msg.WindowId = this.$route.query.id;
        this.msg.RB_Branch_Id=this.$route.query.bid;
        if(this.$route.query.WindowType==1){  // 1出纳 2会计  出纳需要BankList
            this.Window_post_GetList(this.$route.query.id)
        }else{
            delete this.msg.BankList;
        }
        this.Window_post_GetEmList(this.$route.query.id,this.$route.query.WindowType)
    },mounted(){
        this.getList()
    },methods:{
        jumpPage(path,){
          this.$router.push({
            name: path,
            query: { id:id,orderID:this.msg.OrderID,isShow:false,blank:'y'}
          })
        },
        changeAcc(t){
            this.msg.BankList = [];
            if(t==-1) return
            this.accList.forEach(x=>{
                if(x.ID==t){
                    this.msg.BankList.push({
                        AccountId:x.ID,
                        Type:x.Type
                    })
                }
            })
        },
        changeEm(t){
            this.msg.WindowEmIdList = [];
            if(t==-1) return
            this.msg.WindowEmIdList.push({
                EmId:this.msg.emNum
            })
        },
        Window_post_GetList(id){
            this.apipost('Window_post_GetList',{ID:id,Direct:0}, res => {
                if(res.data.resultCode == 1) {
                    let data = res.data.data;
                    this.accList = data;
                } else {
                    this.tips(res.data.message,'error');  
                }
            }, err => {})
        },
        timeAdd(){  // 日期格式       
            if(!this.productionDate){
                this.msg.sAduitDate = '';
                this.msg.eAduitDate = '';
                return 
            }            
            this.msg.sAduitDate = this.productionDate[0];
            this.msg.eAduitDate = this.productionDate[1];       
        },
        Window_post_GetEmList(id,type){  //获取窗口对应的业务员列表
            this.apipost('Window_post_GetEmList',{ID:id,Type:type}, res => {
                if(res.data.resultCode == 1) {
                    let data = res.data.data;
                    this.emList = data;
                } else {
                    this.tips(res.data.message,'error');  
                }
            }, err => {})
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        resetPageIndex(){
            this.msg.pageIndex=1;
            this.currentPage = 1
        },
        getList(){
            this.loading = true;
            this.apipost('Financial_post_GetCashierPageList',this.msg,r=>{
                if(r.data.resultCode==1){
                    this.total = r.data.data.count;
                    if(this.total>0){
                        this.noData =false;   
                    }else{
                        this.noData =true;   
                    }
                    let data = r.data.data.pageData.list;
                    data.forEach(x=>{
                        x.modelShow = false;
                    })
                    this.DataList = data;
                }
                this.loading = false;
            },null)
        },
        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 => {})
        },   
        goUrl(){
            this.$router.go(-1)
        },
        goUrlT(path,id,Conditon,pageIndex){
            this.$router.push({ name: path,query:{"id":id,"Conditon":Conditon,"pageIndex":pageIndex} })
        },
    }
}
</script>
