<template>
  <div class="RecruitDataTable">
    <div class="RecruitDataTable__Headers">
      <div
        class="RecruitDataTable__HeaderTitle RecruitDataTable__HeaderCheckBox"
      >
        <input
          class="LabelSelect__Select"
          id="massSelect"
          type="checkbox"
          v-model="massSelected"
          :disabled="disabledMassCheckbox"
        />
        <label for="massSelect" class="LabelSelect__Label" />
      </div>
      <div
        class="RecruitDataTable__HeaderTitle RecruitDataTable__HeaderTitle_Center"
      >
        ФИО / ИД ЕРН
      </div>
      <div
        class="RecruitDataTable__HeaderTitle RecruitDataTable__HeaderTitle_Center"
      >
        Адрес регистрации
      </div>
      <div
        class="RecruitDataTable__HeaderTitle RecruitDataTable__HeaderTitle_Center"
      >
        Военный комиссариат
      </div>
      <div
        class="RecruitDataTable__HeaderTitle RecruitDataTable__HeaderTitle_Center"
      >
        Статус
      </div>
    </div>
    <q-table
      grid
      v-bind="{ ...$props, ...$attrs }"
      @request="requestHandler"
      @update:pagination="paginationHandler"
      row-key="id"
      selection="multiple"
      :selected.sync="selected"
    >
      <template v-slot:item="props">
        <div class="RecruitDataTable__Row">
          <div
            class="RecruitDataTable__Cell RecruitDataTable__Cell_LeftPadding RecruitDataTable__Cell_Center"
          >
            <input
              class="LabelSelect__Select"
              :id="props.row.id"
              type="checkbox"
              v-model="selected"
              :disabled="props.row.status !== '15'"
              :value="props.row"
            />
            <label :for="props.row.id" class="LabelSelect__Label" />
          </div>
          <div class="RecruitDataTable__Cell RecruitDataTable__Cell_Name">
            <limit-indicator :state-recruit="props.row.stateRecruit" />
            <router-link
              class="RecruitDataTable__NameLink"
              :to="{ name: 'recruit-personal', params: { id: props.row.id } }"
            >
              {{ props.row.fullName }}
            </router-link>
            <div class="RecruitDataTable__Idern">
              <span>
                {{ props.row.idern }}
              </span>
            </div>
          </div>
          <div class="RecruitDataTable__Cell RecruitDataTable__Cell_Row">
            <span>{{ props.row.regAddress }}</span>
          </div>
          <div>
            <span class="RecruitDataTable__Cell RecruitDataTable__Cell_Row">
              {{ props.row.currentVK }}
            </span>
          </div>
          <div class="RecruitDataTable__Cell RecruitDataTable__Cell_Status">
            <status-box :status="props.row.status" borderless />
          </div>
        </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);
      }
    }
  }
}

.RecruitDataTable {
  width: 100%;
  margin-left: 0;
  margin-right: 0;

  &__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 1fr 1fr 0.6fr;
  }

  &__HeaderCheckBox {
    margin-top: -4px;
    margin-bottom: -4px;
    padding-left: 12px;
    padding-right: 12px;
    border-right: 1px solid rgba(1, 72, 116, 0.11);
  }

  &__HeaderLabelCheckBox {
    &_Disabled {
      opacity: 0.5;
    }
  }

  &__HeaderTitle {
    align-content: center;
    margin: -4px 0;

    &:not(:last-child) {
      border-right: 1px solid rgba(1, 72, 116, 0.11);
    }

    &_Center {
      text-align: center;
    }

    &_LeftPadding {
      padding-left: 4px;
    }
  }

  &__Row {
    display: grid;
    grid-template-columns: 42px 1fr 1fr 1fr 0.6fr;
    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 {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
    }
    &_Status {
      margin-top: -4px;
      margin-bottom: -4px;
      padding: 0;
    }
  }
  &__Idern {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
  }
  &__NameLink {
    text-decoration: none;

    &:link {
      color: #015e98;
    }

    &:visited {
      color: rgba(2, 12, 18, 0.9);
    }
  }
}
::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);
}
</style>

<script lang="ts">
import { Prop, Component, Emit, Vue, Watch } from 'vue-property-decorator';
import { copyToClipboard } from 'quasar';
import { formatDate, mask } from '@/recruits/utils';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import { SearchRecruitResponse } from '@/recruits/openapi/person-registry';
import LimitIndicator from '@/recruits/components/common/limit-indicator .vue';

@Component({
  components: { LimitIndicator, StatusBox },
  methods: { mask, formatDate },
})
export default class DataTable extends Vue {
  @Prop()
  resetSelect: boolean;

  @Watch('resetSelect')
  resetSelectedRows(val: boolean): void {
    if (val) {
      this.selected = [];
      this.massSelected = false;
    }
  }

  selected: SearchRecruitResponse[] = [];
  massSelected = false;

  get disabledMassCheckbox() {
    if (Array.isArray(this.$attrs.data)) {
      return !this.$attrs.data.filter((row: SearchRecruitResponse) => {
        return row.status === '15';
      }).length;
    } else {
      return false;
    }
  }

  @Watch('massSelected')
  massSelect(newData: boolean): void {
    this.selected = [];
    if (newData) {
      if (Array.isArray(this.$attrs.data)) {
        this.$attrs.data.forEach((item: SearchRecruitResponse) => {
          if (item?.status === '15') {
            this.selected.push(item);
          }
        });
      }
    } else {
      this.selected = [];
    }
  }

  @Watch('selected')
  @Emit('row-selected')
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  selectRow(): void {}

  @Emit('request')
  requestHandler(): void {
    this.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}' скопирован`,
    });
  }
}
</script>
