<template>
  <div class="companyCollectionPaymentDetail-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="companyCollectionPaymentDetail-cont" >
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="companyCollectionPaymentDetail-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
          <p style=" display: inline-block;margin: 0 0 0 60px;color: #000;font-size: 16px;font-weight: 600;">客户：{{ $route.params.name || '--' }}</p>
        </template>
      </a-page-header>
      <a-card>
        <!-- 搜索条件 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
            <a-row :gutter="15">
              <a-col :md="6" :sm="24">
                <a-form-item label="单据号">
                  <a-input id="companyReceivablePayableDetail-bizNo" v-model.trim="queryParam.bizNo" allowClear placeholder="请输入单据号"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="审核时间">
                  <rangeDate ref="rangeDate" @change="dateChange" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="companyReceivablePayableDetail-refresh">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="companyReceivablePayableDetail-reset">重置</a-button>
                  <!-- <a-button
                    type="danger"
                    style="margin-left: 8px"
                    @click="handleExport"
                    :disabled="disabled"
                    :loading="exportLoading"
                    id="companyReceivablePayableDetail-export-btn">导出</a-button> -->
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- alert -->
        <a-alert type="info" style="margin-bottom:10px">
          <div slot="message">
            共 <strong>{{ total }}</strong> 条明细，
            金额合计 <strong>{{ (productTotal&&(productTotal.totalAmount || productTotal.totalAmount==0)) ? '￥'+productTotal.totalAmount : '--' }}</strong> ，
            余额合计 <strong>{{ (productTotal&&(productTotal.unsettleAmount || productTotal.unsettleAmount==0)) ? '￥'+productTotal.unsettleAmount : '--' }}</strong>
          </div>
        </a-alert>
        <!-- 列表 -->
        <s-table
          class="sTable"
          ref="table"
          size="small"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          :defaultLoadData="false"
          bordered>
          <!-- 采购数量 -->
          <template slot="purchaseNum" slot-scope="text, record">
            <span>{{ record.purchaseNum }}</span>
          </template>
          <!-- 缺货数量 -->
          <template slot="outOfStockNum" slot-scope="text, record">
            <span>{{ record.outOfStockNum }}</span>
          </template>
        </s-table>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// import { downloadExcel } from '@/libs/JGPrint.js'
import { STable, VSelect } from '@/components'
import rangeDate from '@/views/common/rangeDate.vue'
import { settleInfoList, settleInfoQueryReceiptOrPaySum } from '@/api/settle'
export default {
  name: 'CompanyReceivablePayableDetail',
  components: { STable, VSelect, rangeDate },
  mixins: [commonMixin],
  data () {
    return {
      spinning: false,
      disabled: false, //  查询、重置按钮是否可操作
      // 查询参数
      queryParam: {
        auditBeginDate: '',
        auditEndDate: '',
        bizNo: ''
      },
      exportLoading: false, // 导出loading
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
        { title: '单据号', dataIndex: 'bizNo', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '类型', dataIndex: 'bizTypeDictValue', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '审核时间', dataIndex: 'auditTime', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '金额', dataIndex: 'totalAmount', width: '17%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '余额', dataIndex: 'unsettleAmount', width: '17%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        const params = Object.assign(parameter, this.queryParam, { settleClientSn: this.$route.params.sn })
        return settleInfoList(params).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            this.getTotal(params)
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
            this.disabled = false
            this.total = data.count || 0
          }
          this.spinning = false
          return data
        })
      },
      basicInfoData: null, //  基本信息
      total: 0, //  总条数
      productTotal: null //  合计
    }
  },
  methods: {
    //  时间  change
    dateChange (date) {
      this.queryParam.auditBeginDate = date[0]
      this.queryParam.auditEndDate = date[1]
    },
    //  返回列表
    handleBack () {
      this.$router.push({ path: '/financialManagement/companyReceivablePayable/list' })
    },
    // 合计
    getTotal (param) {
      settleInfoQueryReceiptOrPaySum(param).then(res => {
        if (res.status == 200 && res.data) {
          this.productTotal = res.data
        } else {
          this.productTotal = null
        }
      })
    },
    // 重置
    resetSearchForm () {
      this.$refs.rangeDate.resetDate()
      this.queryParam.auditBeginDate = ''
      this.queryParam.auditEndDate = ''
      this.queryParam.bizNo = ''
      this.$refs.table.refresh(true)
    },
    //  导出
    handleExport () {
      const params = this.queryParam
      this.exportLoading = true
      // customerBundleExportDelay(params).then(res => {
      //   this.exportLoading = false
	  // downloadExcel(res, '单位应收应付')
      // })
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.$refs.table.refresh(true)
      this.resetSearchForm()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.$refs.table.refresh(true)
      this.resetSearchForm()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
  .companyCollectionPaymentDetail-cont{
    margin-bottom: 10px;
  }
</style>
