<template>
  <div class="AddToList">
    <r-btn
      dense
      :disable="disable"
      :label="label"
      :icon="sign ? 'pgs-sign' : 'pgs-user-check'"
      @click="open"
      disabled-background-color="#b9b2b2"
      disabled-color="#e7e7e7"
      no-wrap
    >
      <q-tooltip max-width="400px" v-if="disabledReason">
        {{ disabledReason }}
      </q-tooltip>
    </r-btn>
    <operation-dialog
      persistent
      ref="dialog"
      width="750px"
      :title="title"
      :sub="sub"
      :process-key="processKey"
      v-model="opened"
      @hide="close"
    >
      <div class="AddToList-Title">
        Список для добавления
        <r-btn
          outline
          :label="openedTabNew ? 'показать список' : 'новый список'"
          :icon="openedTabNew ? 'pgs-database' : 'pgs-plus'"
          color="primary"
          dense
          @click="changeTab"
        />
      </div>
      <div class="AddToList-Table__CountOnDate">
        <span>
          Количество вызванных граждан на дату:
          <span :class="colorCount">
            <b>{{ countOnDate }}</b>
          </span>
        </span>
      </div>
      <q-card-section class="AddToList-Table__Block">
        <!-- Начало блока добавления граждан в новый список -->
        <q-item
          tag="span"
          class="ResetPM AddToList-Table__New q-mb-md"
          v-if="openedTabNew"
        >
          <q-item-section class="AddToList-Text" name="number">
            <r-select-group
              dense
              options-dense
              v-model="newList.summonObjective"
              :string-options="
                actionSelectGroupDataList(
                  personRegistryListFilter.summonObjectiveAny,
                  personRegistryListFilter.summonObjectiveNotAll
                )
              "
              placeholder=""
              label="Причина вызова в военкомат"
            />
            <r-date-time-input
              class="q-mt-md"
              v-model="summonDate"
              :emit-format="isoDateFormat"
              :date-options="isDateAvailable"
              :time-options="isTimeAvailable"
              :default-year-month="defaultYearMonth"
              :default-time="defaultTime"
              default-time="09:00"
              label="Дата и время явки"
            />
            <div class="q-mt-md">
              <div class="full-width wrapper-block">
                <span class="wrapper-block__title"
                  >Адреса и способы направления</span
                >
                <div class="CallListTable">
                  <div class="full-width headers CallListTable-Header">
                    <div class="q-pl-xs flex">
                      <div class="self-center">Тип адреса направления</div>
                    </div>
                    <div class="text-center">
                      <q-checkbox
                        class="LabelSelect-Select"
                        id="meet"
                        size="sm"
                        type="checkbox"
                        :value="massCheckbox['14']"
                        @input="(v) => setCheckboxColumn('14', v)"
                      />Нарочно
                    </div>
                    <div class="text-center">
                      <q-checkbox
                        class="LabelSelect-Select"
                        id="mail"
                        size="sm"
                        type="checkbox"
                        :value="massCheckbox['15']"
                        @input="(v) => setCheckboxColumn('15', v)"
                      />Письмо
                    </div>
                    <div class="flex flex-center cursor-pointer">
                      <q-icon
                        color="negative"
                        size="19px"
                        name="pgs-delete"
                        @click="deleteFields"
                      />
                    </div>
                  </div>
                  <div class="full-width">
                    <q-table
                      grid
                      :hidePagination="true"
                      :data="rows"
                      row-key="name"
                    >
                      <template v-slot:item="props">
                        <div class="full-width body CallListTable-Row">
                          <div class="q-pl-xs flex">
                            <div class="self-center">
                              {{ getAddressTypesDictionary[props.row.name] }}
                            </div>
                          </div>
                          <div class="flex justify-center">
                            <q-checkbox
                              class="LabelSelect-Select"
                              :id="props.row.name"
                              type="checkbox"
                              :value="props.row['14']"
                              @input="
                                (v) => setInputValue(props.row.index, '14', v)
                              "
                            />
                          </div>
                          <div class="flex justify-center">
                            <q-checkbox
                              class="LabelSelect-Select"
                              :id="props.row.name"
                              type="checkbox"
                              :value="props.row['15']"
                              @input="
                                (v) => setInputValue(props.row.index, '15', v)
                              "
                            />
                          </div>
                          <div class="flex flex-center cursor-pointer">
                            <q-icon
                              color="negative"
                              size="23px"
                              name="pgs-delete"
                              @click="deleteField(props.row.index)"
                            />
                          </div>
                        </div>
                      </template>
                    </q-table>
                  </div>
                </div>
              </div>
              <div
                :class="[
                  'AddNewField-Group',
                  { 'AddNewField-Extend': getAddFieldOption },
                ]"
              >
                <r-select
                  dense
                  options-dense
                  placeholder="Тип адреса направления"
                  v-model="newAddressType"
                  :options="getAddressTypesOptions"
                />
                <r-btn
                  action
                  :label="getAddFieldOption ? '' : 'Добавить адреса'"
                  icon="pgs-plus"
                  @click="
                    getAddFieldOption
                      ? addNewField()
                      : (addFieldOption = !addFieldOption)
                  "
                />
              </div>
            </div>
          </q-item-section>
        </q-item>
        <!-- Конец блока добавления граждан в новый список -->

        <!-- Начало блока добавления граждан в существующий список -->
        <div v-if="!openedTabNew">
          <div
            class="AddToList-Table__Header AddToList-Table__Row AddToList-Table__Row__NotGr"
          >
            <p>Номер</p>
            <p>Категория</p>
            <p>Причина вызова</p>
            <p>Дата и время вызова</p>
            <p>Граждан</p>
          </div>
          <q-list v-for="list in lists" :key="list.id" class="AddToList-Table">
            <q-item
              tag="label"
              v-ripple
              class="ResetPM AddToList-Table__Row"
              :class="[
                personIds.length >= countList(list)
                  ? 'cursor-default'
                  : 'cursor-pointer',
                get(list, 'extend', false) ? 'AddToList-Table__Extend' : '',
                list.id === get(selectedList, 'id')
                  ? 'AddToList-Table__Selected'
                  : '',
              ]"
            >
              <q-item-section class="AddToList-Text" name="number">
                {{ list.number }}
              </q-item-section>
              <q-item-section class="AddToList-Text" name="number">
                {{ categoryReasonType(list.summonObjective) || '' }}
              </q-item-section>
              <q-item-section class="AddToList-Text" name="title">
                {{ get(options, list.summonObjective || '', '-') }}
              </q-item-section>
              <q-item-section class="AddToList-Text" name="date">
                <div class="row" v-if="list.turnoutDate">
                  <span>
                    {{ formatDate(list.turnoutDate, 'DD.MM.YYYY') }}
                  </span>
                  <span class="time">
                    {{ formatDate(list.turnoutDate, 'HH:mm') }}
                  </span>
                </div>
                <div v-else>-</div>
              </q-item-section>
              <q-item-section class="AddToList-Text" name="number">
                {{ 50 - countList(list) }}
              </q-item-section>
              <q-item-section class="AddToList-Text" name="extend">
                <q-icon
                  :name="
                    get(list, 'extend', false)
                      ? 'pgs-close'
                      : 'pgs-message-constructor'
                  "
                  size="25px"
                  color="primary"
                  class="cursor-pointer"
                  @click.stop="
                    get(list, 'sendInfo.length', false) &&
                      extendListInfo(list.id)
                  "
                />
              </q-item-section>
              <q-item-section class="AddToList-Text" name="radio">
                <q-radio
                  class="hidden"
                  size="0px"
                  :disable="personIds.length > countList(list)"
                  v-model="selectedList"
                  :val="list"
                  color="primary"
                />
              </q-item-section>
            </q-item>
            <div
              class="Extend-form"
              v-if="
                get(list, 'sendInfo.length', false) &&
                selectedListWithExtend(list)
              "
            >
              <div class="Extend-form__Title">Способы направления</div>
              <div class="Extend-form__List">
                <div
                  class="Extend-form__List__Item"
                  v-for="(sendType, i) in get(list, 'sendInfo')"
                  :key="i"
                >
                  <div class="Extend-form__List__Item__Type">
                    <span>{{ convertAddressType(sendType.addressType) }}</span>
                  </div>
                  <div class="Extend-form__List__Item__Delivery">
                    <span v-show="convertMethodType(sendType.sendCode, '14')">{{
                      convertMethodType(sendType.sendCode, '14')
                    }}</span>
                    <span v-show="convertMethodType(sendType.sendCode, '15')">{{
                      convertMethodType(sendType.sendCode, '15')
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </q-list>
        </div>
        <!-- Конец блока добавления граждан в существующий список -->
      </q-card-section>
      <template #process>
        <result-block
          type="info"
          icon="pgs-document"
          header="Идет обработка данных"
        >
        </result-block>
      </template>
      <template #result>
        <q-card-section v-if="result">
          <div class="AddToList-Result">
            <p class="AddToList-Result__Success">
              <span>
                <span class="AddToList-Result__Digits">
                  {{ result.successCol }}
                </span>
                {{ $tc('MultiSign.add', result.successCol) }}
              </span>
            </p>
            <p class="AddToList-Result__Error">
              <span>
                <span class="AddToList-Result__Digits">
                  {{ result.errorsCol }}
                </span>
                ошибок
              </span>
            </p>
          </div>
          <div>
            <p
              v-for="recruit in result.listRecruit"
              :key="recruit.fullName"
              class="AddToList-ResultTable"
            >
              <span class="AddToList-ResultTable__FIO">
                {{ recruit.fullName }}
              </span>
              <!-- <span
                v-if="recruit.status === 'added'"
                class="AddToList-ResultTable__Success"
              > -->
              <span
                v-if="recruit.status"
                class="AddToList-ResultTable__Success"
              >
                <q-icon name="pgs-ok" />
                <span>успешно добавлен</span>
                <q-tooltip max-width="300px" v-if="recruit.message">
                  {{ recruit.message }}
                </q-tooltip>
              </span>
              <span v-else class="AddToList-ResultTable__Error">
                <q-icon name="pgs-stop" />
                <span>не добавлен</span>
                <q-tooltip max-width="300px" v-if="recruit.message">
                  {{ recruit.message }}
                </q-tooltip>
              </span>
            </p>
          </div>
        </q-card-section>
      </template>
      <template #left-actions-result>
        <r-btn
          outline
          label="Закрыть"
          icon="pgs-close"
          color="primary"
          @click="finish"
          v-close-popup
        />
      </template>
      <template #right-actions>
        <q-btn
          v-if="openedTabNew"
          :disable="checkNewListFields"
          label="Добавить в новый список"
          icon="pgs-sign-2"
          class="redesigned-action-btn button-text"
          @click="createNewList"
        />
        <q-btn
          v-else
          :disable="!selectedList"
          label="Добавить в список"
          icon="pgs-sign-2"
          class="redesigned-action-btn button-text"
          @click="addToList"
        />
      </template>
      <template #right-actions-result>
        <r-btn
          label="Перейти к списку"
          icon-right="pgs-arrow-right"
          class="RButton__Action"
          @click="routeToList"
        />
      </template>
    </operation-dialog>
  </div>
</template>

<i18n>
{
  "ru": {
    "MultiSign": {
      "selected": "не выбрано | одного гражданина | {n} гражданина | {n} граждан",
      "add": "добавлено | добавлен | добавлено"
    }
  }
}
</i18n>

<style lang="scss" scoped>
.wrapper-block {
  position: relative;
  padding-top: 23px;
  &__title {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
    position: absolute;
    padding: 0 5px;
    background: #ffffff;
    top: 13px;
    left: 24px;
  }
}
.Extend-form {
  display: grid;
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  align-self: center;
  padding: 5px 10px;
  color: rgba(2, 12, 18, 0.58);
  grid-template-columns: 0.35fr 1fr;
  border: 1px solid rgba(1, 72, 116, 0.11);
  border-radius: 0 0 8px 8px;
  border-top: none;
  &__Title {
  }
  &__List {
    font-weight: 400;
    &__Item {
      display: grid;
      grid-template-columns: 300px auto;
      color: #020c12e5;
      border-radius: 4px;
      width: fit-content;
      line-height: 18px;
      gap: 5px;
      &__Type {
      }
      &__Delivery {
        display: grid;
        grid-template-columns: auto auto;
        gap: 5px;
        span:nth-child(1) {
          text-align: center;
          background: rgba(4, 150, 125, 0.2);
          color: #04967d;
          border-radius: 4px;
          text-transform: uppercase;
        }
        span:nth-child(2) {
          text-align: center;
          background: rgba(1, 94, 152, 0.2);
          color: #015e98;
          border-radius: 4px;
          text-transform: uppercase;
        }
      }
    }
  }
}
.CallListTable {
  border: 1px solid rgba(2, 12, 18, 0.15);
  border-radius: 8px;
  padding: 10px 10px 0 10px;
  &-Header {
    display: grid;
    grid-template-columns: 1.4fr 0.4fr 0.4fr 0.4fr 0.01fr;
    padding: 5px;
    background: #e5edf5;
    border-bottom: 1px solid rgba(2, 12, 18, 0.15);
    box-sizing: border-box;
    div:not(:last-child) {
      border-right: 1px solid rgba(2, 12, 18, 0.15);
    }
  }
  &-Row {
    display: grid;
    grid-template-columns: 1.4fr 0.4fr 0.4fr 0.4fr 0.01fr;
    padding: 5px;
    font-size: 14px;
    &:not(:last-child) {
      border-bottom: 1px solid rgba(2, 12, 18, 0.15);
    }
    div:not(:last-child) {
      border-right: 1px solid rgba(2, 12, 18, 0.15);
    }
  }
}
.headers {
  > div {
    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;
  }
}
.time {
  margin-left: 10px;
  color: rgba(2, 12, 18, 0.58);
}
.AddToList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &-Title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(2, 12, 18, 0.58);
    font-family: 'Golos UI', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    margin-top: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(131, 208, 246, 0.21);
  }
  &-Content {
    padding: 5px;
  }
  &-Text {
    &[name='number'] {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.58);
      align-self: center;
    }
    &[name='title'] {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
    }
    &[name='radio'] {
      display: flex;
      align-items: flex-end;
    }
  }
  &-Header {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);
    margin-bottom: 0;
  }
  &-Table {
    &__Block {
      max-height: calc(100vh - 235px);
      overflow-y: auto;
    }
    &__Header {
      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;
      color: rgba(2, 12, 18, 0.58);
      margin-bottom: 10px !important;

      p {
        margin: 0;
      }
    }
    &__Row {
      background-color: #ffffff;
      border: 1px solid rgba(1, 72, 116, 0.11);
      border-radius: 8px;
      display: grid;
      grid-template-columns: 0.6fr 1fr 2fr 2fr 0.4fr 0.4fr;
      margin-bottom: 4px;
      padding: 0 13px;
      &__NotGr {
        background-color: initial;
        border: none;
      }
      div {
        margin: 0;
      }
    }
    &__Extend {
      margin: 0;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      background: rgba(2, 12, 18, 0.1);
    }
    &__Selected {
      background: rgba(93, 156, 236, 0.3);
    }
    &__New {
      background-color: #ffffff;
      border: 1px solid rgba(1, 72, 116, 0.11);
      border-radius: 8px;
      display: flex;
      padding: 8px 13px;
    }
    &__CountOnDate {
      padding: 4px;
      height: 29px;
      &_Red {
        color: rgba(209, 21, 30, 1);
      }
      &_Orange {
        color: rgba(207, 110, 20, 1);
      }
      &_Yellow {
        color: rgb(255 199 0);
      }
      &_Green {
        color: rgba(4, 150, 114, 1);
      }
    }
  }
  &-Actions {
    background: rgba(15, 32, 160, 0.08);
    display: flex;
    justify-content: space-between;
    padding: 5px;
  }
  &-Result {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(131, 208, 246, 0.21);
    border-radius: 4px;
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    padding-bottom: 9px;
    margin-bottom: 16px;
    &__Success {
      color: #049672;
      margin-right: 16px;
    }
    &__Error {
      color: gray;
    }
    &__Digits {
      font-size: 32px;
    }
  }
  &-ResultTable {
    display: flex;
    justify-content: space-between;
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    gap: 1em;
    padding: 8px 39px 8px 29px;
    &__FIO {
      color: rgba(2, 12, 18, 0.9);
      font-weight: 500;
      max-width: 250px;
    }
    &__Success {
      color: #04967d;
    }
    &__Error {
      color: #c10525;
    }
  }
}
.MultiSelect__Form {
  ::v-deep > label {
    height: 39px;
    min-height: 39px;
    background: #e5edf5;
    border-radius: 4px 4px 0 0;
    background-blend-mode: multiply;
    border: none;
    border-bottom: 1px solid rgba(1, 72, 116, 0.18);
    padding: 0 8px !important;
    box-sizing: border-box;
    transition: 0.1s;
  }
}
.AddNewField {
  &-Group {
    will-change: width, opacity;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    .RSelect {
      margin: 0;
      padding: 0;
      width: 0;
      opacity: 0;
      ::v-deep {
        .RSelect-Label {
          margin: 0;
          padding: 0;
        }
        .q-field__control {
        }
      }
    }
    .RButton {
      margin-left: -16px;
      width: 100%;
    }
  }
  &-Extend {
    .RSelect {
      width: 80%;
      opacity: 1;
      transition: width 0.5s;
    }
    .RButton {
      width: 20%;
      transition: width 0.5s;
    }
  }
}
</style>

