<template>
  <div>
    <div class="text-right">
      <div class="flex inline items-center">
        <div>
          {{ this.$t('statements.MezhvedsCard.allMZ') }}
        </div>
        <q-toggle
          v-model="onlyNewReq"
          class="no-box-shadow"
          name="music_active"
        />
        <div>
          {{ this.$t('statements.MezhvedsCard.actualMZ') }}
        </div>
      </div>
    </div>
    <div v-for="first in tableData" class="Cross-Main">
      <span class="Cross-MainHeader">{{ first.name }}</span>
      <br>
      <br>
      <div v-for="second in first.children" class="Cross-Second">
        <span class="Cross-SecondHeader">{{ second.name }}</span>
        <div class="Cross-Third">
          <div
            v-for="third in second.children"
            class="Cross-Data" :class="{ outdated: third.hasOwnProperty('outdated') }"
            v-if="(onlyNewReq && !third.hasOwnProperty('outdated')) || (!onlyNewReq)"
          >
            <div>{{ third.subject }}</div>
            <div>{{ (third.sendDate && convertDateFromBackendFormat(third.sendDate)) || '' }}</div>
            <div>{{ (third.receiveDate && convertDateFromBackendFormat(third.receiveDate)) || '' }}</div>
            <div>
              <q-icon
                v-if="third.hasOwnProperty('status')"
                :name="get(third.status, 'name')"
                :color="get(third.status, 'color')"
                size="24px"
                style="margin-right: 6px"
              >
                <q-tooltip>
                  {{ get(third.status, 'tooltip') }}
                </q-tooltip>
              </q-icon>
              <q-btn
                v-if="third.id"
                :disable="third.status.namePerson === 'draft' || hideButton"
                target="_blank"
                size="sm"
                style="background: #d9e2eb; color: #222"
                @click="goTo('request', 'inter_requests', third.id, $event)"
              >
                Открыть
              </q-btn>
            </div>
          </div>
        </div>
      </div>
      <br>
      <br>
      <br>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Cross {
  &-MainHeader {
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);
  }
  &-Second {
    display: flex;
    align-items: flex-start;
  }
  &-SecondHeader {
    flex-basis: 30%;
    margin-right: 10px;
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(2, 12, 18, 0.58);
  }
  &-Third {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.9);

  }
  &-Data {
    background: #FFFFFF;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 4px;
    flex-basis: 70%;
    display: grid;
    height: auto;
    grid-template-columns: 3fr repeat(3, 1fr);
    padding: 2px 8px;
    & > div {
      display: flex;
      align-items: center;
      &:last-child {
        justify-content: flex-end;
      }
    }
    &.outdated {
      color: rgba(2, 12, 18, 0.38);
    }
  }
}
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import get from 'lodash/get';
import { convertDateFromBackendFormat } from '@utils/format-date';
import { pushRoute } from '@utils/routes';

declare interface Column {
  align: string;
  field: string;
  label: string;
  name: string;
  sortable: boolean;
}

declare interface Data {
  children: any[];
  key: string;
  name: string;
  status: string;
}

@Component({
  methods: {
    get,
    convertDateFromBackendFormat,
  },
})
export default class ExpandingTable extends Vue {
  @Prop({ required: true }) columns: Column[] | undefined;
  @Prop({ required: true, default: [] }) data: Data[];
  @Prop({ required: true, default: 'interDepartmentReq' }) source: string;

  private pagination = {
    rowsPerPage: 0,
  };

  private onlyNewReq = true;
  private get hideButton(): boolean {
    return !!(this.source === 'paymentsReceivedReq');
  }

  private get tableColumns(): Array<Column> {
    return this.columns || [];
  }

  private get tableData(): Array<Data> {
    return this.data;
  }

  goTo(tab: string, cardName: string, id: string, ev: PointerEvent) {
    pushRoute(
      this.$router,
      {
        name: 'cards',
        params: {
          id: id || this.$route.params.id,
          path: cardName || this.$route.params.name,
        },
        query: {
          components: this.$store.getters[
            'cardComponents/interRequests/components'
          ],
          active: tab,
          statement: this.$store.getters['utils/cards/models'].statements.id,
        },
      },
      ev.metaKey || ev.ctrlKey
    );
  }
}
</script>
