<style>
  .page_MyCustomer ._mc_addbox {
    height: 52px;
    width: 100%;
    margin-top: 20px;
  }

  .page_MyCustomer ._mc_addbox>li {
    float: left;
    width: 116px;
    font-size: 14px;
    height: 52px;
    color: #666;
    text-align: center;
    line-height: 52px;
    background: #E9E9E9;
    cursor: pointer;
  }

  .page_MyCustomer ._mc_addbox>li.active {
    background: #fff;
    color: #333;
  }

  .page_MyCustomer ._mc_addbox .divActive {
    margin: -3px auto;
    width: 26px;
    height: 3px;
    background: #E95252;
  }

  .page_MyCustomer ._mc_edit {
    overflow: auto;
    display: none;
    position: absolute;
    z-index: 50;
    bottom: 0;
    left: 0;
    border-top: 3px solid #38425d;
    background-color: #f9f9f9;
    padding: 10px;
    width: 100%;
    min-width: 1146px;
  }

  .page_MyCustomer .edHeightOne {
    display: block !important;
    height: 450px;
  }

  .MyCustomerDiv ._mc_list {
    background: #fff;
    padding-top: 20px;
    box-sizing: border-box;
    overflow: hidden !important;

  }

  .page_MyCustomer ._mc_list>ul>li {
    padding: 20px 20px 0 20px;
    width: 260px;
    box-sizing: border-box;
    height: 410px;
    float: left;
    border: 1px solid #F1F2F5;
    background: #fff;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
  }

  .page_MyCustomer ._mc_list>ul>li:hover {
    box-shadow: 0px 0px 10px rgba(191, 191, 191, 1);
    transition: all linear 0.3s;
  }

  .page_MyCustomer ._mc_list>ul>li .iconDelete {
    cursor: pointer;
    display: none;
    position: absolute;
    top: -4px;
    right: 0;
    color: #E95252;
    z-index: 5;
  }

  .page_MyCustomer ._mc_list>ul>li:hover .iconDelete {
    display: block;
  }

  .page_MyCustomer ._mc_list>ul>li .iconDelete1 {
    cursor: pointer;
    display: none;
    position: absolute;
    top: -4px;
    right: 16px;
    color: #2CA4F0;
    z-index: 5;
  }

  .page_MyCustomer ._mc_list>ul>li:hover .iconDelete1 {
    display: block;
  }

  .page_MyCustomer ._mc_list>ul>li .iconDelete2 {
    cursor: pointer;
    display: none;
    position: absolute;
    top: -4px;
    right: 32px;
    color: #34BFA3;
    z-index: 5;
  }

  .page_MyCustomer ._mc_list>ul>li:hover .iconDelete2 {
    display: block;
  }

  .page_MyCustomer ._mc_list>ul>li>img {
    position: absolute;
    z-index: 5;
  }

  .page_MyCustomer ._head_info_box {
    text-align: center;
    font-size: 14px;
    color: #333333
  }

  .page_MyCustomer ._head_info_box img {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    margin-bottom: 5px
  }

  .page_MyCustomer ._head_info_box p {
    margin-bottom: 8px;
  }

  .page_MyCustomer ._head_info_box .icon-img_dianhua {
    color: #09D49D
  }

  .page_MyCustomer ._addr {
    color: #666666
  }

  .page_MyCustomer ._record {
    padding: 5px 10px 15px;
    border-bottom: 1px solid #F5F5F5;
    min-height: 120px
  }

  .page_MyCustomer ._record p {
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    padding: 2px;
    color: white;
    background-color: #257BF1;
  }

  .page_MyCustomer ._record p._other_n {
    color: #666666;
    background-color: #F5F5F5;
  }

  .page_MyCustomer ._record p._fist_n {
    color: #09D49D;
    background-color: #E9F7F1;
  }

  .page_MyCustomer ._record p._other {
    color: #257BF1;
    background-color: #E4EFFF;
  }

  .page_MyCustomer ._bt {
    font-size: 14px;
    margin-top: 15px;
    text-align: center;
    color: #666;
  }

  .page_MyCustomer ._bt span {
    color: #FF9000
  }

  .page_MyCustomer ._edHeight {
    height: 340px;
  }

  .page_MyCustomer ._scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .page_MyCustomer ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .page_MyCustomer ._scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }

  .page_MyCustomer ._mc_edit ._tit {
    padding-left: 10px;
    border-left: 3px solid #E95252;
    font-size: 16px;
    font-family: 'PingFangSc-Fine';
    color: #000000
  }

  .page_MyCustomer ._mc_edit ._info_box ul._form li {
    float: left;
  }

  .page_MyCustomer ._check_list {
    padding-left: 120px;
    margin-bottom: 20px;
  }

  .page_MyCustomer ._check_box .el-form-item {
    margin-bottom: 0
  }

  .page_MyCustomer ._info_box .el-form-item__label {
    font-size: 12px;
    color: #666;
  }

  ._remark textarea {
    resize: none;
    width: 646px;
    height: 100px
  }

  .page_MyCustomer .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .page_MyCustomer .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .page_MyCustomer .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .page_MyCustomer .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .page_MyCustomerSearch {
    width: 100%;
    min-height: auto;
    overflow: hidden;
    padding: 0 0 20px 0;
  }

  .page_MyCustomerSearch li {
    float: left;
    font-size: 12px;
    color: #666;
    margin: 20px 0 0px 0;
  }

  .page_MyCustomerSearch li>span {
    display: inline-block;
  }

  .page_MyCustomerSearch li span>em {
    display: inline-block;
    min-width: 60px;
    text-align: right;
    font-style: normal;
    margin: 0 12px 0 0;
  }

  .page_MyCustomerSearch li:last-child {
    float: right;
  }

  .page_MyCustomerSearch ._class_b {
    color: #257BF1 !important
  }

  .page_MyCustomer .upload-demo {
    text-align: center;
  }

  .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;
    text-align: center;
  }

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

