<template>
  <div class="full-width">
    <div class="full-width headers RecruitDataTable-Row">
      <div class="q-pl-sm">ФИО / Дата рождения / ИД ЕРН</div>
      <div class="q-pl-sm">Адрес регистрации</div>
      <div class="q-pl-sm">Военный комиссариат</div>
      <div class="q-pl-sm">Серия / № паспорта</div>
      <div class="q-pl-sm">СНИЛС</div>
      <div class="q-pl-sm">Причина отказа</div>
      <div class="text-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="full-width body RecruitDataTable-Row"
          @dblclick="/*dblClickHandler(props.row.id)*/"
        >
          <div>
            <div class="name">
              <router-link
                class="cursor-pointer"
                :to="{ name: 'recruit-personal', params: { id: props.row.id } }"
              >
                {{ props.row.fullName }}
              </router-link>
            </div>
            <div class="row crap-stick gray-numbers q-pt-xs">
              <div class="flex col no-wrap">
                <q-icon name="pgs-calendar" size="20px" />
                <span class="text-no-wrap ellipsis">
                  {{ formatDate(props.row.birthDate) }}
                </span>
              </div>
              <div class="flex col">
                <span class="text-no-wrap ellipsis">
                  {{ props.row.idERN }}
                </span>
              </div>
            </div>
          </div>
          <div class="flex">
            <span class="multiline" :title="props.row.regAddress">{{
              props.row.regAddress
            }}</span>
          </div>
          <div class="flex">
            <span class="multiline" :title="props.row.targetVK">{{
              props.row.targetVK
            }}</span>
          </div>
          <div>
            <div class="row full-height relative-position">
              <span
                class="col-12 full-width absolute-center text-no-wrap ellipsis"
              >
                {{ props.row.passportSeries }} №
                {{ props.row.passportNumber }}
              </span>
            </div>
          </div>
          <div>
            <div class="row snils full-height items-center no-wrap">
              <q-space />
              <span class="text-no-wrap ellipsis">
                {{ props.row.snils }}
              </span>
              <q-icon
                size="sm"
                color="#1491CF"
                name="pgs-copy"
                class="copy-button cursor-pointer"
                @click="sendToClipBoard(props.row.snils)"
              />
              <q-space />
            </div>
          </div>
          <div class="flex">
            <span class="multiline">
              {{ cause[props.row.cause] }}
            </span>
          </div>
          <div class="status">
            <status-box :status="props.row.status" borderless />
          </div>
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
div.header-checkbox {
  margin-top: -4px;
  margin-bottom: -4px;
  padding-left: 12px;
  padding-right: 12px;
}

.LabelSelect {
  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;
  cursor: pointer;
  &-Select {
    display: none;
    &:disabled + .LabelSelect {
      background-color: #efefef;
      border: none;
      cursor: not-allowed;
    }
    &:checked + .LabelSelect {
      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);
      }
    }
  }
}

.headers {
  padding: 16px 0 6px 0;
  > 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;
  }
}

.body {
  max-height: 5em;
  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;

  .crap-stick {
    > div > span {
      line-height: 20px;
    }

    ::v-deep i.pgs-calendar {
      top: -1px;
    }
  }

  > div.checkbox-column {
    padding-left: 11px;
    padding-right: 11px;
  }
  > div {
    position: relative;
    padding: 0 8px;
    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: 16px;
    .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;
      a {
        text-decoration: none;
        &:link {
          color: #015e98;
        }
        &:visited {
          color: rgba(2, 12, 18, 0.9);
        }
      }
    }
    .multiline {
      align-self: center;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .gray-numbers {
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      // color: rgba(2, 12, 18, 0.58);
      display: flex;
      align-items: center;
    }
    .snils {
      font-size: 14px;
      line-height: 16px;
      // color: rgba(2, 12, 18, 0.9);
      .copy-button {
        padding-left: 2px;
        color: #1491cf;
      }
    }
    &.status {
      margin-top: -4px;
      margin-bottom: -4px;
      padding: 0;
      // border-top-right-radius: 8px;
      // border-bottom-right-radius: 8px;
    }
    &.lists {
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      // color: rgba(2, 12, 18, 0.58);

      a {
        text-decoration: none;
        &:link {
          color: #015e98;
        }
        &:visited {
          color: rgba(2, 12, 18, 0.9);
        }
      }
    }
  }
  &: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);
  }
  > div:not(:nth-last-of-type(-n + 2))::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(1, 72, 116, 0.11);
  }
}

::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);
}

.RecruitDataTable {
  &-Row {
    display: grid;
    grid-template-columns: 300px 1.4fr 1.4fr 146px 146px 200px 200px;
  }
  &-Col {
    &__VK {
      color: rgba(2, 12, 18, 0.9);
    }
    &__BirthDate {
      margin-right: 22px;
    }
  }
}
</style>

<script lang="ts">
import { Component, Emit, Prop, 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 { statusDictionary } from '@/recruits/models';
import { StringDictionary } from '@/recruits/state/ervu-dictionaries';

@Component({
  components: { 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: string[] = [];
  massSelected = false;

  @Watch('massSelected')
  massSelect(newData: boolean): void {
    this.selected = [];
    if (newData) {
      if (Array.isArray(this.$attrs.data)) {
        this.$attrs.data.forEach((item: Record<string, any>) => {
          if (item?.status === '1.1') {
            this.selected.push(item.id);
          }
        });
      }
    } else {
      this.selected = [];
    }
  }

  @Emit('row-selected')
  @Watch('selected')
  selectRow() {}

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

  @Emit('request')
  requestHandler(value: any) {
    this.selected = [];
  }

  @Emit('update:pagination')
  paginationHandler() {}

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

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

  get cause(): StringDictionary {
    return this.$store.getters['ervuDictionaries/causeNotConfirmDictionary'];
  }
}
</script>
