<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>
  ._wenjian_P {
    font-size: 30px;
    text-align: center;
    color: #41D2A1;
  }

  ._addUpload_box_btm {
    /* padding-top: 20px; */
    /* max-height: 230px; */
    /* overflow: auto; */
  }

  ._addUpload_box_btm img {
    width: 100%;
  }

  ._addUpload_box_btm>div {
    float: left;
    width: 66px;
    height: 55px;
    border: 1px dashed rgba(210, 210, 210, 1);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 17px;
    padding: 5px;
    margin-right: 17px;
    position: relative;
  }

  .deleticon {
    font-size: 12px;
    width: 19px;
    position: absolute;
    right: -10px;
    border-radius: 50%;
    top: -9px;
    background: #eee;
    height: 19px;
    line-height: 19px;
    text-align: center;
  }

  ._addUpload_box_btm>div:hover {
    background-color: #f5f5f5;
  }

  /deep/._fujian_box .el-upload {
    width: 100px !important;
  }

  /deep/._fujian_box .el-upload-dragger {
    width: 100px;
    height: 100px;
  }

  /deep/._fujian_box .avatar-uploader-icon {
    height: 63px !important;
    line-height: 63px !important;
    width: 100% !important;
  }

  .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 th,
  tr td {
    text-align: left;
    padding-left: 10px;
  }

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

  .check-info {
    margin: 10px;
    font-size: 14px;
    color: #666;
  }

  .check-info span {
    margin-left: 10px;
    color: #333;
  }

