<template>
  <centered-1280-box class="Restriction">
    <p class="Restriction__Title">Временные меры</p>
    <div class="Restriction__Table">
      <template v-for="restriction in data.restrictions">
        <div
          v-if="restriction.restrictionDocumentItems.length"
          :key="`row_${restriction.subpoenaId}`"
          class="Restriction__Row"
        >
          <div class="Restriction__Subpoena">
            {{ subpoenaTitle(restriction) }}
          </div>
          <div
            @click="expandSubpoenaField(restriction.subpoenaId)"
            :class="[
              'Restriction__Count',
              {
                Restriction__Count_Active: expandedSubpoenaFields.includes(
                  restriction.subpoenaId
                ),
              },
            ]"
          >
            <span>
              {{
                $tc(
                  'restriction.measure',
                  restriction.restrictionDocumentItems.length
                )
              }}
              <q-icon
                :name="
                  expandedSubpoenaFields.includes(restriction.subpoenaId)
                    ? 'pgs-shevron-up-off'
                    : 'pgs-shevron-down-off'
                "
                size="15px"
              />
            </span>
          </div>
        </div>
        <div
          :key="`expand_${restriction.subpoenaId}`"
          class="Restriction__ExpandTable"
          v-show="expandedSubpoenaFields.includes(restriction.subpoenaId)"
        >
          <div class="Restriction__ExpandHeader">
            <div class="Restriction__ExpandHeaderTitle">
              ВК применивший меру
            </div>
            <div class="Restriction__ExpandHeaderTitle">Наименование меры</div>
            <div class="Restriction__ExpandHeaderTitle">Дата введения</div>
            <div class="Restriction__ExpandHeaderTitle">Дата снятия</div>
            <div class="Restriction__ExpandHeaderTitle">Статус</div>
            <div></div>
          </div>
          <q-table
            grid
            :data="restriction.restrictionDocumentItems"
            :hide-pagination="true"
            row-key="id"
            :expanded.sync="expandedRestriction"
            :rows-per-page-options="[0]"
          >
            <template v-slot:item="props">
              <div
                :key="`row_${props.row.id}`"
                :class="[
                  'Restriction__ExpandRow',
                  { Restriction__ExpandRow_Open: props.expand },
                ]"
              >
                <div class="Restriction__ExpandRowField">
                  {{ props.row.departmentName }}
                </div>
                <div class="Restriction__ExpandRowField">
                  {{ props.row.restrictionName }}
                </div>
                <div
                  class="Restriction__ExpandRowField Restriction__ExpandRowField_Date"
                >
                  {{ formatDate(props.row.appliedDate, 'DD.MM.YYYY') || '-' }}
                </div>
                <div
                  class="Restriction__ExpandRowField Restriction__ExpandRowField_Date"
                >
                  {{ formatDate(props.row.cancelDate, 'DD.MM.YYYY') || '-' }}
                </div>
                <div class="Restriction__ExpandRowField">
                  <status-box :status="checkAvailableStatus(props.row)" borderless />
                </div>
                <div
                  @click="props.expand = !props.expand"
                  class="Restriction__ExpandRowField Restriction__ExpandRowField_Action"
                >
                  <span>
                    {{
                      $tc(
                        'restriction.decision',
                        props.row.restrictionDocuments.length
                      )
                    }}
                    <q-icon
                      :name="
                        props.expand
                          ? 'pgs-shevron-up-off'
                          : 'pgs-shevron-down-off'
                      "
                      size="15px"
                    />
                  </span>
                </div>
              </div>
              <div
                :class="[
                  'Restriction__ExpandRowInfo',
                  { Restriction__ExpandRowInfo_Open: props.expand },
                ]"
                v-if="props.row.humanReadableId"
              >
                <data-block
                  :form-data="{
                    label: 'ИД меры',
                    value: props.row.humanReadableId,
                  }"
                  noPadding
                />
                <div
                  class="Restriction__ExpandRowInfoNotify"
                  v-if="props.row.notificationText"
                >
                  <q-icon name="pgs-send" size="25px" color="primary" />
                  Уведомление в МВД отправлено
                </div>
              </div>
              <div
                v-if="props.expand"
                :class="[
                  'Restriction__ExpandDecision',
                  { Restriction__ExpandDecision_Open: props.expand },
                ]"
              >
                <div class="Restriction__ExpandDecisionHeader">
                  <div class="Restriction__ExpandDecisionHeaderTitle">
                    Наименование
                  </div>
                  <div class="Restriction__ExpandDecisionHeaderTitle">
                    Номер решения
                  </div>
                  <div class="Restriction__ExpandDecisionHeaderTitle">
                    Дата решения
                  </div>
                  <div class="Restriction__ExpandDecisionHeaderTitle">
                    Причина применения
                  </div>
                </div>
                <q-table
                  grid
                  :data="props.row.restrictionDocuments"
                  :hide-pagination="true"
                  row-key="id"
                  :rows-per-page-options="[0]"
                >
                  <template v-slot:item="props">
                    <div
                      :key="`row_${props.row.id}`"
                      class="Restriction__ExpandDecisionRow"
                    >
                      <div class="Restriction__ExpandDecisionRowField">
                        {{ decisionTypeReason[props.row.typeDocument] || '' }}
                      </div>
                      <div class="Restriction__ExpandDecisionRowField">
                        {{ props.row.decisionNumber }}
                      </div>
                      <div class="Restriction__ExpandDecisionRowField">
                        {{
                          formatDate(props.row.decisionDate, 'DD.MM.YYYY') ||
                          '-'
                        }}
                      </div>
                      <div class="Restriction__ExpandDecisionRowField">
                        {{ props.row.decisionReason }}
                      </div>
                    </div>
                  </template>
                </q-table>
              </div>
            </template>
          </q-table>
        </div>
      </template>
    </div>
  </centered-1280-box>
