<template>
  <div class="CallListTable">
    <div
      :class="[
        'CallListTable',
        'CallListTable__Headers',
        showCheckBoxes ? 'CallListTable_Row' : 'CallListTable_HideCheckbox',
      ]"
    >
      <div
        class="CallListTable__HeaderTitle CallListTable__HeaderCheckBox"
        v-if="showCheckBoxes"
      >
        <input
          class="LabelSelect__Select"
          id="massSelect"
          type="checkbox"
          :disabled="disabledMassCheckbox"
          v-model="massSelected"
        />
        <label
          for="massSelect"
          :class="[
            'LabelSelect__Label',
            {
              CallListTable__HeaderLabelCheckBox_Disabled: disabledMassCheckbox,
            },
          ]"
        />
      </div>
      <div
        class="CallListTable__HeaderTitle CallListTable__HeaderTitle_LeftPadding"
      >
        ФИО / ИД ЕРН
      </div>
      <div class="CallListTable__HeaderTitle CallListTable__HeaderTitle_Center">
        Адрес направления
      </div>
      <div class="CallListTable__HeaderTitle CallListTable__HeaderTitle_Center">
        Статус
      </div>
      <div class="CallListTable__HeaderTitle CallListTable__HeaderTitle_Center">
        Серия / № повестки
      </div>
    </div>
    <q-table
      grid
      v-bind="{ ...$props, ...$attrs }"
      @request="requestHandler"
      :pagination.sync="pagination"
      row-key="id"
      selection="multiple"
      :selected.sync="selected"
      hide-bottom
    >
      <template v-slot:item="props">
        <div
          :class="[
            'CallListTable__Row',
            showCheckBoxes
              ? 'CallListTable_VisibleCheckBox'
              : 'CallListTable_HideCheckbox',
          ]"
        >
          <div
            class="CallListTable__Cell CallListTable__Cell_LeftPadding CallListTable__Cell_Center"
            v-if="showCheckBoxes"
          >
            <template v-if="showCheckBoxes">
              <input
                class="LabelSelect__Select"
                :id="props.row.id"
                type="checkbox"
                :disabled="disabledMassCheckbox"
                v-model="localSelect"
                :value="props.row.id"
              />
              <label
                :for="props.row.id"
                :class="[
                  'LabelSelect__Label',
                  { LabelSelect__Label_Disabled: disabledMassCheckbox },
                ]"
              />
              <q-tooltip v-if="!disabledMassCheckbox"> Выберите для удаления </q-tooltip>
            </template>
          </div>
          <div class="CallListTable__Cell CallListTable__Cell_Column">
            <div class="CallListTable__Name">
              <router-link
                class="CallListTable__NameLink"
                :to="{ name: 'recruit-personal', params: { id: props.row.id } }"
              >
                {{ props.row.fullName }}
              </router-link>
            </div>
            <div class="CallListTable__DateAndErn">
              <div
                class="CallListTable__DateAndErn CallListTable__DateAndErn_Grow"
              >
                <span class="CallListTable__DateAndErn_Ellipsis">
                  {{ props.row.idERN }}
                </span>
              </div>
            </div>
          </div>
          <div
            :class="[
              'CallListTable__Cell',
              'CallListTable__Address',
              props.row.showOptions
                ? 'CallListTable__Address_Extend'
                : 'CallListTable__Address_Hide',
            ]"
          >
            <div class="CallListTable__SendInfo">
              <div class="CallListTable__SendInfoAddress">
                <div
                  class="CallListTable__SendInfoLine"
                  v-for="info in props.row.sendInfo"
                >
                  <span class="CallListTable__Info">{{
                    convertAddressType(info.addressType)
                  }}</span>
                  <span class="CallListTable__Info">{{
                    convertMethodType(info.sendCode, '14')
                  }}</span>
                  <span class="CallListTable__Info">{{
                    convertMethodType(info.sendCode, '15')
                  }}</span>
                </div>
              </div>
            </div>
            <div
              :class="[
                'CallListTable__Icon',
                { CallListTable__Icon_Active: props.row.showOptions },
              ]"
            >
              <q-icon
                :name="
                  props.row.showOptions
                    ? 'pgs-close'
                    : 'pgs-message-constructor'
                "
                size="25px"
                color="primary"
                @click="toggleAddressChecker(props.row.id)"
              >
                <q-tooltip>Редактирование</q-tooltip>
              </q-icon>
            </div>
          </div>
          <div class="CallListTable__Status">
            <status-box :status="props.row.status" borderless />
          </div>
          <div class="CallListTable__Cell CallListTable__Cell_Row">
            <div class="CallListTable__Cell">
              <span
                class="CallListTable__Cell CallListTable__Cell_Center CallListTable__Cell_Row"
                v-if="props.row.subpoenaSeries || props.row.subpoenaNumber"
              >
                {{ props.row.subpoenaSeries }} №
                {{ props.row.subpoenaNumber }}
              </span>
              <span
                class="CallListTable__Cell CallListTable__Cell_Center CallListTable__Cell_Row"
                v-else
              >
                -
              </span>
            </div>
          </div>
        </div>
        <div class="ExtendForm" v-if="props.row.showOptions && props.row.id">
          <extend-recruit-address
            :address="props.row.address"
            :sendInfo="props.row.sendInfo"
            :available-actions="checkListStatusEdit"
            :recruitId="props.row.id"
            @set-address-settings="setNewAddress"
          />
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
@mixin font-style-expand-form {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(2, 12, 18, 0.9);
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
}

