<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="客户名称">
          <el-select v-model="pagerDto._Eq_CustomerId" placeholder="客户名称" clearable filterable>
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="付款状态">
          <xyy-enum :model.sync="pagerDto._In_Status" title="选择付款状态" enum-name="FiannceServiceBillStatus" :multiple="true" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="pagerDto._Range_StartTime"
            type="monthrange"
            range-separator="至"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="逾期天数">
          <el-input v-model="pagerDto._GrE_CurrentOverdueDays" title="大于等于" />
        </el-form-item>
        <el-form-item>
          <el-button @click="pagerSerach(1)">
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      <el-button type="primary" @click="out()">
        导出
      </el-button>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
        border
      >
        <el-table-column label="客户名称" prop="CustomerName" />
        <el-table-column label="账期区间">
          <template slot-scope="r">
            {{ r.row.StartTime.split('T')[0]+'至'+r.row.EndTime.split('T')[0] }}
          </template>
        </el-table-column>
        <el-table-column label="账单日" prop="CreateTime" width="95">
          <template slot-scope="r">
            {{ r.row.CreateTime.split('T')[0] }}
          </template>
        </el-table-column>
        <el-table-column label="最后还款日" prop="LastRepaymentDate" width="95">
          <template slot-scope="r">
            {{ r.row.LastRepaymentDate?r.row.LastRepaymentDate.split('T')[0] :'' }}
          </template>
        </el-table-column>
        <el-table-column label="上期余额" prop="BalanceOfPreviousPeriod" width="100" />
        <el-table-column label="本期付款" prop="CurrentPeriod" width="100" />
        <el-table-column label="本期收入" prop="CustomerRevenue" width="100" />
        <el-table-column label="本期支出" prop="CustomerExpenditure" width="100" />
        <el-table-column label="期末余额" prop="ClosingBalance" width="100" />
        <el-table-column label="本期应还金额" prop="Arrears" width="100" />
        <el-table-column label="已还金额" prop="Repayment" width="100" />
        <el-table-column label="剩余待还" prop="AmountToBeRepaid" width="100" />
        <el-table-column label="状态" prop="Status" width="80">
          <template slot-scope="r">
            {{ getStatusString(r.row.Status) }}
          </template>
        </el-table-column>
        <el-table-column label="逾期天数" prop="CurrentOverdueDays" width="100" />
        <el-table-column label="帐单" prop="CurrentOverdueDays" width="80">
          <template slot-scope="r">
            <el-button type="text" @click="downloadBill(r.row.Id)">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40,100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
  </base-list>
</template>
<script>
import { _getRemittancePageResult, _getOutCustomer, _outRemange
}
  from '@/api/financeCustomerDelivery'
import xyyEnum from '@/components/Xyy/Enums/enums'
import BaseList from '@/components/Xyy/baselist'
import { _getSalesmanUsers } from '@/api/customer'
import { _getCustomers } from '@/api/baseInfo'
// import {  } from '@/api/'
export default {
  name: 'RemittanceMange',
  components: { 'xyy-enum': xyyEnum, 'base-list': BaseList },
  data() {
    return {
      customers: [],
      salesmanUser: [],
      data: [],
      dataLoading: false,
      pagerDto: { _In_Status: '', _Eq_CustomerId: '', _Range_StartTime: [], PageIndex: 0, PageSize: 10, total: 0, QuerySort: [{ Field: 'CustomerId' }, { Field: 'StartTime' }] }
    }
  },
  mounted() {
    if (window.location.href.indexOf('?status=') > -1) {
      debugger
      var status = window.location.href.substr(window.location.href.indexOf('?status=') + 8)
      if (status.indexOf('&') > -1) {
        status = status.substring(0, status.indexOf('&'))
      }
      if (status == 'Arrears') {
        this.pagerDto._In_Status = [3]
        this.pagerDto._GrE_CurrentOverdueDays = ''
      } else if (status == 'Overdue') {
        this.pagerDto._In_Status = [3]
        this.pagerDto._GrE_CurrentOverdueDays = '1'
      } else if (status == 'Payment') {
        this.pagerDto._In_Status = [4, 5]
        this.pagerDto._GrE_CurrentOverdueDays = ''
      }
      if (window.location.href.indexOf('&customerId=') > -1) {
        var customerId = window.location.href.substr(window.location.href.indexOf('&customerId=') + 12)
        this.pagerDto._Eq_CustomerId = customerId * 1
      }
    }
    _getCustomers().then(response => {
      this.customers = response
      this.pagerSerach(1)
    })
    _getSalesmanUsers().then(response => {
      this.salesmanUser = response
    })
  },
  methods: {
    out() {
      _outRemange(this.pagerDto)
    },
    getStatusString(status) {
      if (status == 3) { return '欠款中' } else if (status == 4) { return '未欠款' } else if (status == 5) { return '已还清' }
    },
    downloadBill(billId) {
      _getOutCustomer(billId, 1)
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _getRemittancePageResult(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
        this.data.forEach(r => {
          this.customers.forEach(c => {
            if (r.CustomerId == c.Id) { r.CustomerName = c.CompanyName }
          })
        })
      }).finally(res => { this.dataLoading = false })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}

</script>
