<template>
  <div>
    <!-- 现金流 -->
    <PublicTable
      ref="tableRef"
      row-key="id"
      :loading="loading"
      :has-index="true"
      :need-select="false"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :events="events"
      :is-need-pagination="true"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      :has-operation="false"
      :operated-string="operatedString"
      :is-need-customcolumn="false"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @customColumnChange="handleCustomColumnChange"
      @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
      @handleSelectionChange="handleSelectionChange"
    />
  </div>
</template>

<script>
import { debounce } from '@/utils/index.js';
export default {
  isOpen: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: () => {},
  },
  data() {
    return {
      // table
      loading: false,
      tableData: [],
      tableInfo: {
        tableHeight: 340,
      },
      columns: [
        {
          prop: 'paymentDirectionStr',
          minWidth: '100px',
          align: 'center',
          label: '交易方向',
          render: (h, params) => {
            if (params.row.paymentDirection === 'BUY') { // 收
              return h('div', {
                style: {
                  display: 'inline-block',
                  color: 'rgb(0, 255, 0)',
                  width: '28px',
                  height: '22px',
                  lineHeight: '22px',
                  backgroundColor: 'rgb(0, 255, 0, 0.2)',
                  textAlign: 'center',
                },
              }, params.row?.paymentDirectionStr);
            } else {
              return h('div', {
                style: {
                  display: 'inline-block',
                  color: 'rgb(255, 0, 0)',
                  width: '28px',
                  height: '22px',
                  lineHeight: '22px',
                  backgroundColor: 'rgb(255, 0, 0, 0.2)',
                  textAlign: 'center',
                },
              }, params.row?.paymentDirectionStr);
            }
          },
        },
        {
          prop: 'ccy',
          minWidth: '60px',
          align: 'center',
          label: '货币',
        },
        {
          prop: 'nominalStr',
          minWidth: '140px',
          align: 'right',
          label: '金额',
          render: (h, params) => {
            if (params.row.paymentDirection === 'BUY') { // 收
              return h('div', {}, params.row?.nominalStr);
            } else {
              return h('div', {
                style: {
                  display: 'inline-block',
                  color: 'rgb(255, 0, 0)',
                  textAlign: 'center',
                },
              }, params.row?.amountStr);
            }
          },
        },
        {
          prop: 'paymentDateStr',
          minWidth: '110px',
          align: 'center',
          label: '支付日期',
        },
        {
          prop: 'startDateStr',
          minWidth: '110px',
          align: 'center',
          label: '开始日期',
        },
        {
          prop: 'endDateStr',
          minWidth: '110px',
          align: 'center',
          label: '结束日期',
        },
        {
          prop: 'cashflowTypeStr',
          minWidth: '81px',
          align: 'center',
          label: '类型',
        },
        {
          prop: 'cashflowStatusStr',
          minWidth: '89px',
          align: 'center',
          label: '交易状态',
          render: (h, params) => {
            if (params.row.cashflowStatus === 'FIXING') { // 确定
              return h('div', {
                style: {
                  display: 'inline-block',
                  color: 'rgb(32, 201, 139)',
                  textAlign: 'center',
                },
              }, `· ${params.row?.cashflowStatusStr}`);
            } else {
              return h('div', {
                style: {
                  display: 'inline-block',
                  color: 'rgb(106, 178, 255)',
                  textAlign: 'center',
                },
              }, `· ${params.row?.cashflowStatusStr}`);
            }
          },
        },
      ],
      operatedString: '',
      // pagenation
      pageNum: 1,
      pageSize: 10,
      total: 100,
    };
  },
  mounted() {
    this.$bus.$on('bujiselectRow', data => {
      if (data.dealId) {
        debounce(this.queryList(data));
      }
    });
  },
  methods: {
    queryList(val) {
      const data = {
        'cashFlow.dealId': val.dealId,
        'cashFlow.instrument': val.instrument,
        'cashFlow.dealStatus': val.dealStatus,
        // 'cashFlow.paymentDirection': 'BUY',
      };
      this.$apis.getdcsQueryCashFlowList(data).then(res => {
        this.tableData = res.data.result;
        // console.log('this.tableData', this.tableData);
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
    },
    handleCustomColumnChange(val) {
    },
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