.LabelSelect {
  &__Label {
    display: block;
    width: 20px;
    height: 20px;
    background-color: rgba(15, 32, 160, 0.08);
    border: 1px solid rgba(1, 72, 116, 0.18);
    border-radius: 4px;
    position: relative;
    &_Disabled {
      opacity: 0.5;
    }
  }
  &__Select {
    display: none;
    &:checked + .LabelSelect__Label {
      background-color: #1491cf;
      box-shadow: 0 0 3.5px rgba(1, 94, 152, 0.5);
      &:before,
      &:after {
        position: absolute;
        content: '';
        display: block;
        background-color: #fff;
        height: 3px;
        border-radius: 10px;
      }
      &:before {
        width: 10px;
        top: 10px;
        left: 1px;
        transform: rotate(60deg);
      }
      &:after {
        width: 14px;
        top: 8px;
        left: 5px;
        transform: rotate(-60deg);
      }
    }
  }
}

::v-deep .q-table__bottom {
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: rgba(2, 12, 18, 0.58);
}

.CallListTable {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  &__BodyRow {
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    background: #ffffff;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
  }
  &__Headers {
    padding: 16px 0 6px 0;
    color: rgba(2, 12, 18, 0.58);
    overflow: hidden;
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 42px 1fr 1.6fr 0.6fr 0.6fr;
  }
  &__HeaderCheckBox {
    margin-top: -4px;
    margin-bottom: -4px;
    padding-left: 12px;
    padding-right: 12px;
  }
  &__HeaderLabelCheckBox {
    &_Disabled {
      opacity: 0.5;
    }
  }

  &_HideCheckbox {
    display: grid;
    grid-template-columns: 1fr 1.6fr 0.6fr 0.6fr;
  }
  &_VisibleCheckBox {
    display: grid;
    grid-template-columns: 42px 1fr 1.6fr 0.6fr 0.6fr;
  }
  &__HeaderTitle {
    align-content: center;
    &:not(:last-child) {
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
    &_Center {
      text-align: center;
    }
    &_LeftPadding {
      padding-left: 4px;
    }
  }
  &__Row {
    width: 100%;
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    background: #ffffff;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
    &:hover {
      border: 1px solid #1491cf;
      box-shadow: 0 0.6px 1.8px rgba(7, 46, 71, 0.12),
        0 3.2px 8px rgba(7, 46, 71, 0.15);
    }
  }
  &__Cell {
    display: flex;
    position: relative;
    padding: 0 0 0 4px;
    overflow: hidden;
    color: rgba(2, 12, 18, 0.9);
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    &:not(:last-child) {
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
    &_LeftPadding {
      padding-left: 12px;
    }
    &_Center {
      align-items: center;
    }
    &_Column {
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
    }
    &_Row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
  &__Name {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  &__NameLink {
    text-decoration: none;
    &:link {
      color: #015e98;
    }
    &:visited {
      color: rgba(2, 12, 18, 0.9);
    }
  }
  &__DateAndErn {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
    display: flex;
    align-items: center;
    &_Grow {
      flex: 1;
    }
    &_Ellipsis {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  &__Status {
    margin-top: -4px;
    margin-bottom: -4px;
    padding: 0;
  }
  &__Address {
    display: grid;
    grid-template-columns: 1fr 0.05fr;
    align-items: center;
    overflow: visible;
    padding-right: 1px;
    &_Hide {
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }
    &_Extend {
      border: 2px solid rgba(1, 94, 152, 0.2);
      margin: -2px;
      border-radius: 0 15px 15px 0;
      border-right: none;
      &::after {
        z-index: -5;
      }
    }
  }
  &__Icon {
    height: 100%;
    align-items: center;
    cursor: pointer;
    display: flex;
    &_Active {
      margin-right: -1px;
      border-bottom-right-radius: 12px;
      border-top-right-radius: 12px;
      background: rgba(1, 94, 152, 0.2);
    }
  }
  &__SendInfo {
    display: grid;
    grid-template-columns: 1fr 0.05fr;
    color: #020c12e5;
    border-radius: 4px;
    line-height: 18px;
    gap: 5px;
  }
  &__SendInfoAddress {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  &__SendInfoLine {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 5px;
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
    &:not(:last-child) {
      border-bottom: 1px solid rgba(1, 72, 116, 0.11);
    }
  }
  &__Info {
    display: flex;
    color: #020c12e5;
    border-radius: 4px;
    width: fit-content;
    line-height: 18px;
    gap: 5px;
    &:nth-child(2) {
      background: rgba(4, 150, 125, 0.2);
      color: #04967d;
      border-radius: 4px;
      text-transform: uppercase;
    }
    &:nth-child(3) {
      background: rgba(1, 94, 152, 0.2);
      color: #015e98;
      border-radius: 4px;
      text-transform: uppercase;
    }
    &:not(:first-child) {
      border-top: 1px solid rgba(1, 72, 116, 0.11);
    }
  }
}
.ExtendForm {
  width: 100%;
}
</style>

<script lang="ts">
import { Prop, Component, Emit, Vue, Watch } from 'vue-property-decorator';
import { copyToClipboard } from 'quasar';
import { get } from 'lodash';
import { formatDate, mask } from '@/recruits/utils';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import { statusDictionary } from '@/recruits/models';
import {
  ListElementV2,
  ListRecordV2,
  ListSearchResponseV2,
} from '@/recruits/openapi/summon-list-service';
import ExtendRecruitAddress from '@/recruits/components/call-list/main/extend-recruit-address.vue';
import { QPagination } from '@models/models-ui';

const availableStatusForDelete = ['1', '3', '5'];
const availableStatusForEdit = ['1', '5'];

@Component({
  components: { StatusBox, ExtendRecruitAddress },
  methods: { mask, formatDate, get },
})
export default class DataTable extends Vue {
  @Prop({ default: () => null })
  listInfo: ListRecordV2;

  @Prop({ default: () => [] })
  data: Required<ListSearchResponseV2['data']>;

  @Prop({ default: () => null })
  pagination: QPagination;

  @Prop({ default: () => [] })
  selected: string[];

  localSelect: string[] = [];

  massSelected = false;

  get showCheckBoxes() {
    return (this.$AC.haveOneOfScope([
      this.$AC.scopes.MILITARY_RECRUIT_SPECIALIST])
    );
  }

  get disabledMassCheckbox(): boolean {
    return !this.checkListStatusDelete;
  }

  get getAddressTypesDictionary(): Record<string, string> {
    return this.$store.getters['ervuDictionaries/addressTypeDictionary'] || {};
  }

  get deliveryOptions(): Record<string, string> {
    return this.$store.getters['ervuDictionaries/getDeliveryDirections'] || {};
  }

  get checkListStatusDelete(): boolean {
    return !!(
      this.listInfo?.status &&
      availableStatusForDelete.includes(this.listInfo.status)
    );
  }

  get checkListStatusEdit(): boolean {
    return !!(
      this.listInfo?.status &&
      availableStatusForEdit.includes(this.listInfo.status)
    );
  }

  @Watch('massSelected')
  massSelect(newData: boolean): void {
    if (newData && Array.isArray(this.data)) {
      this.data.forEach((item: ListElementV2) => {
        if (item.id && !this.localSelect.includes(item.id)) {
          this.localSelect.push(item.id);
        }
      });
    } else if (this.localSelect.length === this.data?.length) {
      this.localSelect = [];
    }
  }

  @Emit('row-selected')
  @Watch('localSelect', { deep: true })
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  selectRow(val: string[]): string[] {
    this.localSelect.length === this.data?.length
      ? (this.massSelected = true)
      : (this.massSelected = false);
    return val;
  }

  public getStatusTitle(status: string): string {
    return statusDictionary[status] || status;
  }

  @Emit('request')
  requestHandler(val: any): void {
    this.$emit('pagination-handler', val.pagination);
    this.$emit('row-selected', []);
  }

  @Emit('update:pagination')
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  paginationHandler(): void {}

  // @Emit('row:dblclick')
  dblClickHandler(recruitId: string): void {
    this.$router.push({ name: 'recruit-personal', params: { id: recruitId } });
  }

  public sendToClipBoard(textValue: string): void {
    copyToClipboard(textValue);
    this.$q.notify({
      message: `'${textValue}' скопирован`,
    });
  }

  convertMethodType(sendCode: string[], type: string) {
    return sendCode?.includes(type) ? this.deliveryOptions[type] : '';
  }

  toggleAddressChecker(id: string) {
    this.$emit('toggle-row', id);
  }

  convertAddressType(type: string) {
    return this.getAddressTypesDictionary[type];
  }

  async setNewAddress(res: { id: string; sendInfo: any }) {
    this.$emit('set-new-send-info', res);
  }
}
</script>