</template>
<i18n>
{
  "ru": {
    "restriction": {
      "measure": "| {n} мера ограничения | {n} меры ограничения | {n} мер ограничений",
      "decision": "| {n} решение | {n} решения | {n} решений"
    }
  }
}
</i18n>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {
  RestrictionItemV1,
  RestrictionsV1,
  SubpoenaByRecruitResponseV6,
} from '@/recruits/openapi/subpoena-service';
import get from 'lodash/get';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import dataBlock from '@components/cards/statements/components/dataBlock.vue';
import Centered1280Box from '@/recruits/components/common/centered-1280-box.vue';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';
import { formatDate } from '@/recruits/utils';

@Component({
  methods: {
    get,
    fetchDocumentAttachment,
    formatDate,
  },
  components: {
    Centered1280Box,
    StatusBox,
    dataBlock,
  },
})
export default class TemporaryMeasuresTab extends Vue {
  get: typeof get;

  @Prop()
  readonly data: SubpoenaByRecruitResponseV6;

  expandSubpoena: string[] = [];
  expandedRestriction: string[] = [];
  decisionTypeReason = {
    CREATE: 'Решение о применении',
    CANCEL: 'Решение об отмене',
  };

  get expandedSubpoenaFields() {
    return this.expandSubpoena;
  }

  checkAvailableStatus(row: RestrictionItemV1) {
    return row?.statusCanceled || row?.statusApplied;
  }

  subpoenaTitle(restriction: RestrictionsV1) {
    return `Повестка ${restriction.subpoenaSeries}
    ${restriction.subpoenaNumber} от
    ${formatDate(restriction.subpoenaCreateDate as string, 'DD.MM.YYYY')}`;
  }

  expandSubpoenaField(id: string) {
    if (this.expandSubpoena.includes(id)) {
      this.expandSubpoena = this.expandSubpoena.filter((sub) => sub !== id);
    } else {
      this.expandSubpoena.push(id);
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/extends';

.Restriction {
  font-family: 'Golos text', sans-serif;
  font-style: normal;
  &__Row {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
    padding: 5px 0 0 0;
  }
  &__Title {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);
    padding-bottom: 12px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  }

  &__Count {
    padding: 0 10px;
    background: rgba(1, 94, 152, 0.2);
    color: rgba(1, 94, 152, 0.8);
    justify-self: end;
    cursor: pointer;
    font-size: 14px;
    &_Active {
      background: rgba(1, 72, 116, 0.11);
      color: rgba(1, 94, 152, 0.8);
    }
  }
  &__ExpandHeader {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 30% 10% 10% 10% 10%;
    color: rgba(2, 12, 18, 0.58);
    overflow: hidden;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  &__ExpandHeaderTitle {
    &:not(:nth-last-of-type(-n + 1)) {
      display: flex;
      justify-content: center;
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
  }
  &__ExpandRow {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 30% 10% 10% 10% 10%;
    background: #fff;
    margin: 2px 0;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    box-shadow: none;
    &_Open {
      margin: 0;
      border-color: rgba(1, 94, 152, 0.5);
      border-bottom: none;
    }
  }
  &__ExpandRowField {
    align-content: center;
    &:not(:nth-last-of-type(-n + 2)) {
      padding: 5px;
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
    &_Date {
      text-align: center;
    }
    &_Action {
      cursor: pointer;
      text-align: center;
    }
  }
  &__ExpandRowInfo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 5px;
    margin: -3px 0 0px 0;
    background: #fff;
    border: 1px solid rgba(1, 72, 116, 0.11);

    &_Open {
      border-color: rgba(1, 94, 152, 0.5);
      border-bottom: none;
      margin: 0;
    }
  }
  &__ExpandRowInfoNotify {
    display: flex;
    align-items: center;
  }
  &__ExpandDecision {
    width: 100%;
    border: 1px solid rgba(1, 72, 116, 0.11);

    &_Open {
      border-color: rgba(1, 94, 152, 0.5);
      border-top-right-radius: 0;
      border-top-left-radius: 0;
    }
  }
  &__ExpandDecisionHeader {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 15% 15% 40%;
    color: rgba(2, 12, 18, 0.58);
    overflow: hidden;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    padding-top: 5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  &__ExpandDecisionHeaderTitle {
    padding: 4px;
    &:not(:last-child) {
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
  }
  &__ExpandDecisionRow {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 15% 15% 40%;
    background: #fff;
    border-top: 1px solid rgba(1, 72, 116, 0.11);
    box-shadow: none;
  }
  &__ExpandDecisionRowField {
    align-content: center;
    padding: 4px;
    &:not(:last-child) {
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
  }
}
</style>
