<template>
  <a-card :bordered="false">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="refresh">
        <a-row :gutter="48">
          <a-col :lg="8" :sm="12">
            <a-form-item label="提现时间" :label-col="{ span:4 }" :wrapper-col="{ span:16}">
              <a-range-picker
                id="PaySettlementRecords-queryOrderDate"
                :disabledDate="disabledDate"
                style="width: 100%;"
                v-model="queryOrderDate"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :sm="12">
            <a-button type="primary" @click="refresh" id="PaySettlementRecords-refresh">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetSearchForm" id="PaySettlementRecords-resetSearchForm">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 合计 -->
    <div class="ftext" >
      <a-button class="btn-cont" type="primary" @click="openModal" id="PaySettlementRecords-refresh">申请提现</a-button>
      可提现余额：<span>{{ amountTotal }}</span>元</div>
    <!-- 列表 -->
    <div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        bordered
        :columns="columns"
        :data="loadData">
      </s-table>
    </div>
    <!-- 申请提现弹窗 -->
    <cashOut-modal :openCashOutModal="openCashOutModal" @close="openCashOutModal=false" @refresh="refresh"></cashOut-modal>
  </a-card>
</template>

<script>
import moment from 'moment'
import {
  STable,
  VSelect
} from '@/components'
import cashOutModal from './CashOutModal.vue'
import {
  settlementRecordsList,
  settlementRecordsListTotal
} from '@/api/FinancialManagement'
export default {
  name: 'CashOutManagement',
  components: {
    VSelect,
    STable,
    cashOutModal
  },
  data () {
    return {
      openCashOutModal: false, // 是否打开申请提现弹窗
      queryOrderDate: undefined,
      storeList: [
        { id: 11, name: '常青二路店' },
        { id: 112, name: '西部大道店' },
        { id: 114, name: '渭滨路店' },
        { id: 115, name: '未央店' },
        { id: 116, name: '凤城八路店' }
      ],
      queryParam: {
        storeName: '', // 客户名称
        partName: '', // 配件名称
        status: '', // 分账状态
        settleNo: '',
        beginDate: '',
        endDate: ''
      },
      orderTotal: 0, // 订单数量
      amountTotal: 0, // 实收总金额
      itemId: '', // 每条数据id
      settleId: '',
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: 60,
        align: 'center'
      },
      {
        title: '提现时间',
        dataIndex: 'settleDate',
        width: 200,
        align: 'center'
      },
      {
        title: '提现单号',
        dataIndex: 'settleNo',
        width: 150,
        align: 'center'
      },
      {
        title: '申请提现金额',
        dataIndex: 'orderNum',
        width: 150,
        align: 'center',
        scopedSlots: {
          customRender: 'userInfo'
        }
      },
      {
        title: '开户名',
        dataIndex: 'realAmount',
        align: 'center',
        width: 150
      },
      {
        title: '银行卡号',
        dataIndex: 'code',
        align: 'center',
        width: 150
      },
      {
        title: '状态',
        dataIndex: 'status',
        align: 'center',
        width: 150
      },
      {
        title: '备注',
        dataIndex: 'remarks',
        width: 100,
        align: 'center',
        customRender: (text) => {
          return text || '--'
        }
      }
      ],
      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
        })
      }
    }
  },
  methods: {
    // 禁止不可选日期
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    // 查询
    refresh () {
      this.$refs.table.refresh(true)
      this.getListTotal()
    },
    // 重置
    resetSearchForm () {
      this.queryOrderDate = null
      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 = ''
      }
      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
          }
        }
      })
    },
    // 打开提现弹窗
    openModal () {
      this.openCashOutModal = true
    }
    //

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

<style scoped lang="less">
  .ftext{
    margin-bottom: 15px;
    font-size: 18px;
    .btn-cont{
      margin-right: 20px;
    }
  }
	.ftext span {
		color: #fa8c16;
		font-weight: bold;
	}
</style>
