<style scoped>
  @import "./css/cssReset.css";

  .currentManage .addCompany {width: 440px;}
  /* 币种管理 */
  .cm_content{padding:0;overflow-x: auto;}
  .cmc_item{float: left;width:212px;height: 195px;background:rgba(255,255,255,1);border-radius:4px;overflow: hidden;margin-right: 12px;margin-bottom: 15px;border: 1px solid #ebebeb}
  .cmci_top{background-color: #3AD892;padding: 14px 20px;font-size: 14px;color: #009251}
  .cmci_top p span:nth-child(2){display: inline-block;padding: 2px 5px;font-size: 12px;color: #FFFFFF;background-color: #02AE62;border-radius:4px;margin-left: 5px;vertical-align:top;}
  .cmci_cen{padding: 14px 20px;color: #666666;font-size: 12px}
  .cmci_cen p{padding: 4px 0;}
  .cmci_cen p .fr{font-weight: bold;font-family: "PingFangSC-fine";color: #333333}
  .cmci_cen p .icon-shuaxin{background-color: #E7E7E7;color: #999999;display: inline-block;margin-left: 5px;border-radius: 50%;font-size: 12px;transform: rotate(60deg);cursor: pointer;transition: all linear 0.2s;width: 12px;height: 12px;line-height: 12px;}
  .cmci_cen p .icon-shuaxin:hover{background-color: #E95252;color: white;}
  .fc_green{color: #47BF8C !important}
  .fc_red{color: #E95252 !important}
  .cmci_bot{padding:0 20px 20px 20px;font-size: 12px !important;text-align: center}
  .cmci_bot .el-button-group .el-button{padding: 4px;}
  .cmci_bot .el-button{font-size: 12px !important}
  .cmc_item:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
  ._benwei{background-color: #2AAEF2!important;color: #0877B0!important}
  ._benweiA{background-color: #0F80BA!important}
  ._underline{text-decoration: underline;cursor: pointer;}
  .currentManage ._vMG_edit{overflow: auto;display: none;position:absolute;font-family: 'PingFangSc-Fine';bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 10px;width: 100%;}
  .currentManage ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
  .currentManage ._vMG_edit ._tit span{color: #666666;font-size: 14px;}
  ._edHeight{height:400px;}
  .edHeight{display: block !important;height: 230px;}
  ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
  ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
  ._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
  .currentManage ._info_box ul{margin-top: 15px}
  .currentManage ._info_box ul li{float: left;    width: 250px;}
  ._max_width{max-width: 100px; overflow:hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align:top;}
  ._yingkui{height: 40px;line-height: 40px;font-size: 12px;color: #666666}
  ._tips{font-size: 12px;color: #666666;padding: 15px 0}
  .currentManage .po_content{
    border-collapse: collapse;
  }
  .currentManage .po_content{
    width: 100%;
  }
  .currentManage .po_content tr:first-child{
    font-size: 12px;
    color: #666666;
    background-color: #DCDCDC;
  }
  .currentManage .po_content tr th,.currentManage .po_content tr td{
    padding: 10px 20px;
    text-align: left;
  }
  .currentManage .po_content tr td{
    color: #333333;
    font-size: 14px;
    border:1px solid #E6E6E6;
  }
  .currentManage .po_content tr td .iconfont{
    font-size: 14px;
    padding: 4px;
  }
  .currentManage .query-box .iconfont{
    cursor: pointer;
    background-color: #E95252;
    color: white;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 10px;
  }
  .currentManage ._yuan{
    width:12px;
    height:12px;
    background:rgba(233,82,82,1);
    border-radius:50%;
    display: inline-block;
  }
  .currentManage ._yuan._yuan_red{
    background:#47BF8C;
  }
  ._flex_rete{
    cursor: pointer;
  }
  .display_none{
    opacity: 0;
  }
  ._flex_rete .icon-qiehuan{
    background-color: #E5E5E5;
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    padding: 0 !important;
    line-height: 20px;
    float: right;
  }
  ._flex_rete .icon-qiehuan:hover{
    background-color: rgba(233,82,82,1);
    color: white;
  }
  .Rform p{
    padding:6px 0;
    text-decoration: underline
  }
  .hoverFriD:hover{
    color:red;
  }
  .Rform span{
    display:inline-block;
    width:80px;
    text-align: right;
  }
</style>
<template>
  <div class="flexOne currentManage page-body">
    <div class="query-box">
      <ul>
        <li>
                   <span>
                       <em>编号</em>
                       <el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" v-model="msg.ID"></el-input>
                   </span>
        </li>
        <li>
                   <span>
                       <em>类型</em>
                       <el-select  filterable  v-model='msg.BankType' @change="getBank">
                            <el-option :value="0" label="不限"></el-option>
                            <el-option :value="1" label="银行"></el-option>
                            <el-option :value="2" label="平台"></el-option>
                        </el-select>
                   </span>
        </li>
        <li>
                   <span>
                       <em>银行账户</em>
                       <el-select  filterable  v-model='msg.BankAccountId' >
                            <el-option key="0" :value="0" label="不限"></el-option>
                            <el-option v-for="item in currencyTypeList" :key="item.ID" :value="item.ID" :label="item.Alias"></el-option>
                          </el-select>
                   </span>
        </li>
        <!-- <li>
            <span>
                <em>开户名</em>
                <el-input  v-model="msg.AccountName"></el-input>
            </span>
        </li> -->

        <li>
                   <span>
                       <em>收款金额</em>
                       <el-input style="width:100px" v-model="msg.SIncome"></el-input>
                       -
                       <el-input style="width:100px" v-model="msg.EIncome"></el-input>
                   </span>
        </li>
        <li>
                   <span>
                       <em>付款金额</em>
                       <el-input style="width:100px" v-model="msg.SRefund"></el-input>
                       -
                       <el-input style="width:100px" v-model="msg.ERefund"></el-input>
                   </span>
        </li>
        <li>
                   <span>
                       <em>对方户名</em>
                       <el-input  v-model="msg.Remitter"></el-input>
                   </span>
        </li>
        <li>
                   <span>
                       <em>交易时间</em>
                       <el-date-picker class="h34"
                                       @change="timeAdd"
                                       v-model="productionDate"
                                       type="daterange"
                                       value-format="yyyy-MM-dd"
                                       :range-separator="$t('restaurant.res_To')">
                                </el-date-picker>
                   </span>
        </li>

        <li>
                   <span>
                       <em>状态</em>
                       <el-select  filterable  v-model='msg.Type' >
                            <el-option :value="-1" label="不限"></el-option>
                            <el-option :value="1" label="已认领"></el-option>
                            <el-option :value="2" label="未认领"></el-option>
                        </el-select>
                   </span>
        </li>

        <li>
          <!-- <button class="hollowFixedBtn" @click="getList(),getTongji()">{{$t('pub.searchBtn')}}</button> -->
          <q-btn color="primary" size="11px" :label="$t('pub.searchBtn')"  @click="getList(),getTongji()" style="marginRight:10px"/>
          <!-- <button class="hollowFixedBtn" @click="outerVisible=true">导入</button> -->
          <q-btn color="primary" size="11px" label="导入"   @click="outerVisible=true" style="marginRight:10px"/>
         
          <q-btn color="primary" size="11px">
             <template v-slot:default>
                 <a style="color:#fff;width:84px;" :href="downList">导入模板下载</a>
             </template>
          </q-btn>
        </li>
      </ul>
    </div>
    <div style="margin:15px 0;font-size:14px">
      <span>未认总收：{{datainfo.Income}}</span>
      <span style="margin:0 15px">审核金额：{{datainfo.AuditMoney}}</span>
      <span>进日报表：{{datainfo.ReportMoney}}</span>
    </div>
    <div class="cm_content _scrollbar">

      <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-loading="loading">
        <tr>
          <th>编号</th>
          <th>类型</th>
          <th>别名/户名</th>
          <th>开户行/账号</th>
          <th>交易时间</th>
          <th>收</th>
          <th>支</th>
          <th>对方户名</th>
          <th>认领单号</th>
          <th>认款金额</th>
          <th>已审核</th>
          <th>进日报表</th>
          <th>财务人员</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in DataList" :key="index">
          <td>{{item.ID}}</td>
          <td>
            <span v-if="item.BankType==1">银行</span>
            <span v-if="item.BankType==2">平台</span>
          </td>
          <td>{{item.Alias}}
            <p>{{item.AccountName}}</p>
          </td>
          <td>{{item.OpeningBank}}
            <p>{{item.BackNo}}</p>
          </td>
          <td>{{item.TradeDate}}</td>
          <td>{{item.Income}}</td>
          <td>{{item.Refund}}</td>
          <td>{{item.Remitter}}</td>
          <td>
            <span class="hoverFriD" style="cursor: pointer;text-decoration: underline;margin-left:5px" @click="Gourl(i)" v-for="(i,index) in item.FinanceIdList" :key="index+500">{{i}}</span>&nbsp;
          </td>
          <td>{{item.ClaimMoney}}</td>
          <td>{{item.AuditMoney}}</td>
          <td>{{item.ReportMoney}}</td>
          <td>
            <div>{{item.UpdateBy}}</div>
            <div style="font-size:12px;">{{item.UpdateDate}}</div>
          </td>
          <td>
            <span style="cursor: pointer;color:blue;text-decoration:underline;margin-right: 5px" @click="AddR(item)" v-if="item.Type==2">认领</span>
            <!-- <span> | </span> -->
            <span style="cursor: pointer;color:red;text-decoration:underline;" @click="Delete(item)" v-if="item.IsDelete==1">删除</span>
          </td>
        </tr>
      </table>
      <div class="noData" v-if="DataList.length==0">
        {{$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>
    <el-dialog custom-class='w700' title="导入" :visible.sync="outerVisible" center>
      <el-upload style="text-align: center;" drag class="upload-demo" :action="importFileUrl2" :on-success="handleAvatarSuccess"
                 :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件</div> -->
      </el-upload>
    </el-dialog>
    <el-dialog custom-class='w400' title="认领未认款" :visible.sync="moneyR" center>
      <el-form class="Rform" ref="form" :model="form" label-width="100px">
        <p><span>户名：</span>{{form.AccountName}}</p>
        <p><span>账号：</span>{{form.BackNo}}</p>
        <p><span>收：</span>{{form.Income}}</p>
        <p><span>支：</span>{{form.Refund}}</p>
        <el-form-item label="绑定财务单据">
          <el-input v-model="form.FrId" class="w180"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="moneyR = false">取 消</el-button>
                <el-button size="small" type="danger" @click="RSumbit">确 定</el-button>
            </span>
    </el-dialog>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        form:{
          ID:"",
          FrId:'',
        },
        moneyR:false,
        outerVisible:false,
        msg:{
          pageIndex:1,
          pageSize:10,
          StartTime:"",
          EndTime:"",
          BankAccountId:"",
          Remitter:"",
          SIncome:"",
          EIncome:"",
          SRefund:"",
          ERefund:"",
          AccountName:"",
          Type:-1,
          BankType:0,
        },
        productionDate:[],
        DataList:[],
        loading:false,
        currentPage:1,
        total:0,
        currencyTypeList:[],
        importFileUrl2: "",
        downList:"",
        TypeList1:[],
        TypeList2:[],
        datainfo:{},
      }
    },
    created(){
      let userInfo = this.getLocalStorage();
      this.importFileUrl2=this.domainManager().UploadFileUrl +
        "?cmd=dmc_post_LocalFileUpload&fileType=1&fileLimit=1&RB_Group_id=2&Type=5&EmployeeId="+userInfo.Id
        +'&GroupName='+ encodeURIComponent(userInfo.GroupName)
        +'&BranchName='+encodeURIComponent(userInfo.SchoolName)
        +'&CreateByName='+encodeURIComponent(userInfo.AccountName)
        +'&BranchId='+userInfo.School_Id
        +'&GroupId='+userInfo.Group_Id
        +'&SystemType=Edu'
      ;
      this.downList =this.domainManager().LocalTemplateFileDownLoadUrl +"/Upload/Template/未认款导入模板.xls";
      this.GetAccount();
      this.GetAccount2();
      this.getList();
      this.getTongji();


    },
    filters:{
      PNumber(val){
        if(val){
          return val.substr(0, 4) + "****" + val.substr(-4,4)
        }

      },
    },
    mounted(){
      if(this.$route.query.StartTime){
        this.productionDate=[];
        this.productionDate[0]=this.$route.query.StartTime;
        this.productionDate[1]=this.$route.query.EndTime;
      }
    },
    methods: {
      getTongji(){
        this.apipost('Financial_get_GetFinanceRemittanceClaimStatistics',this.msg,res=>{
          if(res.data.resultCode==1){
            this.datainfo=res.data.data;
          }else{
            this.Error(res.data.message)
          }
        },err=>{})
      },
      getBank(val){
        if(val==1){
          this.currencyTypeList=this.TypeList1;
        }if(val==2){
          this.currencyTypeList=this.TypeList2;
        }
      },
      checkInt(obj){

      },
      AddR(item){
        this.form.ID=item.ID;
        this.form.AccountName=item.AccountName;
        this.form.BackNo=item.BackNo;
        this.form.Income=item.Income;
        this.form.Refund=item.Refund;
        this.moneyR=true;
      },
      Delete(item){
        var msg = {
          ID: item.ID
        }
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost(
            'Financial_post_DelFinanceRemittanceClaim',
            msg,
            res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.getList()
              } else {
                this.Error(res.data.message)
              }
            },
            null
          )
        }).catch(() => {

        });

      },
      RSumbit(){
        if(this.form.FrId==""){
          this.Error("请输入财务单据ID");
          return;
        }
        this.apipost('Financial_post_GetFinanceMoney',{FrId:this.form.FrId},res=>{
          if(res.data.resultCode==1){
            this.apipost('Financial_post_SetFinanceRemittanceClaim',this.form,res=>{
              if(res.data.resultCode==1){
                this.Success(res.data.message)
                this.getList();
                this.moneyR=false;
              }else{
                this.Error(res.data.message)
              }
            },err=>{})
          }else{
            this.Error(res.data.message)
          }
        },err=>{})

      },
      Gourl(i){
        this.$router.push({
          name: "FinancialDocumentsDetail",
          query: {
            id: i,
            blank: 'y'
          }
        })
      },
      beforeAvatarUpload(file) {
        return;
        const isJPG = file.type === "application/x-msdownload";
        if (!isJPG) {
          this.$message.error("上传文件只能是 excel 格式!");
        }
        return isJPG && isLt2M;
      },
      //上传
      handleAvatarSuccess(res, file) {
        if (res.resultCode == 1) {
          this.Success(res.message);
          this.outerVisible = false;
          this.getList();
        }else{
          this.Error(res.message);

        }
      },
      resetPageIndex(){  // 重置页码
        this.msg.pageIndex=1;
        this.currentPage = 1;
      },
      handleCurrentChange(val) { //翻页
        this.msg.pageIndex = val;
        this.getList();
      },
      getList(){
        this.loading=true;
        this.apipost('Financial_post_GetFinanceRemittanceClaimPageList', this.msg, res => {
          this.loading=false;
          if(res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total=res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      timeAdd(){
        if(!this.productionDate){
          this.msg.StartTime = '';
          this.msg.EndTime = '';
          return
        }
        this.msg.StartTime = this.productionDate[0];
        this.msg.EndTime = this.productionDate[1];
      },
      GetAccount(){
        this.apipost('bankaccount_post_GetList',{TypeId:'0'},res=>{
          if(res.data.resultCode==1){
            this.TypeList1 = res.data.data;
            if(this.$route.query.BankType){
              this.msg.BankType=Number(this.$route.query.BankType)
              this.getBank(this.msg.BankType)
            }
            if(this.$route.query.BankID){
              this.msg.BankAccountId=Number(this.$route.query.BankID)
            }

          }else{

          }
        },err=>{})
      },
      GetAccount2(){
        let msg = {
          BackId:0,
          TypeId:12,
          BranchId:-1,
          Alias:'',
          // RB_Branch_Id:this.RB_Branch_Id,
        }
        this.apipost('BankAccount_post_GetPlatformList',msg, res => {
          if(res.data.resultCode == 1) {
            let data = res.data.data;
            this.TypeList2 = data;
          }
        }, err => {})
      },
    },

  }
</script>
