<template>
    <el-dialog :title="$t('objFill.precharge')" width="860px" :visible.sync="cdState" center @close="close">
        <el-form class="cdForm" label-width="90px">
            <el-form-item :label="$t('fnc.danhao')" prop="FrID">
              <el-input class="w220" @keyup.native="checkInteger(czMsg,'FrID')" v-model="czMsg.FrID"></el-input>
            </el-form-item>
            <el-form-item :label="$t('fnc.feiyongleixing')">
              <el-select filterable v-model='czMsg.CostTypeID' class="">
                <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
                <el-option v-for="(item,index) in costList" :key="index" :label="item.Name" :value='item.ID'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
                <input type="button" :value="$t('pub.searchBtn')" class="leader2Btn" @click="czgetList">
            </el-form-item>
            <el-form-item :label="$t('fnc.jiaoyiriqi')">
              <el-date-picker
                v-model="czdateList"
                type="daterange"
                :range-separator="$t('OrderList.zhi')"
                :start-placeholder="$t('OrderList.star')"
                :end-placeholder="$t('OrderList.end')">
              </el-date-picker>
            </el-form-item>

        </el-form>
          <table class="leaderPayTable" border="0" cellspacing="1" cellpadding="0" v-loading="loading">
            <tr>
              <th></th>
              <th>{{$t('fnc.danhao')}}</th>
              <th>{{$t('sm.company')}}</th>
              <th>{{$t('fnc.feiyongleixing')}}</th>
              <th>{{$t('hotel.hotel_Currency')}}</th>
              <th>{{$t('hotel.hotel_CurrentRate')}}</th>
              <th>{{$t('fnc.jine')}}</th>
              <th>{{$t('objFill.amountoffset')}}</th>
              <th>{{$t('admin.admin_status')}}</th>
              <th>{{$t('fnc.fkduixiang')}}</th>
            </tr>
            <tr v-for="(item,index) in czList" :key="index">
              <td><input type="checkbox" :value="item" v-model="checkList" @change="ckeckOne"></td>
              <td>{{item.FrID}}</td>
              <td>{{item.BranchName}}</td>
              <td>{{item.CostTypeName}}</td>
              <td>{{item.CurrencyName}}</td>
              <td>{{item.Rate}}</td>
              <td>{{item.Money}}</td>
              <td>{{item.MatchMoney}}</td>
              <td>{{item.StatusStr}}</td>
              <td>
                <el-tooltip class="item" effect="dark" :content="item.ClientTypeName+':'+item.RemitterName+'('+item.AccountNumber+')'" placement="top-start">
                  <div style="width:250px;overflow:hidden">{{item.ClientTypeName}}:{{item.RemitterName}}</div>
                </el-tooltip>
                </td>
            </tr>
            <tr v-if="czList.length==0">
              <td colspan="12">{{$t('system.content_noData')}}</td>
            </tr>
          </table>
          <el-pagination background @current-change="handleCurrentChange2"
            layout="total,prev, pager, next, jumper" :page-size="czMsg.pageSize" :total='total2'>
          </el-pagination>
          <div slot="footer" class="dialog-footer">
            <button class="hollowFixedBtn" @click="cancelBtn()">{{$t('pub.cancelBtn')}}</button>
            <button class="normalBtn" type="primary" @click="goUrlZD">{{$t('pub.sureBtn')}}</button>
          </div>
    </el-dialog>
  </template>

  <script>

  export default {
    props: ["isShow","obj"],
    components: {

    },
    data() {
      return {
        czMsg:{
          pageIndex:1,
          pageSize:8,
          FrID:'',
          CostTypeID:'',
          sTradeDate:'',
          eTradeDate:'',
          IsAdvanceFinance:1,
        },
        costList:[],
        czdateList:[],
        total2: 0,
        czList: [],
        checkList:[],
        cdState: false,
        queryObj:null,
        tradeObj:null,
        loading: false
      }
    },
    watch: {
        obj: {
            handler(newValue,onldValue) {
                this.queryObj = newValue
                if(this.queryObj.tradeObj){
                   this.tradeObj = JSON.parse(this.queryObj.tradeObj)
                }
                if(this.queryObj.orderObj){
                   this.tradeObj = JSON.parse(this.queryObj.orderObj)
                }
            },
            deep:true,
        },
        isShow: {
            handler(newValue,onldValue) {
                this.cdState = newValue
                if(this.cdState==true){
                  this.czgetList()
                  this.getCostTypeList()
                }
            },
            // deep:true,
            immediate: false
        }
    },
    mounted() {

    },
    methods: {
      cancelBtn(){
          this.cdState = false
          this.$emit('close',false)
      },
        close(){
          this.cdState = false
          this.$emit('close',false)

        },
        // 冲抵
        goUrlZD(){
            let that=this;
            let checkList=JSON.parse(JSON.stringify(this.checkList))

            if(this.checkList.length>1){
            this.Error(this.$t('objFill.onlyoneitem'));
            return;
            }
            if(this.checkList.length==0){
            this.Error(this.$t('objFill.atleastone'));
            return;
            }
            this.tradeObj.MatchFrId = this.checkList[0].FrID
            // 同业单项订单
            if(this.queryObj.tradeObj){
                this.queryObj.tradeObj = JSON.stringify(this.tradeObj)
            }
            // 签证订单
            if(this.queryObj.orderObj){
                // if(this.queryObj.czmsg){
                //   this.queryObj.orderObj.CostType = 0 //费用类型
                // }
                this.queryObj.orderObj = JSON.stringify(this.tradeObj)
            }
            // 地接总表 预付款冲抵
            if(this.queryObj.czmsg){
              this.queryObj.czmsg.ReFinanceId = this.checkList[0].FrID
              // this.tradeObj.czmsg.Rate = this.checkList[0].Rate;
              this.queryObj.czmsg.TCNUM = this.$route.query.id
              this.queryObj.czmsg = JSON.stringify(this.queryObj.czmsg)
            }
            this.queryObj.searchTitle=this.queryObj.searchTitle?this.queryObj.searchTitle:'分摊';
            let query = this.queryObj
            this.$emit('success')
            this.close()
            this.$router.push({
                path: "/ChoiceAddFinancialDocuments",
                query
            });
        },
        // 查询冲抵单号
        czgetList(){
            if(this.czdateList && this.czdateList.length>0){
                this.czMsg.sTradeDate=this.czdateList[0];
                this.czMsg.eTradeDate=this.czdateList[1];
            }else{
                this.czMsg.sTradeDate='';
                this.czMsg.eTradeDate='';
            }
            let msg=Object.assign({},this.czMsg);
            if(msg.FrID==''){
                msg.FrID=0;
            }
            this.loading = true
            this.apipost("Financial_get_GetAdvanceFinancePageList", msg, res => {
            if (res.data.resultCode === 1) {
                this.czList = res.data.data.pageData;
                this.total2=res.data.data.count;
            }
            this.loading = false
            }, null)
        },
        // 费用类型
        getCostTypeList() {
            this.apipost("Financial_get_GetAdvanceCostTypeList", {}, res => {
            if (res.data.resultCode === 1) {
                this.costList = res.data.data
            }else{
                this.Error(res.data.message)
            }
            }, null)
        },
        ckeckOne(){
            if(this.checkList.length==2){
            this.checkList.splice(0,1);
            }
            if(this.checkList.length>1){
            this.Error(this.$t('objFill.onlyoneitem'));
            }
        },
        handleCurrentChange2(val) {
          this.czMsg.pageIndex = val;
          this.czgetList();
      },
    }
  }
  </script>

  <style>
    .el-dialog__header {
      background-color: #E95252 !important;
      padding: 20px 40px 10px;
    }

    .el-dialog__header .el-dialog__title {
      color: white;
    }

    .hollowFixedBtn {
      background: #fff;
      color: #E95252;
      padding: 0 15px;
      height: 30px;
      border: 1px solid #E95252;
      cursor: pointer;
      border-radius: 15px;
      margin-left: 10px;
    }

    .hollowFixedBtn:hover {
      box-shadow: 2px 0px 4px rgba(144, 6, 6, 0.25)
    }

    .hollowFixedBtn:active {
      border-color: #CD2929;
    }

    .normalBtn {
      color: #fff;
      padding: 0 15px;
      height: 30px;
      background: #E95252;
      border: 1px solid #E95252;
      cursor: pointer;
      border-radius: 15px;
      margin-left: 10px;
      outline: none;
    }

    .normalBtn:hover {
      background: #E95252;
      box-shadow: 2px 0px 4px rgba(144, 6, 6, 0.25)
    }

    .normalBtn:active {
      background: #CD2929;
    }

    .leaderPayTable {
      width: 100%;
      margin: 10px auto;
      text-align: center;
      font-size: 12px;
      color: #333;
      border-collapse: collapse;
      background-color: #fff;
      border: 1px solid #d1d1d1;
    }

    .leaderPayTable th {
      background: #e6e6e6;
      padding: 8px 0;
      color: #333;
      border: 1px solid #d1d1d1;
      font-weight: bold;
    }

    .leaderPayTable tr td {
      background-color: #fff;
      padding: 8px 0;
      height: 32px;
      border: 1px solid #d1d1d1;
    }

    .leaderPayTable2 tr td {
      border: 1px solid #ccc;
      line-height: 17px;
      height: 25px;
      font-size: 12px;
      background: #fff;
      text-align: center;
      padding: 0;
      ;
      margin: 0;
    }

    .LeaderPrintDiv .LeaderTitle {
      padding: 10px;
      text-align: left;
    }

    .leaderPayTable .itemName {
      text-align: left;
      padding: 0 10px;
    }

    @media print {
      .LeaderPrintDiv .btnListDiv {
        display: none;
      }
    }

    .comTotal {
      text-align: left;
      padding-left: 30px !important;
    }

    .LeaderPrintDiv {
      width: 100%;
      background: #f8f8f8;
      position: absolute;
    }

    .LeaderPrintDiv .childDiv {
      width: 1000px;
      margin: 0 auto;
    }

    .LeaderPrintDiv .childDiv ._Titles {
      font-size: 14px;
    }

    .wLeader2 .el-textarea__inner {
      height: 130px;
    }

    .LeaderPrintDiv .btnListDiv {
      margin: 20px auto;
      text-align: center;
    }

    .LeaderPrintDiv .leader2Btn {
      color: #fff;
      padding: 0 15px;
      height: 30px;
      background: #e95252;
      border: 1px solid #e95252;
      cursor: pointer;
      border-radius: 15px;
      outline:none;
    }

    .cursorpointer {
      cursor: pointer;
    }

    .text-decoration {
      text-decoration: underline;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    .w150 {
      width: 150px !important;
    }

    .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._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;
      cursor: pointer;
    }

    ._bank_type {
      background-color: #2AAEF2
    }

    ._bank_type2 {
      background-color: #FF9C01
    }
  .cdForm .el-form-item{
    display: inline-block;
  }
  .leader2Btn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
    outline:none;
  }
  </style>
