<template>
  <el-container style="background: white; height: 100% !important;">
    <el-main style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
      <el-row :gutter="24">
        <template v-for="(value, key) in isAddTypePay">
          <el-col v-if="value.isVisible" :key="key" :span="12" style="padding-left: 5px; padding-right: 5px;">
            <el-card :body-style="{ padding: '0px' }">
              <el-row>
                <el-col :span="6" style="padding: 10px">
                  <img src="@/image/ADempiere/pos/no-image.jpg" fit="contain" class="image">
                </el-col>
                <el-col :span="18">
                  <el-button
                    type="text"
                    icon="el-icon-close"
                    style="float: right; margin-right: 10px; color: red; padding-top: 10px;"
                    @click="deleteCollect(key)"
                  />
                  <div style="padding-right: 10px; padding-top: 10%;">
                    <div class="top clearfix">
                      <span>{{ value.displayTenderType }}</span>
                    </div>
                    <div class="bottom clearfix" style="margin-top: 0px !important!">
                      <el-button
                        type="text"
                        class="button"
                        style="color: rgb(50, 54, 58); font-size: 13px; text-align: left; float: unset; padding-top: 5px;"
                      >
                        {{ value.referenceNo }}
                      </el-button>

                      <el-button
                        v-if="!isEmptyValue(value.dateTrx)"
                        type="text"
                        class="button"
                        style="color: rgb(50, 54, 58); font-size: 13px; text-align: left; float: unset; padding-top: 5px;"
                      >
                        {{ formatDate(value.dateTrx) }}
                      </el-button>

                      <div slot="header" class="clearfix">
                        <p class="total" :style="value.currency.id === currency.id ? 'padding-top: 5%;' : ''">
                          <b style="float: right; padding-bottom: 10px">
                            {{ formatPrice(value.payAmt, currency.iSOCode) }}
                          </b>
                        </p>
                        <br>
                        <p v-if="value.currency.id !== currency.id" class="total">
                          <b style="float: right; padding-bottom: 10px">
                            {{ formatPrice(value.quantityCahs, value.currency.currency) }}
                          </b>
                        </p>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </template>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {
  formatDate,
  formatPrice
} from '@/utils/ADempiere/valueFormat.js'

export default {
  name: 'TypeCollection',
  props: {
    isAddTypePay: {
      type: Array,
      default: undefined
    },
    currency: {
      type: Object,
      default: undefined
    }
  },
  methods: {
    formatDate,
    formatPrice,
    getImageFromTenderType(typePay) {
      // A: Direct Deposit: ACH Automatic Clearing House
      // C: Credit Card:
      // D: Direct Debit:
      // K: Check:
      // M: Credit Memo:
      // P: Mobile Payment Interbank:
      // T: Account:
      // X: Cash:
      // Z: Zelle:
      let image = ''
      switch (typePay) {
        case 'A':
          image = 'DirectDeposit2'
          break
        case 'M':
          image = 'CreditMemo'
          break
        case 'K':
          image = 'check2'
          break
        case 'X':
          image = 'cash'
          break
        case 'Z':
          image = 'zelle'
          break
        case 'T':
          image = 'Account'
          break
        case 'P':
          image = 'paymobile'
          break
        case 'C':
          image = 'CreditCard'
          break
        case 'D':
          image = 'DirectDebit'
          break
      }
      return require('@/image/' + image + '.jpg')
    },
    deleteCollect(key) {
      this.$store.dispatch('deleteCollectBox', key)
    }
  }
}
</script>

<style scoped>
  .el-image {
    display: inline-block;
    overflow: hidden;
  }
  .el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgb(245, 247, 250);
  }
  .el-card__body {
    padding-top: 0px !important;
    padding-right: 0px!important;
    padding-bottom: 20px;
    padding-left: 10px!important;
    height: 100%!important;
  }

  .bottom {
    margin-top: 0px!important;
    line-height: 1px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    height: 9vh;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .el-header {
    background: 'white';
    color: #333;
    line-height: 10px;
  }

  .el-aside {
    color: #333;
  }
  .el-row {
    margin: 0px!important;
  }
</style>