</style>
<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;
  }

  .zhuiClass {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #e95252;
    border: 1px solid #e95252;
    font-size: 12px;
  }

  ._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: 190px;
  }

  ._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: 28px;
    height: 28px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    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,
  .icon-zhuanhuan1 {
    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,
  ._icon_btn i.icon-cuishou {
    background-color: #e6a014;
    font-size: 16px;
  }

  ._icon_btn i.icon-zhuanjiao1:hover,
  ._icon_btn i.icon-cuishou:hover {
    background-color: rgb(235, 184, 84);
  }

  ._icon_btn i.icon-zhuanjiao1:active,
  ._icon_btn i.icon-cuishou:active {
    background-color: rgb(223, 150, 6);
  }

  ._tag_span {
    background-color: rgba(64, 158, 255, 0.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, 0.2);
    white-space: nowrap;
    margin-bottom: 4px;
  }

  ._tag_span._tag_warr {
    background-color: rgba(103, 194, 58, 0.1);
    border-color: rgba(103, 194, 58, 0.2);
    color: #67c23a;
  }

  ._fex_cen {
    display: flex;
    align-items: center;
  }

  ._pad5 {
    padding: 5px 10px;
  }

  ._color_gar {
    color: gray;
  }

  .page_fnDm .query-box li:last-child {
    top: 97px !important;
  }

  ._TCIDAndTCNUMList {
    display: flex;
  }

  .w216 {
    width: 216px;
  }

  ._icon_btn i.icon-tiaozheng {
    background-color: #1296db;
    font-size: 16px;
  }

  ._icon_btn i.icon-zhifupeizhiguanli {
    background-color: #1296db;
    font-size: 16px;
  }

  .boss_btn_tips,
  .boss_btn {
    text-align: center;
  }

  .boss_btn_tips {
    padding-bottom: 25px;
  }

  .boss_btn span {
    color: #2bb87c;
  }

  .cdForm .el-form-item {
    display: inline-block;
  }

  .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;
    text-align: center;
  }

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

  .Myquery-box li {
    float: left;
    font-size: 12px;
    color: #666;
    margin: 5px 30px 5px 0;
  }

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

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