<script lang="ts">
import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator';
import dataBlock from '@components/cards/statements/components/dataBlock.vue';
import TaskButton from '@/mixins/TaskButton';
import OperationDialog from '@/components/common/operation-dialog/index.vue';
import get from 'lodash/get';
import isArray from 'lodash/isArray';
import isString from 'lodash/isString';
import ProcessStarter from '@/mixins/ProcessStarter';
import { RecruitsForListsRecord } from '@/recruits/openapi/person-registry';
import {
  RecruitsListActionResponse,
  ListRecordV2,
  FilterListsSearch,
  ListsSearchResponseV2,
  SummonListRegistryApi,
  AddressArrayDeliveryV1,
} from '@/recruits/openapi/summon-list-service';
import { SubpoenaRegistryApi } from '@/recruits/openapi/subpoena-service';
import { notifyError } from '@utils/notify';
import RDateTimeInput from '@/recruits/components/common/r-date-time-input.vue';
import RSelect from '@/recruits/components/common/r-select.vue';
import RSelectGroup from '@/recruits/components/common/r-select-group.vue';
import { formatDate } from '@/recruits/utils';
import SummonDate from '@/recruits/mixins/summon-date';
import ActionSelectGroupData from '@/recruits/mixins/action-select-group-data';
import { Option } from '@/recruits/models';

