<template>
  <div class="full-width">
    <div
      class="full-width headers RecruitDataTable-Row"
      :style="columnsStyleField"
    >
      <div class="q-pl-xs columnTitle" v-for="field in columnsTitleField">{{ field }}</div>
    </div>
    <q-table
      grid
      v-bind="{ ...$attrs }"
      @request="requestHandler"
      @update:pagination="paginationHandler"
      row-key="id"
    >
      <template v-slot:item="props">
        <div
          class="full-width body RecruitDataTable-Row"
          :style="columnsStyleField"
        >
          <div class="RecruitDataTable-Row__created" v-if="columns.includes('created') && props.row.createdAt">
            <date-time-cell
              align="left"
              icon="pgs-decision-date"
              :value="props.row.createdAt"
              time
            />
          </div>
          <div class="RecruitDataTable-Row__period" v-if="columns.includes('period')">
            <period-cell
              :from="get(props.row, 'params.range.from', '')"
              :to="get(props.row, 'params.range.to', '')"
            />
          </div>
          <div class="RecruitDataTable-Row__period" v-if="columns.includes('year')">
            <period-cell
              :from="years17Table(get(props.row, 'params.year'), 'start')"
              :to="years17Table(get(props.row, 'params.year'), 'end')"
            />
          </div>
          <div class="RecruitDataTable-Row__name" v-if="columns.includes('name') && props.row.userName">
            <icon-text-pair-cell
              icon="pgs-user"
              icon-blank="pgs-user-no"
              align="left"
              :value="props.row.userName"
            />
          </div>
          <div class="flex justify-end RecruitDataTable-Row__download" v-if="columns.includes('download')">
            <q-btn
              v-if="props.row.s3uri && props.row.finishedAt"
              dense
              round
              icon="pgs-import"
              @click="
                fetchDocumentAttachment(
                  props.row,
                  'download',
                  's3filename',
                  's3uri'
                )
              "
            />
            <q-btn v-else-if="!props.row.finishedAt" disable dense round loading style="color: #015e98" />
            <q-btn v-else disable>Нет данных</q-btn>

          </div>
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
.headers {
  padding: 16px 0 6px 0;

  > div {
    color: rgba(2, 12, 18, 0.58);
    overflow: hidden;
    text-overflow: ellipsis;
    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 4px 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: 12px;
    line-height: 14px;

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

    .reason {
      color: rgba(2, 12, 18, 0.9);
      /* Heavy weight/Text/Body Text */
      font-size: 14px;
      font-family: Golos UI;
      // font-weight: 500;
      line-height: 16px;
    }

    .gray-numbers {
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      //color: rgba(2, 12, 18, 0.58);
      display: flex;
      align-items: center;
    }

    .number {
      //color: rgba(2, 12, 18, 0.58);
      font-size: 14px;
      font-family: 'Golos UI', sans-serif;
      line-height: 16px;

      .series {
        color: rgba(2, 12, 18, 0.9);
        //   font-weight: 500;
      }
    }

    &.dates {
      color: rgba(2, 12, 18, 0.58);
      font-size: 14px;
      font-family: 'Golos UI', sans-serif;
      line-height: 16px;

      ::v-deep {
        i {
          top: -1px;
        }
      }
    }

    .attendance {
      color: rgba(2, 12, 18, 0.9);
      font-size: 14px;
      font-family: Golos UI;
      line-height: 16px;

      span.time {
        //color: rgba(2, 12, 18, 0.58);
      }
    }

    &.status {
      margin-top: -4px;
      margin-bottom: -4px;
      padding: 0;
      // border-top-right-radius: 8px;
      // border-bottom-right-radius: 8px;
    }
  }

  // &: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 + 1))::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: 1fr 2fr 2fr minmax(40px, 0.3fr);
    .time {
      color: black;
    }
  }

  &-Col {
    &__VK {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.9);
    }

    &__BirthDate {
      margin-right: 22px;
    }
  }
}
.columnTitle {
  text-align: center;
}
.RecruitDataTable-Row {
  &__created {
    > div {
      display: flex;
      justify-content: center;
    }
  }
  &__period {
    > div {
      display: flex;
      justify-content: center;
    }
  }
  &__name {
    > div {
      display: flex;
      justify-content: center;
    }
  }
  &__download {
    display: flex;
    justify-content: center;
  }
}
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
import { get } from 'lodash';
import DateTimeCell from '@/recruits/components/common/cells/date-time.vue';
import IconTextPairCell from '@/recruits/components/common/cells/icon-text-pair.vue';
import PeriodCell from '@/recruits/components/common/cells/period.vue';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';
import {formatDate} from "@/recruits/utils";
import moment from "moment";

const columnTitles: { [key: string]: string } = {
  created: 'Дата и время создания',
  period: 'Период отчета',
  year: 'Период отчета',
  name: 'Автор отчета',
  download: 'Действия',
};
const columnSize: { [key: string]: string } = {
  created: '0.5fr',
  period: '0.7fr',
  year: '0.7fr',
  name: '1fr',
  download: '0.3fr',
};
@Component({
  components: {
    DateTimeCell,
    IconTextPairCell,
    PeriodCell,
  },
  methods: {
    fetchDocumentAttachment,
    get,
  },
})
export default class DataTable extends Vue {
  @Prop({ default: () => [] })
  columns: Array<any>;

  get columnsTitleField() {
    return this.columns.length && this.columns.map((e) => columnTitles[e]);
  }

  years17Table(year: string, option: 'start' | 'end'): string {
    if (year) {
      const result = option === 'start' ? new Date().setFullYear(Number(year), 0, 1) : new Date().setFullYear(Number(year), 11, 31)
      return moment(result).format('DD.MM.YYYY');
    } else {
      return '';
    }
  }

  get columnsStyleField(){
    return `grid-template-columns: ${this.columns.map((e) => columnSize[e]).join(' ')}`
  }

  // get columnsStyleField() {
  //   return `grid-template-columns: repeat(${
  //     this.columns.length - 1
  //   }, 1fr) minmax(40px, 0.3fr);`;
  // }

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

  @Emit('request')
  requestHandler(value: any) {}
}
</script>
