<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}} {{$t('objFill.chuankoudjxx')}}
                        </div>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item :label="msg.WindowType==1?$t('objFill.chunai'):$t('objFill.kuaiji')">
                            <el-select  filterable  v-model='msg.CreateBy' @change="changeEm">
                                <el-option :label="$t('pub.unlimitedSel')" :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="$t('objFill.shenheishijian')">
                            <el-date-picker
                                @change="timeAdd()"
                                v-model="productionDate"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                :range-separator="$t('OrderList.zhi')">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item :label="$t('fnc.a_djztai')">
                            <el-select  filterable  v-model='msg.Status' >
                                <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
                                <el-option :label="$t('fnc.a_yshenhe')" :value='2'></el-option>
                                <el-option :label="$t('objFill.dsh')" :value='3'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item :label="$t('objFill.jinefanwei')" 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="$t('fnc.a_yhzhanghu')">
                            <el-select  filterable  v-model='msg.accNum' @change="changeAcc">
                                <el-option :label="$t('pub.unlimitedSel')" :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="$t('pub.searchBtn')" @click="resetPageIndex(),getList(1)"/>
                    <input type="button" class="hollowFixedBtn" :value="$t('pub.returnBack')" @click="goUrl()"/>
                </li>
			</ul>
		</div>
        <table class="singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-loading="loading">
            <tr>
                <th>{{$t('fnc.danhao')}}</th>
                <th>{{$t('fnc.djleixing')}}</th>
                <th>{{$t('hotel.hotel_corrlelatition')}}</th>
                <th>{{$t('fnc.feiyongleixing')}}</th>
                <th>{{$t('tips.jiaoyifangshi')}}</th>
                <th>{{$t('fnc.jine')}}</th>
                <th>{{$t('fnc.shoukuan')}}/{{$t('fnc.fkduixiang')}}</th>
                <th>{{$t('fnc.zdrenyuan')}}</th>
                <th>{{$t('fnc.dqzhuangtai')}}</th>
                <th>{{$t('system.table_operation')}}</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>{{$t('visa.v_tuanhao')}}：
                        <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>{{$t('fnc.no')}}</span></template>
                      </p>
                      <p>{{$t('fnc.danhao')}}：<span class="" @click="msg.OrderID>0?jumpPage('RegistrationList',GetDetail,8):''">{{item.OrderID==0 || item.OrderID==null?$t('fnc.no'):item.OrderID}}</span></p>
                      <p style="margin-top: 5px;" v-if="item.OrderSource==4 && !item.TCIDAndTCNUMList">{{$t('advmanager.v_line')}}：<span>{{item.LineName?item.LineName:$t('tips.jpswxzxianlu')}}</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==""?$t('fnc.no'):tw.AccountType}}</span> </p>
                                <p>{{tw.BankNo}}</p>
                            </div>
                        </template>
                        <template v-else>
                            <div class="_pad5">
                                {{$t('fnc.no')}}
                            </div>
                        </template>
                    </td>
                    <td>
                        <p>{{item.Type==1?$t('fnc.yingshou'):$t('fnc.yingfu')}}：<span class="">{{item.Money}}</span></p>
                        <p>{{item.Type==1?$t('fnc.shishou'):$t('fnc.shifu')}}：<span class="">{{item.PayMoney}}</span></p>
                    </td>
                    <td>
                        <span class="_color_gar">{{item.Type==2?item.ClientTypeName+'：':$t('objFill.huikuanren')+'：'}}</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">{{$t('fnc.lcrizhi')}}</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>{{$t('fnc.zwxgrizhi')}}</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="$t('fnc.chakan')"  placement="top">
                            <i class="iconfont icon-sousuo" @click="goUrlT('FinancialDocumentsDetail',item.FrID,msg.pageIndex)"></i>
                        </el-tooltip>
                        <el-tooltip class="item"  effect="dark" :content="$t('fnc.shenhe')"   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>