<template>
  <div class="container" v-loading="loading">
    <PageHeader :title="$t('field.paymentApproval')">
      <template #icon>
        <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh"></i>
      </template>
    </PageHeader>

    <div class="content" >
      <div class="item" v-for="(item, index) in showData" :key="index">
        <div class="top">
          <div class="num-wrap">
            <i class="el-icon-s-order"></i>
            <span>{{ item.dealsId }}</span>
          </div>
          <div class="spend-time">5 month ago</div>
        </div>
        <div class="bank-wrap">
          <span class="currency">USD</span>
          <span class="bank">{{ item.cpty }}</span>
        </div>
        <div class="date">{{ formatterDate(item.valueDate) }}</div>
      </div>
      <!-- <div class="boxItem" v-for="(item, index) in showData" :key="index">
        <div class="title">
          <div class="type">
            <div>{{ item.dealsId }}</div>
          </div>
          <div>{{ item.dealType }}</div>
        </div>

        <div class="content">
          <div class="ccy">{{ item.cpty }}</div>
          <div>{{ formatterDate(item.valueDate) }}</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
import { formatterDate } from '../../common/formatterFun.js'
export default {
  name: 'PaymentApproval',
  components: {
    PageHeader
  },
  data() {
    return {
      showData: [],

      loading: true,

      formatterDate
    }
  },

  mounted() {
    this.getShowData();
  },

  methods: {
    async handleRefresh() {
      await this.getShowData()
    },

    async getShowData() {
      const queryParam = {
        'queryParam.pageLimit': 15,
        'queryParam.pageStart': 1,
        'queryParam.sql': `and E.CANDIDATE4_ in('2') and regexp_like(E.BUSSINESID_,'^[A-Z].*')and E.CANDIDATE1_ = 'BANKZB'`
      }
      this.loading = true;
      const res = await this.$apis.queryPaymentFlowAuditList(queryParam);
      this.loading = false;
      if (res.success) {
        this.showData = res.data?.result?.datals?.map((item) => {
          const infoObj = {}
          const arr = item.startDescription.split(',');
          infoObj.dealsId = arr[0].split('=')[1]
          infoObj.amount = arr[1].split('=')[1]
          infoObj.cpty = item.cptyName
          infoObj.valueDate = arr[3].split('=')[1]
          infoObj.dealType = arr[4].split('=')[1]
          return infoObj
        })
      }
    }
  },
}
</script>

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

.content {
  margin-top: 10px;

  .item {
    border-bottom: 1px solid var(--splitLine);

    &:last-child {
      border-bottom: 0px;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--color-70);
      font-size: 12px;
      height: 20px;

      i {
        color: var(--blue-60);
      }
    }

    .bank-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      color: var(--color-90);
      height: 20px;
    }

    .date {
      display: flex;
      justify-content: end;
      color: var(--color-70);
      font-size: 12px;
      height: 20px;
    }
  }
}
</style>