<template>
  <a-card :bordered="false">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :lg="6" :sm="12">
            <a-form-item label="结算时间:">
              <a-range-picker
                style="width:100%"
                :disabledDate="disabledDate"
                v-model="queryOrderDate"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :sm="12">
            <a-form-item label="结算单号">
              <a-input class="full-width" v-model="queryParam.settleNo" placeholder="请输入" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :sm="12">
            <a-button type="primary" @click="refresh">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider />
    <!-- 合计 -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div class="ftext" slot="message">共<span>{{ orderTotal }}</span>单，实收<span>￥{{ amountTotal }}</span>元</div>
    </a-alert>
    <!-- 列表 -->
    <div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        bordered
        :columns="columns"
        :data="loadData">
        <template slot="action" slot-scope="text, record">
          <!-- <a-icon type="eye" title="查看" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)" /> -->
          <a-button type="primary" @click="handleDetail(record)">详情</a-button>
        </template>
      </s-table>
    </div>
    <!-- 应收结算记录详情弹窗 -->
    <pay-settlement-records-details-modal :itemId="itemId" :openModalDetails="openModalDetails" @close="openModalDetails=false"></pay-settlement-records-details-modal>
  </a-card>
</template>

<script>
import moment from 'moment'
import {
  STable,
  VSelect
} from '@/components'
import {
  settlementRecordsList,
  settlementRecordsListTotal
} from '@/api/FinancialManagement'
import PaySettlementRecordsDetailsModal from './PaySettlementRecordsDetailsModal.vue'
export default {
  name: 'SettlementRecordsList',
  components: {
    VSelect,
    STable,
    PaySettlementRecordsDetailsModal
  },
  data () {
    return {
      loadData: parameter => {
        const searchData = Object.assign(parameter, this.queryParam)
        console.log(this.queryOrderDate, 'this.queryOrderDate')
        if (this.queryOrderDate && this.queryOrderDate.length) {
          searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
          searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
        } else {
          searchData.beginDate = ''
          searchData.endDate = ''
        }
        return settlementRecordsList(searchData).then(res => {
          const no = (res.data.pageNo - 1) * res.data.pageSize
          for (let i = 0; i < res.data.list.length; i++) {
            const _item = res.data.list[i]
            _item.no = no + i + 1
          }
          return res.data
        })
      },
      queryOrderDate: undefined,
      queryParam: {
        settleNo: '',
        beginDate: '',
        endDate: ''
      },
      orderTotal: 0, // 订单数量
      amountTotal: 0, // 实收总金额
      itemId: '', // 每条数据id
      openModalDetails: false, // 默认关闭详情弹窗
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: '60px',
        align: 'center'
      },
      {
        title: '结算单号',
        dataIndex: 'settleNo',
        width: '150px',
        align: 'center'
      },
      {
        title: '结算时间',
        dataIndex: 'settleDate',
        width: '150px',
        align: 'center'
      },
      {
        title: '结算订单数',
        dataIndex: 'orderNum',
        width: '150px',
        align: 'center',
        scopedSlots: {
          customRender: 'userInfo'
        }
      },
      {
        title: '结算金额',
        dataIndex: 'realAmount',
        align: 'center',
        width: '150px'
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: '100px',
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ]
    }
  },
  methods: {
    // 禁止不可选日期
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    // 查看详情
    handleDetail (record) {
      this.itemId = record.settleNo
      console.log(this.itemId)
      this.openModalDetails = true
    },
    // 查询
    refresh () {
      this.$refs.table.refresh(true)
      this.getListTotal()
    },
    // 重置
    resetSearchForm () {
      this.queryOrderDate = undefined
      this.queryParam = {
        settleNo: '',
        beginDate: '',
        endDate: ''
      }
      this.$refs.table.refresh(true)
      this.getListTotal()
    },
    // 合计
    getListTotal () {
      const params = {
        settleNo: this.queryParam.settleNo,
        beginDate: this.queryParam.beginDate,
        endDate: this.queryParam.endDate
      }
      if (this.queryOrderDate && this.queryOrderDate.length) {
        params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
        params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
      } else {
        params.beginDate = ''
        params.endDate = ''
      }
      //    params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
      //    params.endDate == null ? params.endDate = getDate.getToday().endtime : null
      settlementRecordsListTotal(params).then(res => {
        if (res.status == 200) {
          if (res.data) {
            this.orderTotal = res.data.orderNum || 0
            this.amountTotal = res.data.amount || 0
          } else {
            this.orderTotal = 0
            this.amountTotal = 0
          }
        }
      })
    }

  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.resetSearchForm()
    })
  }
}
</script>

<style scoped>
	.ftext span {
		color: #fa8c16;
		font-weight: bold;
	}
</style>
