<i18n>
{
  "en": {
    "PaymentCard": {
      "type": "Type",
      "code": "Code",
      "DirectoriesTitle": "Directories",
      "regionCode": "region code",
      "KBK": "Kbk",
      "billFor": "bill for",
      "value": "Value",
      "totalAmount": "Total amount",
      "discountType": "Discount type",
      "discountSizePercent": "Discount size percent",
      "discountSize": "Discount size",
      "discountValue": "Discount value",
      "goal": "Goal",
      "applicationStatusForWaitPayment": "Application status for wait payment",
      "applicationStatusForCharge": "Application status for charge",
      "applicationStatusForRegister": "Application status for register",
      "expiryPlusDays": "Expiry plus Days",
      "tableRejectDocTitle": "eject Document",
      "name": "Name",
      "noProcessesResult": "No Processes directories",
      "confirmationMessage": "Are you sure you want to delete the directory?"
    }
  },
  "ru": {
    "PaymentCard": {
      "type": "Тип",
      "code": "Код",
      "DirectoriesTitle": "Платежи",
      "regionCode": "Код региона",
      "Kbk": "КБК платежа",
      "totalAmount": "Cумма платежа",
      "billFor": "Назначение платежа",
      "applicationStatusForCharge": "Cтатус для формирования начисления",
      "discountType": "Тип скидки",
      "discountSizePercent": "Условия оплаты со скидкой",
      "discountSize": "Условия оплаты с фиксированной суммой скидки",
      "discountValue": "Скидка",
      "goal": "Цель",
      "applicationStatusForWaitPayment": "Cтатус для ожидания оплаты начисления",
      "applicationStatusForRegister": "Cтатус для регистрации начисления",
      "expiryPlusDays": "Kоличество дней действия скидки",
      "noProcessesResult": "Платежи не найдены",
      "create": "Новый платеж",
      "confirmationMessage": "Вы уверены, что хотите удалить платеж?"
    }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'payments' && !loadingCard" class="q-pb-md">
    <q-card class="no-shadow q-gutter-y-md q-mx-md no-border-radius">
      <div
        class="q-gutter-y-md bg-white q-px-lg q-pb-md q-pt-sm q-mt-md q-mx-md rounded-borders"
      >
        <PaymentTable
          :common="common"
          :card="card"
          :payments="payments"
          :state-add-payment="stateAddPayment"
          :canEdit="canEdit"
          @commonModels="commonModels"
        />
      </div>
    </q-card>
  </div>
</template>

<script lang="ts">
import PaymentTable from './PaymentsTable.vue';
import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { BaseCardCommon, BaseCardCommonModels } from '@/interfaces';
import { Payment } from '@openapi/registry-service';
import { ServiceExpanded } from '@models/ServiceExpanded';

@Component({
  components: {
    PaymentTable,
  },
})
export default class Payments extends Vue {
  @Prop() common: BaseCardCommon;

  stateAddPayment = ['inProgress'];

  get loadingCard(): boolean {
    return (
      this.$store.getters['registryService/services/servicesLoading'] || false
    );
  }

  get card(): ServiceExpanded {
    return cloneDeep(
      this.$store.getters['registryService/services/servicesCard']
    );
  }

  get payments(): Payment[] {
    return get(this.card, 'paymentLinks', []);
  }

  get canEdit(): boolean {
    return this.$store.getters['registryService/services/canEdit'];
  }

  commonModels(val: BaseCardCommonModels) {
    this.$emit('commonModels', val);
  }
}
</script>
