<style scoped>
  /deep/.el-table th.el-table__cell {
    background-color: #E6E6E6;
  }


.recpayQueryMore{margin:10px 0px 5px 0px;text-align:center;cursor: pointer;}

.page_RecPayQuery .el-form-item{
  margin-bottom:5px;
}
._fnDm_content table .d12p {
    margin-top: 3px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    max-height: 40px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  ._fnDm_content table .d12p:hover {
    text-decoration: underline;
    color: #333;
  }
</style>

<template>
  <div class="page_fnDm page_RecPayQuery" @keyup.enter="resetPageIndex(),getPageList()">
    <div class="query-box">
      <el-form class="_info_box clearfix" label-width="110px">
        <el-row style="padding:15px 20px 0 0;">
          <el-col :span="4">
            <el-form-item :label="$t('fnc.danhao')">
              <el-input placeholder="" class="" v-model="msg.BaseFinanceId" @keyup.native="checkInteger(msg,'FrID')"
                maxlength="8"></el-input>
            </el-form-item>
          </el-col>
         
          <el-col :span="4">
            <el-form-item :label="$t('fnc.ssuogongsi')">
              <el-select filterable v-model='msg.RB_Branch_Id'
                class="">
                <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option v-for='item in CompanyList' :label='item.BName' :value='item.Id' :key='item.Id'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item :label="$t('fnc.feiyongleixing')">
                <el-select filterable v-model='msg.CostTypeID'>
                  <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                  <el-option v-for="item in GetCostTypeList" :key="item.ID" :value="item.ID" :label="item.Name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="$t('fnc.zdriqi')">
                <StartDateLimit :clearable="false" :dateTime="productionDate" @change="(startDate,endDate)=>{msg.sDate=startDate,msg.eDate=endDate}"></StartDateLimit>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="$t('fnc.jiaoyiriqi')">
                <el-date-picker class="h34" v-model="transactionDate" @change="timeAdd(3)" type="daterange"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="$t('objFill.remarkquery')">
                <el-input v-model="msg.Remark"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="">
                <el-checkbox  v-model="msg.IsSelectRemain" :true-label='1' :false-label='0'>
                  {{$t('fnc.onlyseebalance')}}
               </el-checkbox>
              </el-form-item>
            </el-col>
            
        </el-row>
      </el-form>
      <ul class="clearfix">
        <li class="hight_query">
          <button class="hollowFixedBtn" @click="resetPageIndex(),getPageList()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" @click="DownLoadAll()">{{$t('visa.v_daochu')}}</button>
        </li>
      </ul>
    </div>
    <div class="_fnDm_content" v-loading='loading'>
      <el-table ref="multipleTable" :data="DataList" tooltip-effect="dark" style="width: 100%"
      row-key="Id">
        <el-table-column prop="address" :label="$t('fnc.danhao')" width="70">
          <template slot-scope="scope">
            <span 
                style="text-decoration: underline;cursor: pointer;font-weight: bold"  @click="goUrlDetail('FinancialDocumentsDetail',scope.row)">{{scope.row.BaseFinanceId}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('system.query_company')" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.BranchName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.feiyongleixing')"  width="120">
          <template slot-scope="scope">
            <div>
              <template v-for="(s,si) in scope.row.CostTypeList">
                <span
                  style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;">{{s}}</span></br>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('tips.jiaoyifangshi')" show-overflow-tooltip >
          <template slot-scope="scope">
            <div>
              <template v-if="scope.row.TradeWayList&&scope.row.TradeWayList.length>0">
                <div class="_TradeWayList" v-for="(tw,twIn) in scope.row.TradeWayList"
                  style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;margin: 10px 0;width:230px">
                  <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name"
                      style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">
                      {{scope.row.TradeWayList[0].TypeName}}</span>
                    <span
                      style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;"
                      :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?$t('fnc.no'):tw.AccountType}}</span>
                  </p>
                  <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
              </template>
              <template v-else>
                <div class="_pad5">
                  {{$t('fnc.no')}}
                </div>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.jine')" >
          <template slot-scope="scope">
            <span>
              <!-- <p v-if="scope.row.IsForeignCurrency==1" style="line-height:20px">{{$t('fnc.yuanbi')}}：<span>{{scope.row.WBMoney}}{{scope.row.CurrencyName}}</span></p>
              <p style="line-height:20px">{{scope.row.Type==1?$t('fnc.yingshou'):$t('fnc.yingfu')}}：<span>{{scope.row.Money}}</span></p>
              <p style="line-height:20px">{{scope.row.Type==1?$t('fnc.shishou'):$t('fnc.shifu')}}：<span>{{scope.row.PayMoney}}</span></p>
              <p v-if="scope.row.IsAdvanceFinance==1" style="line-height:20px">{{$t('objFill.balanceout')}}：<span>{{scope.row.MatchMoney}}</span> -->

                <p style="line-height:20px">{{$t('fnc.yuanbi')}}：<span>{{scope.row.OriginalMoney}}</span></p>
              <p style="line-height:20px">{{$t('fnc.bweibi')}}：<span>{{scope.row.Money}}</span></p>
              </p>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.fkduixiang')">
          <template slot-scope="scope">
            <span>{{scope.row.RemitterName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.qishimonth')" width="100">
          <template slot-scope="scope">
            <span style="color: gray">{{scope.row.StartDate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.tanxiaomonth')" width="100">
          <template slot-scope="scope">
            <span style="color: gray">{{scope.row.RelevanceFrId2}}{{ $t('fnc.monthUnit')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.monthMoney')" width="100">
          <template slot-scope="scope">
            <span style="color: gray">{{scope.row.ShareMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.dtxjine')" width="100">
          <template slot-scope="scope">
            <span style="color: gray">{{scope.row.Remain}}</span>
          </template>
        </el-table-column> 
        <el-table-column prop="" :label="$t('pub.pubRemark')" >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.Remark" placement="top-start"
                popper-class="max-w250">
                <p class="d12p"  :title="scope.row.Remark">
                  {{scope.row.Remark}}
                </p>
              </el-tooltip>
            <span style="color: gray"></span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.zhidanInfo')" >
          <template slot-scope="scope">
          
                <p style="line-height:20px">{{$t('fnc.zhidanren')}}：<span>{{scope.row.FCreateByName}}</span></p>
              <p style="line-height:20px">{{$t('fnc.zhidanDate')}}：<span>{{scope.row.FCreateDate}}</span></p>
             
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('admin.admin_czPerson')" width="100">
          <template slot-scope="scope">
              <div>{{scope.row.CreateByName}}</div>
          </template>
        </el-table-column>
      
      
      </el-table>

      <div style="padding-bottom:15px">

        <el-pagination background
        @current-change="handleCurrentChanges"
        @size-change="handleSizeChange"
        layout="total,sizes,prev, pager, next, jumper"
          :page-size="msg.pageSize" :total='total'
          :page-sizes="[5,15,20,30,50,100,200]">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
 
  import Vue from 'vue'
  import StartDateLimit from '../public/StartDateLimit.vue';

  export default {
    data() {
      return {
      
        userinfo:{},
        alltransaction: [],
        transactionmode: false,
        userId: 0,
       
        searchList: [],
        msg: {
          pageIndex: 1,
          pageSize: 5,
          BaseFinanceId: '',
          sDate: '',
          eDate: '',
          RB_Branch_Id: '',
          RB_Group_Id:0,
          sTradeDate: '',
          eTradeDate: '',
          Remark: '', //备注查询
          CostTypeID: '',
          IsSelectRemain:0,
        },
        getCompanyMsg: { // 公司
          RB_Group_Id: '0',
          Status: '0',
        },
      
      
        DataList: [],
        BranchAccountList: [],
        
        CompanyList: [],
        productionDate: [],
        approvalDate: [],
        transactionDate: [],
        missionDate: [],
        currencyTypeList: [],
        GetCostTypeList: [],
        TemplateGetList: [],
       
        dateStart: '',
        dateEnd: '',
        dateArr: '',
        status: '1',
        type: '1',
        loading: false,
        LogLoading: false,
        
        currentPage: 1,
        total: 0,
       
        tableData: [],
        pageSize: 5,
        pageIndex: 1,
       
        widthSon: '700px',
        colorSon: "#f5f5f5",
      
        dialogTitle:"",
        dialogTitle1:"",
        multipleSelection: [],
        isBatchPrinting: false,
        ShowFixedAssets: false,
        showUpdateCreate:false,
      }
    },
    created() {
      this.userinfo = this.getLocalStorage();
      this.GetSupperOrderEditAuth()
    
      if (this.$route.query.FrID) {
        this.msg.FrID = this.$route.query.FrID;
      }
     
      if (this.$route.query.rec) {
        this.transactionDate[0] = this.$route.query.StartDate;
        this.transactionDate[1] = this.$route.query.StartDate;
        this.msg.sTradeDate = this.$route.query.StartDate;
        this.msg.eTradeDate = this.$route.query.StartDate;
      }
    },
    components: {
    
      StartDateLimit
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.getCompanyMsg.RB_Group_Id =  userInfo.RB_Group_id; //集团ID
     

    
    this.financeinfo_post_GetCostTypeList();
      this.getCompanyList();
      this.getPageList();
    },
    methods: {
      goUrlDetail(path, rowData) {
        this.$router.push({
          path: path,
          query: {
            id: rowData.BaseFinanceId,
            blank: 'y',
            tab: rowData.BaseFinanceId + this.$t('objFill.documentparticulars')
          }
        })
      },
      financeinfo_post_GetCostTypeList() { // 费用类型
        this.apipost('financeinfo_post_GetCostTypeList', {
          Name: '',
          type: 0,
          DepartIDs: this.DepartIDs,
          IsBalanceOfTheQuery: 1
        }, res => {
          if (res.data.resultCode == 1) {
            this.GetCostTypeList = res.data.data;
          } else {

          }
        }, err => {})
      },
      GetSupperOrderEditAuth() {
        var actionCode = this.$AuthCode.isQueryHistoryData;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {

          }else{
            let StartDate = this.getBeforeDate(365, new Date().Format("yyyy-MM-dd"))
            let EndDate = this.getBeforeDate(-1, new Date().Format("yyyy-MM-dd"))
            this.productionDate = [StartDate, EndDate]
            this.msg.sDate = this.productionDate[0];
            this.msg.eDate = this.productionDate[1];
          }
        });

     },
      // 数据筛选
      filterMethod(filters) {},
      // 更改每页条数
      handleSizeChange(val) {
        this.msg.pageSize = val
        this.getPageList();
      },
      handleCurrentChanges(val) {
        this.pageIndex = this.msg.pageIndex = val;
        this.getPageList();
      },
   
      getPageList() { // 获取列表数据
      
        if (!this.msg.CostTypeID) this.msg.CostTypeID = 0;
      
        if (this.msg.RB_Branch_Id === '') this.msg.RB_Branch_Id = -1;
        if (!this.msg.BaseFinanceId) this.msg.BaseFinanceId = 0;
     
      
        this.loading = true;
        this.apipost('Financial_post_GetFinanceRelevancePageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data.pageData;
            let userInfo = this.getLocalStorage();
            this.total = res.data.data.count;
            if (this.total == 0) {
              this.DataList = [];
            } else {
              this.DataList = data;
            }
            this.loading = false;
          } else {
            this.loading = false;
            this.$message.error(res.data.message);
          }
          this.currentPage = parseInt(this.msg.pageIndex);
        }, err => {})
      },
  
    
    
      mathMoney(n) { // 数字转中文大写 1
        this.ChineseStr = this.$commonUtils.changeMoneyToChinese(n)
      },
   
   
     
      getCompanyList() { //获取公司列表
        this.apipost('admin_get_BranchGetList', this.getCompanyMsg, res => {
          if (res.data.resultCode == 1) {
            this.CompanyList = res.data.data;
          } else {}
        }, err => {})
      },
     
    
      timeAdd(t) { // 日期格式
        if (t == 1) { //制单日期
          if (!this.productionDate) {
            this.msg.sDate = '';
            this.msg.eDate = '';
            return
          }
          this.msg.sDate = this.productionDate[0];
          this.msg.eDate = this.productionDate[1];
        }
       else if (t == 3) { //交易日期
          if (!this.transactionDate) {
            this.msg.sTradeDate = '';
            this.msg.eTradeDate = '';
            return
          }
          this.msg.sTradeDate = this.transactionDate[0];
          this.msg.eTradeDate = this.transactionDate[1];
        }
      },
      queryInfoInit() { // 初始化msg
        let msg = {
          pageIndex: this.msg.pageIndex,
          pageSize: 6,
          FrID: this.msg.FrID == 0 ? '' : this.msg.FrID,
          sDate: this.msg.sDate,
          eDate: this.msg.eDate,
          RB_Branch_Id: this.msg.RB_Branch_Id,
          sTradeDate: this.msg.sTradeDate,
          eTradeDate: this.msg.eTradeDate,
        }
        this.msg = msg;
      },
      handleCurrentChange(val) { //翻页
        this.msg.pageIndex = val;
        this.getPageList();
      },
      resetPageIndex() { // 重置页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      goUrl(path, id, Conditon, pageIndex) {
        this.$router.push({
          name: path,
          query: {
            "id": id,
            "Conditon": Conditon,
            "pageIndex": pageIndex,
            blank: 'y',
            tab: '单据详情'
          }
        })
      },
      DownLoadAll: function() {
        if (!this.msg.CostTypeID) this.msg.CostTypeID = 0;
      
        if (this.msg.RB_Branch_Id === '') this.msg.RB_Branch_Id = -1;
        if (!this.msg.BaseFinanceId) this.msg.BaseFinanceId = 0;

        this.msg.EmployeeId=this.userinfo.EmployeeId;
        this.GetLocalFile("Financial_post_GetFinanceRelevanceListToExcel", this.msg,"费用摊销.xls");
        }
    }
  }

</script>
