<template>
  <page-layout>
    <div class="page-header-index-wide">
      <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--<a-col :md="6" :sm="8">-->
            <!--<a-form-item label="姓名">-->
              <!--<a-input placeholder="请输入姓名" v-model="queryParam.userName"></a-input>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
          <!--<a-col :md="6" :sm="8">-->
            <!--<a-form-item label="身份证号">-->
              <!--<a-input placeholder="请输入身份证号" v-model="queryParam.idcardNumber"></a-input>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
          <!--<template v-if="toggleSearchStatus">-->
            <a-col :md="6" :sm="8">
              <a-form-item label="状态">
                <j-dict-select-tag :triggerChange="false" v-model="queryParam.status" placeholder="请选择状态查询"
                                   dictCode="pay_status" v-decorator="['status', {}]"/>
              </a-form-item>
            </a-col>
          <!--</template>-->
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!--<a @click="handleToggleSearch" style="margin-left: 8px">-->
                <!--{{ toggleSearchStatus ? '收起' : '展开' }}-->
                <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--</a>-->
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <!--<div class="table-operator">-->
      <!--<a-button @click="handleReissue" type="primary" v-has="'payment:reissue'">补发</a-button>-->
      <!--<a-button @click="handleNoReissue" type="primary" v-has="'payment:reissue'">不补发</a-button>-->
    <!--</div>-->

    <!-- table区域-begin -->
    <div>
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
        <!--<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
        <!--selectedRowKeys.length }}</a>项-->
        <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--</div>-->

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="status" slot-scope="text, record">
            {{text}}
            <a type="link" v-if="record.status === 4" style="margin-left: 8px" @click="checkCause(record)"> 原因</a>
        </span>

      </a-table>
    </div>

    <HlgPaymentReissueModal ref="modalForm" @ok="modalFormOk"></HlgPaymentReissueModal>
    </a-card>
    </div>
  </page-layout>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import HlgPaymentReissueModal from './modules/HlgPaymentReissueModal'
  import { httpAction, getAction, putAction } from '@/api/manage'
  import PageLayout from '@/components/page/PageLayout'

  const statusMessage = {
    0: '待付款', 1: '付款中', 2: '付款成功', 3: '付款失败'
  }
  export default {
    name: 'HlgPaymentDetailList',
    mixins: [JeecgListMixin],
    components: {
      HlgPaymentReissueModal,
      PageLayout
    },
    data() {
      return {
        statusMessage,
        description: '付款明细表管理页面',
        // 表头
        columns: [
          {
            title:'姓名',
            align:"left",
            dataIndex: 'userName'
          },
          {
            title:'身份证号',
            align:"left",
            dataIndex: 'idcardNumber'
          },
          {
            title:'银行卡号',
            align:"left",
            dataIndex: 'cardNumber'
          },
          {
            title:'银行名称',
            align:"left",
            dataIndex: 'eacbnk',
            customRender: function(text, record) {
              return record.bnkflg === 'Y' ? '招商银行' : text
            }
          },
          {
            title:'开户地',
            align:"left",
            dataIndex: 'rcveaa',
            customRender: function(text, record) {
              return text ? text : '--'
            }
          },
          {
            title:'支付状态',
            align:"left",
            dataIndex: 'status_dictText',
            scopedSlots: { customRender: 'status' }
          },
          {
            title:'付款金额',
            align:"left",
            dataIndex: 'payment'
          },
          {
            title:'到账金额',
            align:"left",
            dataIndex: 'netPayment'
          },
          {
            title: '返回结果时间',
            align: "left",
            dataIndex: 'paymentResultTime',
            customRender: function(text, record) {
              return text ? text : '--'
            }
          }
        ],
        url: {
          list: '/hlgpayment/hlgPaymentDetail/list',
          delete: '/hlgpayment/hlgPaymentDetail/delete',
          deleteBatch: '/hlgpayment/hlgPaymentDetail/deleteBatch',
          exportXlsUrl: '/hlgpayment/hlgPaymentDetail/exportXls',
          importExcelUrl: 'hlgpayment/hlgPaymentDetail/importExcel',
          noSupplementPayment: '/hlgpayment/hlgPayment/handNoSupplementPayment'
        },
        dictOptions: {}
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    mounted() {
      if (this.$route.query.record) {
        console.log(JSON.parse(this.$route.query.record))
      }
    },
    methods: {
      initDictConfig() {
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        this.paymentId = this.$route.query.paymentId;
        var params = this.getQueryParams()//查询条件
        params.paymentId = this.paymentId;
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },
      checkCause(record) {
        this.$error({
          title: '失败原因',
          content: record.failureReason,
          okText: '确定',
          centered: true
        })
      },
      getCheckboxProps: (record) => ({
        props: {
          disabled: record.status !== 3 // Column configuration not to be checked
        }
      }),
      handleReissue() {
        if (this.selectionRows.length) {
          this.$refs.modalForm.edit(this.selectionRows[0])
          this.$refs.modalForm.title = '补发'
          this.$refs.modalForm.disableSubmit = false
        } else {
          this.$message.warning('请选择付款单')
        }
      },
      //不补发
      handleNoReissue(){
        if (this.selectionRows.length) {
          let that = this
          const modal = that.$confirm({
            title: '提示',
            closable: true,
            keyboard: false,
            maskClosable: false,
            content: '不补发操作将把对应金额返还至账户余额',
            okText: '确定',
            cancelText: '取消',
            onOk: function() {
              let httpurl = that.url.noSupplementPayment;
              let method = 'put';
              let formData = Object.assign({}, that.selectionRows[0])
              console.log('表单提交数据', formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.onClearSelected();
                  that.loadData(1)
                } else {
                  that.$message.warning(res.message)
                }
              })
            },
            onCancel(e) {
              modal.destroy()
            }
          })
        } else {
          this.$message.warning('请选择付款单')
        }
      },
      modalFormOk(){
        this.loadData(1);
        this.onClearSelected();
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>