<template>
  <widget-wrapper v-bind="$props" ref="widget" class="q-mt-md">
    <div class="tf-wrapper">
      <div v-if="subSchema" class="tf-form-generator">
        <FormGeneratorWrapper
          ref="formGeneratorWrapper"
          @update-validation="updateValidation"
          :model="tableFillModel"
          :schema="subSchema"
          :attractionCode="attractionCode"
          :reset-attractions.sync="resetAttractions"
          mode="create"
        />
      </div>
      <div class="tf-add-btn row items-center">
        <q-btn
          @click="addRow"
          :label="selectedItem ? 'Сохранить' : 'Добавить'"
          :icon-right="selectedItem ? 'edit' : 'add_circle'"
          unelevated
          color="primary"
        ></q-btn>
      </div>
      <div class="tf-table-wrapper">
        <q-table
          :card-style="{
            width: '100%',
            background: '#f2f2f2',
            border: 'none',
            boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
          }"
          :card-container-style="{ width: '100%' }"
          :grid="gridView"
          :hide-bottom="false"
          :rows-per-page-options="[0]"
          bordered
          separator="cell"
          :data="displayItems"
          :columns="columns"
          :hide-pagination="true"
        >
          <template #item="props">
            <q-card
              :flat="
                (props && props.row.rowId) !==
                (selectedItem && selectedItem.rowId)
              "
              bordered
              class="q-mb-md q-mr-md q-pa-md col-md-2"
            >
              <q-card-section class="entry header" v-if="hasHeaderField">
                {{ getHeaderValue(props) }}
              </q-card-section>
              <template v-for="col in props.cols">
                <TableFillView
                  :key="col.name"
                  :col="col"
                  :item="props"
                  :schema="subSchema"
                  :exclude-header-col-from-card-body="
                    excludeHeaderColFromCardBody
                  "
                />
              </template>
              <q-card-actions align="right" class="self-end">
                <q-btn
                  text-color="negative"
                  v-if="!props.row.forbidDelete && allowDelete"
                  @click="
                    deleteItem = props;
                    deleteDialog = true;
                  "
                >
                  Удалить
                </q-btn>
                <q-btn
                  text-color="primary"
                  v-if="allowEdit"
                  @click="toggleSelectItem(props)"
                >
                  {{
                    (props.row && props.row.rowId) ===
                    (selectedItem && selectedItem.rowId)
                      ? 'Отмена'
                      : 'Изменить'
                  }}
                </q-btn>
              </q-card-actions>
            </q-card>
          </template>
          <template #no-data>
            <div class="no-data">Нет добавленых записей</div>
          </template>
        </q-table>
      </div>
      <q-dialog persistent v-model="deleteDialog">
        <q-card v-if="deleteItem" bordered class="q-pa-md">
          <q-card-section class="entry header" v-if="hasHeaderField">
            {{ getHeaderValue(deleteItem) }}
          </q-card-section>
          <template v-for="col in deleteItem.cols">
            <TableFillView
              :key="col.name"
              :col="col"
              :item="deleteItem"
              :schema="subSchema"
              :exclude-header-col-from-card-body="excludeHeaderColFromCardBody"
            />
          </template>
          <q-card-actions align="right">
            <q-btn
              @click="
                deleteDialog = false;
                deleteItem = null;
              "
              outline
              color="negative"
              >Отмена</q-btn
            >
            <q-btn @click="deleteRow(deleteItem)" color="negative"
              >Удалить</q-btn
            >
          </q-card-actions>
        </q-card>
      </q-dialog>
      <div class="text-negative" v-if="isInvalid && hasError">
        {{ errorMessage }}
      </div>
    </div>
  </widget-wrapper>
</template>

<script src="./TableFill.ts" lang="ts"></script>

<style lang="scss">
.tf-wrapper .q-table__grid-item {
  width: 100% !important;
}

.tf-form-generator .subgroup-holder {
  margin-bottom: unset;
}
</style>

<style lang="scss" scoped>
.entry {
  padding: 0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  &.header {
    font-size: 18px;
    font-weight: 500;

    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
  }
}

.tf-wrapper {
  padding-bottom: 20px;
  padding-left: 25px;
  margin-bottom: 25px;
  border-left: 1px solid #e0e0e0;
}

.tf-add-btn {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  margin-top: 12px;
}

.no-data {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  padding: 24px;
  font-size: 14px;
  color: #7d7d7d;
}
</style>