</style>
<template>
  <div class="page_fnDm">
    <ul class="_nav clearfix">
      <li :class="CustomerStatus == 0 ? '_active' : ''" @click="CustomerStatus=1;clickGetList(0)">
        {{$t('objFill.dsh')}}
      </li>
      <li :class="CustomerStatus == 1 ? '_active' : ''" @click="CustomerStatus=1;clickGetList(1)">
        {{$t('visaT.complete')}}
      </li>

      <li class="hight_query" style="float: right">
        <button class="hollowFixedBtn" @click="getList(),getTotalData()">
          {{ $t("pub.searchBtn") }}
        </button>
      </li>
    </ul>
    <div class="Myquery-box">
      <ul class="clearfix">
        <li>
          <span>
            <em style="margin-left: 12px">{{$t('fnc.khmingcheng')}}</em>
            <el-input placeholder="" class="w150" v-model="msg.CustomerName" maxlength="8"></el-input>
          </span>
        </li>
      </ul>
    </div>
    <div class="_mc_list _scrollbar" :class="addShow==true?'_edHeight':''">
      <table v-loading="loading" class="leaderPayTable" border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>{{$t('objFill.v101.Rest.chuanjianzhe')}}</th>
          <th>{{$t('fnc.cjshijian')}}</th>
          <th>{{$t('fnc.shzhuangtai')}}</th>
          <th>{{$t('fnc.jine')}}</th>
          <th>{{$t('salesModule.AdultPeople')}}</th>
          <th>{{$t('objFill.shenheishijian')}}</th>
          <th>{{$t('salesModule.ReviewReason')}}</th>
          <th v-if="CustomerStatus==0">{{$t('hotel.table_operat')}}</th>
        </tr>
        <tr v-for="(item,index) in czList" :key="index">
          <td>{{item.createBy}}</td>
          <td>{{item.createDate}}</td>
          <td>{{item.statusName}}</td>
          <td>{{item.totalPrice}}</td>
          <td>{{item.examineEmpName}}</td>
          <td>{{item.examineTime}}</td>
          <td>{{item.examineReason}}</td>
          <td v-if="CustomerStatus==0">
            <el-button type="primary" size="mini" @click="financeCheck(item)">{{$t('fnc.shenhe')}}</el-button>
          </td>
        </tr>
        <tr v-if="czList.length==0">
          <td colspan="13">{{$t('system.content_noData')}}</td>
        </tr>
      </table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size="this.msg.pageSize" :total="total">
      </el-pagination>
      <el-dialog custom-class="addCompany page_MyCustomer" :title="$t('objFill.jiesuan')" width="1100px" :visible.sync="showDetail" center>
        <div v-loading="detailLoading">
          <table v-loading='loading' border="0" cellspacing="0" cellpadding="0" class="singeRowTable"
            style="margin-bottom:30px;">
            <tr class="_t_head">
              <!-- <th v-if="hbState || checkboxShow || BOSSBtn || BOSSBtn2"><input type="checkbox" v-model="isCkedAll"  @click='checkedAll()'></th> -->
              <th width="90">{{$t('system.query_company')}}</th>
              <th>{{$t('fnc.danhao')}}</th>
              <th width="90">{{$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>{{msg.Type==1? $t('fnc.shoukuan') : $t('fnc.fukuan')}}{{$t('fnc.duixiang')}}</th>
              <th width="150">{{$t('fnc.zdrenyuan')}}</th>
              <th>{{$t('fnc.dqzhuangtai')}}</th>
            </tr>
            <tr class="_item_list" :key="item.FrID" v-for="(item,index) in detailInfo.FinanceList">
              <!-- <td v-if="hbState || checkboxShow || BOSSBtn || BOSSBtn2"><input type="checkbox" :value="item.FrID" v-model="checkList" @change="ckeckedOne"></td> -->
              <td>{{item.BranchName}}</td>
              <td class="Bill_par">
                <el-popover popper-class="detailsIT_Journal" placement="bottom-start" trigger="click">
                  <template v-if="item.Type!=1&&item.Type!=7&&(item.Is_Merge==0||item.Is_Merge===null)">
                    <my-Bill :ID="item.FrID" :width="widthSon" :color="colorSon"></my-Bill>
                  </template>
                  <template v-else-if="item.Type==1&&(item.Is_Merge==0||item.Is_Merge===null)">
                    <my-RVB-Bill :ID="item.FrID" :width="widthSon" :color="colorSon"></my-RVB-Bill>
                  </template>
                  <template v-else-if="item.Type==7&&(item.Is_Merge==0||item.Is_Merge===null)">
                    <my-GZ-Bill :ID="item.FrID" :width="'1000px'" :color="colorSon"></my-GZ-Bill>
                  </template>
                  <template v-else-if="item.Is_Merge==1">
                    <my-HB-Bill :ID="item.FrID" :width="widthSon" :color="colorSon"></my-HB-Bill>
                  </template>
                  <span slot="reference" class="text_d PingFangSC">{{item.FrID}}</span>
                </el-popover>
                <!-- <span class="text_d PingFangSC" >{{item.FrID}}</span> -->
              </td>
              <td>
                <span class="_bg__" :class="item.Type==1 || item.Type==5?'_bg_green':'_bg_red'">{{item.TypeName}}</span>
                <el-tooltip class="item" effect="dark" :content="$t('objFill.zuijiatuankuan')" placement="top">
                  <span v-if="item.OtherType == 1" class="zhuiClass">{{$t('objFill.chase')}}</span>
                </el-tooltip>

              </td>
              <td class="_number">
                <template v-if="item.TCIDAndTCNUMList&&item.TCIDAndTCNUMList.length>0">
                  <div class="_TCIDAndTCNUMList">
                    <span>{{$t('visa.v_tuanhao')}}：</span>
                    <template v-if="item.TCIDAndTCNUMList&&item.TCIDAndTCNUMList.length>0">
                      <p><span v-for="(i,ix) in item.TCIDAndTCNUMList">{{i.TCNUM}}（{{i.TCID}}） <span
                            v-if="ix!=item.TCIDAndTCNUMList.length-1">,<br /></span></span></p>
                    </template>
                    <template v-else>
                      <span>{{$t('fnc.no')}}</span>
                    </template>
                  </div>
                  <p v-if="item.OrderID>0 && item.OrderSource==8">{{$t('fnc.danhao')}}：<span
                      class="">{{item.OrderID}}</span></p>
                </template>
                <template v-else-if="item.OrderSource==8 &&item.TCIDAndTCNUMList&& item.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList">{{$t('tips.zwtqxinxi')}}</p>
                </template>
                <template v-else-if="item.OrderSource==4 && item.TCIDAndTCNUMList&&item.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList text_d" @click="goTicketPage(item)">
                    {{$t('fnc.jpbianhao')}}：{{item.SourceID}}</p>
                  <p style="margin-top: 5px;">
                    {{$t('advmanager.v_line')}}：<span>{{item.LineName?item.LineName:$t('tips.jpswxzxianlu')}}</span></p>
                </template>
                <template v-else-if="item.OrderSource==9 && item.TCIDAndTCNUMList&&item.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList">{{$t('fnc.gnjpqishu')}}：{{item.Term}}</p>
                </template>
                <template v-else-if="item.OrderSource==10 &&item.TCIDAndTCNUMList&& item.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList">{{$t('fnc.qzbianhao')}}：{{item.SourceID}}</p>
                </template>
                <template v-else-if="item.OrderSource==11 &&item.TCIDAndTCNUMList&& item.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList">{{$t('fnc.tsbianhao')}}：{{item.SourceID}}</p>
                </template>
                <template v-else-if="item.OrderSource==12 &&item.TCIDAndTCNUMList&& item.TCIDAndTCNUMList.length==0">
                  <p class="_TCIDAndTCNUMList">{{$t('fnc.smjpbianhao')}}：{{item.SourceID}}</p>
                </template>
                <template v-else-if="item.OrderSource==0">
                  <p class="_TCIDAndTCNUMList">{{ item.BranchName }}-{{item.DepartName}} </p>
                </template>
                <template v-else>
                  <p class="_TCIDAndTCNUMList">{{$t('active.cl_zanwu')}} </p>
                </template>
              </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.TradeWayList&&item.TradeWayList.length>0">
                  <div class="_TradeWayList" v-for="(tw,twIn) in item.TradeWayList">
                    <p class="_fex_cen clearfix"><span class="_bold">{{tw.Alias}}</span><span
                        class="_bank_name">{{item.TradeWayList[0].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="">{{moneyFormat(item.Money)}}</span></p>
                <p>{{item.Type==1 ? $t('fnc.shishou') : $t('fnc.shifu') }}：<span
                    class="">{{moneyFormat(item.PayMoney)}}</span></p>
              </td>
              <td>
                <template v-if='item.Type===1'>
                  <span class="_color_gar">{{$t('fnc.huikuanren')}}：</span><span>{{item.RemitterName}}</span>
                </template>
                <template v-if='item.Type===2'>
                  <span class="_color_gar">{{$t('fnc.fkduixiang')}}：</span><span>{{item.RemitterName}}</span>
                </template>
                <template v-if='item.Type===4'>
                  <span class="_color_gar">{{$t('fnc.no')}}</span>
                </template>
              </td>
              <td valign="middle">
                <img class="_head_img" :src="item.EmPhoto" alt="">
                <span>{{item.EmName}}</span>
                <div>{{item.CreateDate}}</div>
              </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 || item.Status==5" 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('hotel.hotel_zanwu')}}</li>
                      </ul>
                    </div>
                  </div>
                  <span slot="reference" class="text_d _font_init"
                    @click="Financial_post_GetFinancLogList(item.FrID)">{{item.StatusStr}}</span>
                </el-popover>
              </td>
            </tr>
          </table>
        </div>
        <div slot="footer" class="dialog-footer">
          <button class="normalBtn" type="primary" @click="showCheck = true">
            {{$t('objFill.jiesuan')}}
          </button>
          <button class="hollowFixedBtn" @click="showDetail = false">
            {{ $t("pub.cancelBtn") }}
          </button>
        </div>
      </el-dialog>
      <el-dialog custom-class="addCompany page_MyCustomer" :title="$t('objFill.jiesuan')" width="400px" :visible.sync="showCheck" center>
        <el-form label-width="100px">
          <el-form-item :label="$t('ground.pingzheng')" prop="SigningFile">
            <el-upload class="avatar-uploader" action="" :http-request="UploadAttachment"
              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false">
              <img v-if="BusinessCardPhotos" :src="BusinessCardPhotos" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel_remark')">
            <el-input type="textarea" v-model="addMsg.ExamineReason" class="w216"></el-input>
          </el-form-item>
          <el-form-item :label="$t('objFill.shenheyijian')">
            <el-radio-group v-model="addMsg.Status">
              <el-radio :label="1">{{$t('visa.v_tongguo')}}</el-radio>
              <el-radio :label="2">{{$t('visa.v_jujue')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <button class="normalBtn" type="primary" @click="checkSubmit">
            {{ $t("pub.saveBtn") }}
          </button>
          <button class="hollowFixedBtn" @click="showCheck = false">
            {{ $t("pub.cancelBtn") }}
          </button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
  import myBill from "../FinancialModule/FinancialSubmodule/BillModule.vue";
  import myrbvBill from "../FinancialModule/FinancialSubmodule/ReceivablesModule.vue";
  import myhrBill from "../FinancialModule/FinancialSubmodule/MergeBillModule.vue";
  import myGZBill from "../FinancialModule/FinancialSubmodule/GZBillModule.vue";
  export default {
    components: {
      "my-Bill": myBill,
      "my-RVB-Bill": myrbvBill,
      "my-HB-Bill": myhrBill,
      "my-GZ-Bill": myGZBill,
    },
    data() {
      return {
        colorSon: "#f5f5f5",
        widthSon: "700px",
        active: 1,
        ActionMenuCode: [],
        LogLoading: false,
        GetFinancLogList: [],
        detailLoading: false,
        showDetail: false,
        detailInfo: {},
        CustomerStatus: 0,
        totalData: {},
        allCheck: false,
        addMsg: {},
        showCheck: false,
        saveMsg: [],
        headers: {
          'Content-Type': 'application/octet-stream'
        },
        yfcheckList: [],
        czList: [],
        saveMsg: [],
        addLayer1: false,
        allowAdd: true,
        BusinessCardPhotos: '',
        HousePhotos: '',
        Images: '',
        isOldPerson: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          CustomerStatus: 0,
          SigningCustomerId: '',
          CustomerName: ''
        },
        dataList: [],
        checkedCities: [],
        checkAll: false,
        addShow: false,
        noData: false,
        loading: true,
        isIndeterminate: true,
        total: 0,
        currentPage: 1,
        provinceList: [],
        cityList: [],
        regionList: [],
        zw: [], //职务
        khly: [], //客户来源
        outerVisible: false,
        cityList: [],
        regionList: [],
        id: '',
        ImagesNew: '',
        BusinessCardPhotosNew: '',
        HousePhotosNew: '',
        CustomerException: [],
        JYExceptionList: [],
        isShow: false
      }
    },
    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 => {}
        );
      },
      changeSelect() {
        this.czList.forEach((element) => {
          element.check = this.allCheck;
        });
      },
      changeSelectItem() {
        const listTmp = JSON.parse(JSON.stringify(this.czList));
        this.czList = [];
        this.$nextTick(() => {
          this.czList = listTmp;
        });
      },
      getSelcetedIds() {
        return this.czList
          .filter((item) => item.check)
          .map((item) => item.FrID)
          .join(",");
      },
      financeCheck(item) {
        this.$router.push({
          path: 'signedFinanceCheck',
          query: {
            id: item.id,
            name: item.customerName,
            blank: 'y',
          }
        })
      },
      getDetail(id) {
        this.detailLoading = true
        this.apipost(
          "customer_post_GetSigningSettlementDetails", {
            Id: id
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.detailLoading = false
              this.detailInfo = res.data.data
            } else {
              this.detailLoading = false
              this.$message.error(res.data.message ||this.$t('objFill.v101.Rest.fashengyiccs'));
            }
          },
          (err) => {}
        );
      },
      checkSubmit() {
        if (!this.BusinessCardPhotos) {
          this.$message.error(this.$t('objFill.v101.FinancialModule.qingcpz'));
          return;
        }
        this.addMsg.ExamineVoucher = this.BusinessCardPhotos;
        this.addMsg.Id = this.checkObj.customerAccountId;
        this.apipost(
          "customer_post_UpdateSigningSettlement",
          this.addMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.showCheck = false;
              this.$message.success(res.data.message || this.$t('tips.czchenggong'));
            } else {
              this.$message.error(res.data.message ||this.$t('objFill.v101.Rest.fashengyiccs'));
            }
          },
          (err) => {}
        );
      },
      UploadAttachment(file) {
        //上传
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/Temporary/";
        this.UploadSelfFileT(path, newArr, x => {
          this.BusinessCardPhotos = this.domainManager().ViittoFileUrl + x.data.FilePath
        });
      },
      uploadFileBtn(file) { //上传
        if (file.file.size > 1024 * 1024 * 100) {
          this.$message.warning(this.$t('adm.adm_filenotmoreM'))
          return
        }
        let that = this
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          this.saveMsg = []
          this.saveMsg.push({
            Path: x.data.FilePath,
            FileName: file.file.name,
            MD5Sign: file.file.uid,
            FileSize: fileSize,
            FolderId: this.msg.ParentId
          })
        });
      },
      //删除文件
      DeleteFile(subIndex) {
        this.saveMsg.splice(subIndex, 1);
      },
      //下载文件
      downloadFile(fileUrl, fileName) {
        const link = document.createElement('a');
        link.href = fileUrl;
        link.target = "_blank";
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
      },
      ZhiDanChongDi() {
        this.yfcdState = true;
        this.yfcheckList = [];
      },
      clickGetList(type) {
        this.msg.pageIndex = 1
        this.currentPage = 1
        this.msg.CustomerStatus = type
        this.getList()
      },
      getList() { // 获取列表数据
        this.loading = true
        this.czList = []
        this.apipost('customer_post_GetSettlementCustomerPage', this.msg, res => {
          if (res.data.resultCode == 0) {
            this.loading = false;
            this.czList = []
          } else {
            this.czList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false;
          }
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    },
    mounted() {
      this.msg.SigningCustomerId = this.$route.query.id
      this.getList()
    }
  }

</script>