<template>
  <div>
    <Form
      ref="reimDetTableForm"
      :model="tableData"
      class="expand-table"
    >
      <Table
        ref="reimDetTable"
        :columns="expandColumns"
        :data="applyPayExpandList"
        @on-select-all="onSelectAll"
        @on-select="onSelect"
        @on-select-cancel="onSelectCannel"
      ></Table>
    </Form>
  </div>
</template>

<script>
import Server from './server.js';
import { mapState, mapGetters, mapMutations } from 'vuex';
import accounting from 'accounting';
const server = new Server();
let vm;
export default {
  components: {},
  props: {
    applyPayExpandList: {
      type: Array,
      default() {
        return [];
      }
    },
    row: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      server: server,
      tableData: [],
      expandColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60,
          align: 'left'
        },
        {
          title: '付款方式',
          align: 'left',
          key: 'paymentMode',
          width: 170,
          render: (h, params) => {
            let text = '';
            for (let i = 0; i < vm.valueSet.PAYMENT_MODE.length; i++) {
              if (vm.valueSet.PAYMENT_MODE[i].value == params.row.paymentMode) {
                text = vm.valueSet.PAYMENT_MODE[i].label;
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '实际付款公司',
          align: 'left',
          key: 'ouName',
          width: 120
        },
        {
          title: '银行账户名称',
          align: 'left',
          key: 'accountName',
          width: 120
        },
        {
          title: '银行账号',
          align: 'left',
          key: 'accountNo',
          width: 120
        },
        {
          title: '金额',
          align: 'right',
          key: 'amount',
          width: 120,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: accounting.formatNumber(params.row.amount, 2)
                }
              },
              accounting.formatNumber(params.row.amount, 2)
            );
          }
        },
        {
          title: '资金计划',
          align: 'left',
          key: 'fundPlan',
          width: 120,
          render: (h, params) => {
            let text = '';
            for (let i = 0; i < vm.valueSet.capitalPlan.length; i++) {
              if (vm.valueSet.capitalPlan[i].value == params.row.fundPlan) {
                text = vm.valueSet.capitalPlan[i].label;
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '汇款速度',
          align: 'left',
          key: 'remittanceSpeed',
          width: 120,
          render: (h, params) => {
            let text = '';
            for (let i = 0; i < vm.valueSet.remittanceSpeed.length; i++) {
              if (vm.valueSet.remittanceSpeed[i].value == params.row.remittanceSpeed) {
                text = vm.valueSet.remittanceSpeed[i].label;
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '摘要',
          align: 'left',
          key: 'summary',
          width: 120
        },
        {
          title: '用途',
          align: 'left',
          key: 'purpose',
          width: 120
        }
      ]
    };
  },
  computed: {
    ...mapState('createPaymentPreparation', {
      valueSet: state => state.valueSet
    })
  },
  watch: {
  },
  mounted: function() {
    vm = this;
    const self = this;
    self.server
      .queryPaymentInfo(
        { payRequestLineId: this.row.payRequestLineId }
      )
      .then(response => {
        if (response.stateCode == -1) {
          this.$Message.success(response.msg);
        } else {
          this.applyPayExpandList = response;
        }
      });
  },
  methods: {
  }
};
</script>
<style>
/* .expand-table {
  margin-left: 20px;
} */
</style>
