<template>
  <div class="container" v-loading="loading">
    <PageHeader :title="$t('field.settleReport')">
      <el-radio-group v-model="reportType" border size="medium" @change="$refs.table.loadTableData()">
        <el-radio-button v-for="label in labels" :key="label" :label="label"></el-radio-button>
      </el-radio-group>
      <el-select v-model="status" clearable :placeholder="$t('field.pleaseChoose')" style="width: 90px;margin-left: 8px"
        @change="$refs.table.loadTableData()">
        <el-option v-for="item in statusList" :key="item.code" :label="$t(`field.${item.code}`)" :value="item.code">
        </el-option>
      </el-select>
      <template #icon>
        <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh"></i>
      </template>
    </PageHeader>

    <RcsTable style="margin-top: 8px"  ref="table" :columns="columns" :getTableData="getTableData">
      <template v-slot:default="scope">
        <a style="color: #006CFF" @click="handleClick(scope.row)">操作</a>
      </template>
    </RcsTable>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
import RcsTable from '../../components/RcsTable.vue'
import { formatterDate, onOpenModal } from '../../common/formatterFun.js'
import { statusType } from '../../common/dataSource.js'
export default {
  name: 'settleReport',
  components: {
    PageHeader,
    RcsTable
  },
  data() {
    return {
      statusColorMap: {
        '生效': 'var(--green-50)',
        '待审核': 'var(--orange-60)',
        '失效': 'var(--red-60)'
      },
      columns: [
        {
          prop: 'dealsId',
          minWidth: '10%',
          label: this.$t('field.dealsId'),
          formatter: (row, column, cellValue, index) => {
            return <a style={{ color: 'var(--blue-70)' }} onClick={() => this.onOpenModal(row.instrumentGrpStr, row.dealsId, row.instrumentGrp)}>{row.dealsId}</a>;
          }
        },
        {
          prop: 'paymentFlowId',
          minWidth: '10%',
          label: this.$t('field.paymentFlowId'),
        },
        {
          prop: 'setTypeName',
          minWidth: '7%',
          label: this.$t('field.reportType'),
        },
        {
          prop: 'mtType',
          minWidth: '7%',
          label: this.$t('field.mtType'),
        },
        {
          prop: 'pdocId',
          minWidth: '13%',
          label: this.$t('field.pdocId'),
          tip: true
        },
        {
          prop: 'cptyCodeStr',
          minWidth: '20%',
          label: this.$t('field.cpty'),
          tip: true
        },
        {
          prop: 'instrumentGrpStr',
          minWidth: '9%',
          label: this.$t('field.product'),
        },
        {
          prop: 'normalDealStatusName',
          minWidth: '7%',
          label: this.$t('field.status'),
          formatter: (row) => {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }} >
                <span style={{ background: this.statusColorMap[row.normalDealStatusName], display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', marginRight: '4px' }} ></span>
                <span style={{ color: this.statusColorMap[row.normalDealStatusName] }} >{row.normalDealStatusName}</span>
              </div>
            )
          }
        },
        {
          prop: 'sendDay',
          minWidth: '10%',
          label: this.$t('field.sendDate'),
          formatter: (row) => formatterDate(row.sendDay)
        },
        {
          prop: 'sitesCodeStr',
          minWidth: '7%',
          label: this.$t('field.sitesCodeStr')
        }
      ],

      labels: ['SWIFT', 'CNAPS'], // tab标签
      reportType: 'SWIFT', // 默认tab标签

      statusList: [],
      status: '',

      loading: true,

      onOpenModal
    };
  },
  async mounted() {
    this.statusList = statusType
    this.$refs.table.loadTableData()
  },
  methods: {

    async handleRefresh() {
      await this.$refs.table.loadTableData()
    },

    async getTableData() {
      const queryParam = {
        'queryParam.branchCode': 'BANKZB',
        'queryParam.normalDealStatus': this.status,
        'queryParam.setType': this.reportType === 'SWIFT' ? 1 : 2,
        'queryParam.pageLimit': 50,
        'queryParam.pageStart': 1,
      }
      this.loading = true
      const res = await this.$apis.queryPaymentFlowProcessList(queryParam)
      this.loading = false
      if (res.success) {
        return {
          data: res?.data?.result?.datals,
          total: res?.data?.result?.total
        }
      }
    },

    handleClick(row) {
      console.log(row);
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  padding: 8px 9px;
}
</style>