</style>
<template>
  <div class="page_MyCustomer MyCustomerDiv">
    <div>
      <div style="display: flex">
        <div>
          <div class="check-info">{{$t('fnc.khmingcheng')}}:<span>{{name}}</span></div>
          <div class="check-info">{{$t('visaT.Applicant')}}:<span>{{detailInfo.CreateBy}}</span></div>
          <div class="check-info">{{$t('salesModule.ApplyTime')}}:<span>{{detailInfo.CreateDate}}</span></div>
          <div class="check-info">{{$t('salesModule.ApplyReason')}}:<span>{{detailInfo.Notes}}</span></div>
          <div class="check-info">{{$t('admin.admin_status')}}:<span>{{detailInfo.StatusName}}</span></div>
        </div>
        <div class="check-info">
          <div style="margin-bottom: 10px">{{$t('objFill.v101.Rest.shenqingfuj')}}:</div>
          <div class="_addUpload_box _addUpload_box_btm clearfix"
            v-if="detailInfo.vorcherInos&&detailInfo.vorcherInos.length>0">
            <template v-for="(file,fIndex) in detailInfo.vorcherInos">
              <div v-if="file.Type==3">
                <div style="width:100%;height:100%;overflow: hidden;">
                  <el-image style="width: 100%; height: 100%" :src="file.Url?file.Url:file.Content"
                    :preview-src-list="[file.Url?file.Url:file.Content]">
                  </el-image>
                </div>
              </div>
              <div v-if="file.Type==1">
                <div class="iconfont _wenjian_P" :class="file.Content.substring(file.Content.lastIndexOf('.')+1,
                file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFileT(file)">
                </div>
              </div>
            </template>
          </div>
          <img v-else @click="showImg(detailInfo.Voucher)" style="width: 200px" :src="detailInfo.Voucher" />
        </div>
      </div>
      <div style="text-align: right;">
        <button class="normalBtn" type="primary" @click="examine">
          {{$t('fnc.shenhe')}}
        </button>
      </div>
    </div>
    <div style="margin-top: 10px" v-loading="detailLoading">
      <table 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.OrderSouuploadImgrce==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>
    <el-dialog custom-class="addCompany page_MyCustomer" :title="$t('fnc.shenhe')" width="400px" :visible.sync="showCheck" center>
      <el-form label-width="100px">
        <el-form-item :label="$t('ground.pingzheng')" prop="SigningFile">

          <div class="_fujian_box">
            <div class="_pic_upload">
              <el-upload drag :http-request="UploadAttachment" :multiple="true" :show-file-list="false" action="">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div>
              </el-upload>
            </div>
          </div>

          <div class="_addUpload_box _addUpload_box_btm clearfix" v-if="saveMsg.length>0">
            <template v-for="(file,fIndex) in saveMsg">
              <div v-if="file.Type==3">
                <div style="width:100%;height:100%;overflow: hidden;">
                  <el-image style="width: 100%; height: 100%" :src="file.Url?file.Url:file.Content"
                    :preview-src-list="[file.Url?file.Url:file.Content]">
                  </el-image>
                  <!-- <img :src="file.Url?file.Url:file.Content" @click="showImg(file.Url?file.Url:file.Content)"> -->
                </div>
                <span class="iconfont icon-guanbi1 deleticon" @click="deleteUploadFile(fIndex)"></span>
              </div>
              <div v-if="file.Type==1">
                <div class="iconfont _wenjian_P" :class="file.Content.substring(file.Content.lastIndexOf('.')+1,
                  file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFileT(file)">

                </div>
                <span class="iconfont icon-guanbi1 deleticon" @click="deleteUploadFile(fIndex)"></span>
              </div>
            </template>
          </div>
        </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('fnc.jiaoyiriqi')">
          <el-date-picker value-format="yyyy-MM-dd" class="w217" v-model="addMsg.TradeDate" type="date">
          </el-date-picker>
        </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" v-loading="LoadingReview">
          {{ $t("pub.saveBtn") }}
        </button>
        <button class="hollowFixedBtn" @click="showCheck = false">
          {{ $t("pub.cancelBtn") }}
        </button>
      </div>
    </el-dialog>
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </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 {
        LoadingReview: false,
        imageOptions: {
          navbar: false,
          title: false
        },
        images: [],
        name: '',
        colorSon: "#f5f5f5",
        widthSon: "700px",
        active: 1,
        ActionMenuCode: [],
        LogLoading: false,
        GetFinancLogList: [],
        detailLoading: false,
        showDetail: false,
        detailInfo: {},
        CustomerStatus: 0,
        totalData: {},
        allCheck: false,
        addMsg: {
          Status: 1
        },
        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,
        saveMsg: [],
      }
    },
    methods: {
      // 审核
      examine() {
        this.saveMsg = []
        this.detailInfo.vorcherInos && this.detailInfo.vorcherInos.forEach(item => {
          let dataObj = {
            Content: item.Content,
            ID: item.ID ? item.ID : 0,
            Type: item.Type,
            Url: item.Url,
          }
          this.saveMsg.push(dataObj)
        })
        if (this.detailInfo.vorcherInos.length == 0) {
          let dataObj = {
            Type: this.verificationFile(this.detailInfo.Voucher),
            ID: 0,
            Url: this.detailInfo.Voucher,
            Content: this.detailInfo.Voucher
          }
          this.saveMsg.push(dataObj)
        }
        this.showCheck = true
      },
      deleteUploadFile(i) { // 删除上传文件
        this.saveMsg.splice(i, 1);
      },
      showUpLoadFileT(i) { // 预览上传文件
        if (i.Content.substring(i.Content.lastIndexOf('.') + 1, i.Content.length).toUpperCase() == 'PDF') {
          this.previewPDF(i.Url)
        } else {
          let dom = document.querySelector("#signed_DownLoad");
          dom.href = i.Url;
          dom.click();
          //   window.open("https://view.officeapps.live.com/op/view.aspx?src="+i.Url)
        }
      },
      UploadAttachment(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t('tips.wjdxbncgsz'))
          return
        }
        //  1 文档  2 数据 3 图片
        let typeArr = [{
            stringArr: 'GIF|JPG|JPEG|PNG|BMP',
            type: 3
          },
          {
            stringArr: 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',
            type: 1
          },
        ]
        let ft = file.file.name.substring(file.file.name.lastIndexOf('.') + 1, file.file.name.length).toUpperCase();
        let fileTypeNumber = 2;
        let typeOk = false;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != '-1') {
            fileTypeNumber = x.type;
            typeOk = true;
          }
        });
        if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile'));
        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.push({
            Type: fileTypeNumber,
            Content: this.domainManager().ViittoFileUrl + x.data.FilePath,
            Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
          });
          this.$message.success(this.$t('tips.scchenggong'));
        });
      },
      inited(viewer) {
        this.$viewer = viewer
      },
      showImg(obj) {
        let isExsit = false
        this.images.forEach(x => {
          if (x == obj)
            isExsit = true
        })
        if (!isExsit) {
          this.images.push(obj)
        } else {
          this.$viewer.view(this.images.indexOf(obj))
        }
        this.$viewer.show()
        // this.picObj= obj;
        // this.picIsShow= true;
      },
      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 => {}
        );
      },
      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

              this.images = [this.detailInfo.Voucher]
            } else {
              this.detailLoading = false
              this.$message.error(res.data.message ||this.$t('objFill.v101.Rest.fashengyiccs'));
            }
          },
          (err) => {}
        );
      },
      checkSubmit() {
        this.addMsg.ExamineVouchers = []
        if (!this.saveMsg || this.saveMsg.length == 0) {
          this.$message.error(this.$t('objFill.v101.FinancialModule.qingcpz'))
          return
        }
        this.saveMsg.forEach(item => {
          let dataObj = {
            Content: item.Content,
            ID: item.ID ? item.ID : 0,
            Type: item.Type,
            Url: item.Url
          }
          this.addMsg.ExamineVouchers.push(dataObj)
        })
        // this.addMsg.ExamineVoucher = this.BusinessCardPhotos;
        this.addMsg.Id = this.frId;
        this.LoadingReview = true
        this.apipost(
          "customer_post_UpdateSigningSettlement",
          this.addMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.LoadingReview = false
              this.saveMsg = []
              this.showCheck = false;
              this.$message.success(res.data.message || this.$t('tips.czchenggong'));
              // this.getDetail(this.frId)
              this.$router.push({
                path: 'signedFinanceAll',
                query: {
                  blank: 'y',
                  tab: 3
                }
              })
            } else {
              this.LoadingReview = false
              this.$message.error(res.data.message ||this.$t('objFill.v101.Rest.fashengyiccs'));
            }
          },
          (err) => {
            this.LoadingReview = false
          }
        );
      },

    },
    mounted() {
      this.frId = this.$route.query.id
      this.name = this.$route.query.name
      this.getDetail(this.frId)
    }
  }

</script>