type List = ListRecordV2 & { extend?: boolean };

interface IRow {
  index: number;
  name: string;
  '14': boolean;
  '15': boolean;
}

interface NewList {
  id: string;
  sendInfo: AddressArrayDeliveryV1[] | null;
  summonObjective: {
    value: string;
    label: string;
  } | null;
}

interface ActivityData {
  buttonCode: string | undefined;
  number: number | undefined;
  target: string | undefined;
  date: string | undefined;
}

export interface ButtonCode {
  openDialog?: string;
  closeDialog?: string;
  createList?: string;
  showList?: string;
  addToList?: string;
  addToNewList?: string;
}

const DELIVERY_METHOD_DICT = 'deliveryMethod';
const addressForSendDictionaryPath = 'ervuDictionaries/addressTypeDictionary';
const initialFields = [
  'residenceAddress',
  'actualAddress',
  'residentialAddress',
];

@Component({
  components: {
    dataBlock,
    RDateTimeInput,
    RSelect,
    RSelectGroup,
  },
  methods: {
    get,
    formatDate,
  },
})
export default class MultiAddToList extends Mixins(
  TaskButton,
  ProcessStarter,
  SummonDate,
  ActionSelectGroupData
) {
  get: typeof get;
  formatDate: typeof formatDate;

  @Prop({ default: () => [] })
  declare readonly model:
    | (string | RecruitsForListsRecord)[]
    | RecruitsForListsRecord;

  @Prop({ default: () => ({}) })
  personRegistryListFilter: FilterListsSearch;

  @Prop({ default: () => true })
  readonly sign: boolean;

  @Prop({ default: () => 'Добавление в список на вызов' })
  readonly title: string;

  @Prop({ default: '00:00' })
  defaultTime: string;

  @Prop({ default: () => 'initPersonAdult' })
  actionType: 'initPersonYoung' | 'initPersonAdult';

  @Prop() activityRecorderOptions: any;

  @Prop({ default: () => '' })
  disabledReason: string;

  @Ref('dialog') operationDialog: OperationDialog;

  @Prop({ type: Object, default: () => ({}) }) buttonCode: ButtonCode;

  @Watch('personRegistryListFilter')
  updateRecordList(): void {
    this.getRecordList();
  }

  get categoryDictionary() {
    return (
      this.$store.getters[
        'ervuDictionaries/militaryRegistrationUpdatingGoalCategoriesDictionary'
      ] || null
    );
  }

  selectedListWithExtend(list: List) {
    return this.get(list, 'extend', false);
  }

  get reasonFullInfoDictionary() {
    return (
      this.$store.getters[
        'ervuDictionaries/militaryRegistrationUpdatingGoalsDictionaryFull'
      ] || null
    );
  }

  get getAddressTypesOptions() {
    return Object.keys(this.getAddressTypesDictionary).reduce((acc, el) => {
      if (!this.localRows.find((row) => row.name === el)?.name) {
        acc.push({ value: el, label: this.getAddressTypesDictionary[el] });
      }
      return acc;
    }, [] as Record<string, string>[]);
  }

  extendListInfo(listId: string) {
    this.lists = this.lists.map((list: List) => {
      list.id === listId && (list.extend = !list?.extend);
      return list;
    });
  }

  categoryReasonType(type: string): string {
    return (
      this.categoryDictionary?.[this.reasonFullInfoDictionary?.[type]?.type] ||
      ''
    );
  }

  // Начало общего блока
  openedTabNew = false; // флаг для переключения выбора логики существующего или нового списка
  loader = false; // флаг для иконки загрузки
  opened = false; // флаг для operation-dialog

  SummonListRegistryApi = new SummonListRegistryApi();
  subpoenaApi = new SubpoenaRegistryApi();

  result: RecruitsListActionResponse | null = null; // результат добавления списка

  countOnDate: number | undefined = 0; // кол-во свободных мест в выбранную дату

  localRows: IRow[] = [];
  addOptions = false;
  newAddressType: Option | null = null;
  addFieldOption = false;
  massCheckbox = {
    '14': false,
    '15': false,
  };

  @Watch('localRows', { deep: true })
  watchMassCheckBox(sendTypes: any[]) {
    const checkBox = sendTypes?.reduce(
      (acc, row) => {
        row?.['14'] && acc['14'].push('14');
        row?.['15'] && acc['15'].push('15');
        return acc;
      },
      { '14': [], '15': [] }
    );
    this.massCheckbox['14'] = checkBox['14']?.length === sendTypes?.length;
    this.massCheckbox['15'] = checkBox['15']?.length === sendTypes?.length;
  }

  get getAddFieldOption() {
    return this.addFieldOption;
  }

  get rows() {
    return this.localRows;
  }

  get uniqIndex() {
    return this.rows[this.rows.length - 1]?.index
      ? this.rows[this.rows.length - 1].index + 1
      : this.rows.length;
  }

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

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

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

  setInputValue(index: number, field: string, value: boolean) {
    this.localRows.forEach(row => {
      if (row.index === index) {
        row[field as keyof Pick<IRow, '14' | '15'>] = value
      }
    });
  }

  setCheckboxColumn(field: string, value: boolean) {
    this.massCheckbox[field as keyof Pick<IRow, '14' | '15'>] = value;
    this.localRows.forEach((row) => {
      row[field as keyof Pick<IRow, '14' | '15'>] = value;
    });
  }

  deleteField(index: number) {
    this.localRows = this.localRows.filter((row) => row.index !== index);
  }

  deleteFields() {
    this.localRows = [];
  }

  // получение по дате кол-ва свободных мест
  async changeTurnoutDate(date: string): Promise<void> {
    const { data } = await this.subpoenaApi.getCountRecruitForDate(date);
    this.countOnDate = data.countRecruitOfDay;
  }

  addNewField() {
    if (this.newAddressType?.value) {
      if (
        this.rows.find(
          (el: IRow) =>
            this.newAddressType?.value && el.name === this.newAddressType.value
        )?.name
      ) {
        notifyError('Поле уже имеется');
        return;
      }
      this.localRows.push({
        index: this.uniqIndex,
        name: this.newAddressType.value,
        '14': false,
        '15': false,
      });
      this.addOptions = false;
      this.newAddressType = null;
    }
  }

  // роут на список
  routeToList(): void {
    this.$router.push({
      name: 'call-list',
      params: {
        id: this.openedTabNew
          ? this.newList.id || ''
          : this.selectedList?.id || '',
      },
    });
  }

  // переключения выбора логики на существующий или на новый список
  changeTab(): void {
    if (this.openedTabNew) {
      this.$recordActivity({ buttonCode: this.buttonCode.showList });
    } else this.$recordActivity({ buttonCode: this.buttonCode.createList });

    this.openedTabNew = !this.openedTabNew;
    this.newList = {
      id: '',
      summonObjective: null,
      sendInfo: null,
    };
    this.summonDate = '';
    this.selectedList = null;
    this.countOnDate = 0;
  }

  // хотят видеть модалку
  async action(list: ListRecordV2): Promise<void> {
    this.operationDialog.toProcess();
    try {
      this.operationDialog.toResult();
      this.loading = false;
    } catch (error) {
      console.error(error);
      this.operationDialog.toResult();
      this.finish();
      this.loading = false;
    }
  }

  // евент события завершения добавление граждан в список
  finish(): void {
    this.$emit('done');
  }

  // евент события от operation-dialog
  open(): void {
    if (this.disable) return;
    if (!this.localRows.length) {
      Object.keys(this.getAddressTypesDictionary).forEach((key) => {
        initialFields.includes(key) &&
          this.localRows.push({
            index: this.uniqIndex,
            name: key,
            '14': false,
            '15': false,
          });
      });
    }
    this.opened = true;
    this.$recordActivity({ buttonCode: this.buttonCode.openDialog });
    this.$emit('open');
  }

  // евент события от operation-dialog
  close(): void {
    this.addFieldOption = false;
    this.opened = false;
    this.operationDialog.reset();
    this.$recordActivity({ buttonCode: this.buttonCode.closeDialog });
    this.$emit('close');
  }

  // инит словаря способов доставки
  async initDeliveryDictionary(): Promise<void> {
    await this.$store.dispatch(
      'registryService/referenceBooks/initReferenceBooks',
      [
        {
          id: DELIVERY_METHOD_DICT,
        },
      ]
    );
  }

  // цвет текста кол-ва свободного мест
  get colorCount(): string {
    if (this.countOnDate) {
      if (this.countOnDate > 50) return 'AddToList-Table__CountOnDate_Red';
      if (this.countOnDate > 40) return 'AddToList-Table__CountOnDate_Orange';
      if (this.countOnDate > 20) return 'AddToList-Table__CountOnDate_Yellow';
    }
    return 'AddToList-Table__CountOnDate_Green';
  }

  // подзаголовок для operation-dialog
  get sub(): string {
    if (isArray(this.model))
      return `${this.$tc('MultiSign.selected', this.model.length)}`;
    return '';
  }

  // список id граждан, которые будут добавлены в список
  get personIds(): string[] {
    if (Array.isArray(this.model)) {
      return (
        this.model?.map((recruitOrId): string => {
          if (isString(recruitOrId)) return recruitOrId;
          return recruitOrId.id;
        }) || []
      );
    }
    return [this.model.id];
  }

  get checkNewListFields() {
    return (
      !this.newList.summonObjective ||
      !this.summonDate ||
      !this.rows?.filter((el) => el?.['14'] || el?.['15'])?.length
    );
  }

  getRecordList(): void {
    this.loader = true;
    // получаение всех существующих список
    this.SummonListRegistryApi.getListsV2({
      pagination: {
        page: 1,
        rowsPerPage: 0, // 0 - должен возвращать все списки
      },
      // fixme поле search является обязательным, хотя по апи - необязательное
      search: this.personRegistryListFilter,
    })
      .then((response: { data: ListsSearchResponseV2 }) => {
        this.lists = this.getActiveLists(response.data.data || []);
        this.loader = false;
      })
      .catch((err) => {
        this.loader = false;
        notifyError(err.message.toString());
      });
  }

  created(): void {
    this.getRecordList();
  }

  mounted(): void {
    this.initDeliveryDictionary();
  }

  // Конец общего блока

  // Начало блока для добавления в существующий список
  lists: ListRecordV2[] = []; // существующие списки
  selectedList: ListRecordV2 | null = null; // выбранный список
  get selectedListInfo() {
    return (
      this.selectedList && {
        type: 'list',
        id: this.selectedList.id,
        number: this.selectedList.number,
      }
    );
  }

  // возвращаем кол-во свободных мест в списке
  countList(list: ListRecordV2): number {
    return list.freeCount || 0;
  }

  // возвращаем только списки со статусом "1", то есть на стадии формирования
  getActiveLists(lists: ListRecordV2[]): ListRecordV2[] {
    return lists.filter((list) => list.status === '1') || [];
  }

  recordAdditionToList(data: ActivityData): void {
    const persons = Array.isArray(this.model) ? this.model : [this.model];
    const personList = persons.map((person: any) => {
      if (isString(person)) return {};
      return {
        idERN: person.idERN || person.idern,
        fio: person.fullName,
      };
    });
    this.$recordActivity({
      buttonCode: data.buttonCode,
      extraInfo: {
        previewInfo: [
          {
            label: 'номер',
            value: data.number,
          },
        ],
        detailedInfo: [
          {
            label: 'цель вызова',
            value: data.target,
          },
          {
            label: 'дата и время вызова',
            value: data.date,
            type: 'date',
          },
        ],
        list: personList,
      },
    });
  }

  // FIXME вопрос на счет RecruitsListActionResponse и NewListResponse - они должны быть одинаковыми чтобы соблюдать консистетность данных
  // добавление граждан в существующий список
  async addToList(): Promise<void> {
    if (!this.selectedList?.id) return;
    this.loader = true;
    // проверка чтобы в военкомате не было больше 50 людей в день
    if (this.countOnDate) {
      if (this.countOnDate > 50) {
        notifyError('Нет доступных мест');
        this.loader = false;
        return;
      } else if (this.countOnDate + this.personIds.length > 50) {
        notifyError(`Не хватает мест. Доступных мест на выбранную дату`);
        this.loader = false;
        return;
      }
    }

    try {
      const { data } = await this.SummonListRegistryApi.addRecruitsV2(
        this.selectedList.id,
        this.personIds
      );
      this.result = data;
      await this.action(this.selectedList); // запуск процесса формирования повесток
      this.recordAdditionToList({
        buttonCode: this.buttonCode.addToList,
        number: this.selectedList.number,
        target: get(
          this.options,
          this.selectedList.summonObjective || '',
          undefined
        ),
        date: this.selectedList.turnoutDate,
      });
    } catch (err) {
      this.loader = false;
      if (err instanceof Error) notifyError(err.message);
    }
  }

  // словарь целей вызова
  get options(): string {
    return (
      this.$store.getters[
        'ervuDictionaries/militaryRegistrationUpdatingGoalsDictionary'
      ] || []
    );
  }

  // при выборе списка проверяем возможность вызова в эту дату
  @Watch('selectedList', { deep: true })
  changeSelectedList(newVal: ListRecordV2 | null): void {
    if (newVal?.turnoutDate) {
      this.changeTurnoutDate(newVal.turnoutDate);
    }
  }

  // Конец блока для добавления в существующий список

  // Начало блока для добавления в новый список
  newList: NewList = {
    id: '',
    sendInfo: null,
    summonObjective: null,
  };

  // добавление граждан в новый список
  async createNewList(): Promise<void> {
    this.loader = true;
    if (!this.newList.summonObjective?.value) {
      notifyError('Выберите цель вызова в новом списке');
      this.loader = false;
      return;
    }
    if (!this.summonDate) {
      notifyError('Выберите дату вызова в новом списке');
      this.loader = false;
      return;
    }
    if (!this.isDateAndTimeValid()) return;
    if (this.countOnDate) {
      if (this.personIds.length > 50 - this.countOnDate) {
        if (50 - this.countOnDate > 0) {
          notifyError(
            `Не хватает мест. Доступных мест на выбранную дату - ${
              // осталось
              50 - this.countOnDate
            }`
          );
        } else {
          notifyError('Нет доступных мест');
        }
        this.loader = false;
        return;
      }
    }
    try {
      const sendInfo = this.rows.reduce(
        (acc: AddressArrayDeliveryV1[], row: IRow) => {
          const sendCode = [];
          row?.['14'] && sendCode.push('14');
          row?.['15'] && sendCode.push('15');
          acc.push({ sendCode, addressType: row.name });
          return acc;
        },
        []
      );
      const { data } = await this.SummonListRegistryApi.newListV3({
        recruitIds: this.personIds,
        summonObjective: this.newList.summonObjective.value,
        listTitle: this.newList.summonObjective.label,
        turnoutDate: this.summonDate,
        sendInfo,
      });
      this.result = data.result || null;
      this.newList.id = data.listInfo?.id || '';
      // запускаем процесс формирования создания повестки
      this.action({
        summonObjective: this.newList.summonObjective.value,
        turnoutDate: this.summonDate,
        id: this.newList.id,
      });
      this.recordAdditionToList({
        buttonCode: this.buttonCode.addToNewList,
        number: data.listInfo?.number,
        target: this.newList.summonObjective?.label,
        date: this.summonDate,
      });
    } catch (err) {
      this.loader = false;
      if (err instanceof Error) notifyError(err.message);
    }
  }

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

  // при создании списка при изменении даты проверяем возможность вызова в эту дату
  @Watch('summonDate', { deep: true })
  changeNewListTurnoutDate(newVal: string | null): void {
    if (newVal) {
      this.changeTurnoutDate(newVal);
    }
  }

  // Конец блока для добавления в новый список
}
</script>
