<!--
<template>
  <v-container>
    <v-layout justify-center>
      <v-flex xs12 sm12>
        <v-card class="elevation-1"></v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      anthropometricData:[],
    };
  },
  filters: {},
  methods: {
    init() {
      this.$store.dispatch("loading/setLoading", true);
      this.$http
        .get(`/api/cabinet/user/anthropometric`)
        .then(
          r => {
            this.anthropometricData = r.data.anthropometricData || [];
          },
          e => {
            this.$message.error(e.data.message);
          }
        )
        .finally(() => {
          this.$store.dispatch("loading/setLoading", false);
        });
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>
 -->


<template>
  <v-container>
    <v-layout justify-center>
      <v-flex xs12 sm12>
        <v-card class="elevation-1">
          <v-dialog
            v-model="dialog"
            max-width="500px">
            <template v-slot:activator="{ on }">
              <v-btn
                color="general"
                dark
                class="mb-2"
                v-on="on">Добавить новые данные пользователя</v-btn>
            </template>

            <v-card>
              <v-card-text>
                <v-container grid-list-md >
                  <v-layout wrap>
                    <v-flex
                      xs12
                      sm6
                      md4>
                      <v-text-field
                        v-model="editedItem.name"
                        label="Dessert name" />
                    </v-flex>
                    <v-flex
                      xs12
                      sm6
                      md4>
                      <v-text-field
                        v-model="editedItem.calories"
                        label="Calories" />
                    </v-flex>
                    <v-flex
                      xs12
                      sm6
                      md4>
                      <v-text-field
                        v-model="editedItem.fat"
                        label="Fat (g)"/>
                    </v-flex>
                    <v-flex
                      xs12
                      sm6
                      md4>
                      <v-text-field
                        v-model="editedItem.carbs"
                        label="Carbs (g)"/>
                    </v-flex>
                    <v-flex
                      xs12
                      sm6
                      md4>
                      <v-text-field
                        v-model="editedItem.protein"
                        label="Protein (g)"/>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer/>
                <v-btn
                  color="blue darken-1"
                  flat
                  @click="close">Отменить</v-btn>
                <v-btn
                  color="blue darken-1"
                  flat
                  @click="save">Сохранить</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-data-table
            :headers="headers"
            :items="desserts"
            class="elevation-1"
          >
            <!-- change table header color(or other properties) -->
            <template
              slot="headerCell"
              slot-scope="{ header }"
            >
              <span
                class="subheading font-weight-light text-general text--darken-3"
                v-text="header.text"
              ></span>
            </template>
            <template v-slot:items="props">
              <td>{{ props.item.name }}</td>
              <td>{{ props.item.calories }}</td>
              <td>{{ props.item.fat }}</td>
              <td>{{ props.item.carbs }}</td>
              <td>{{ props.item.protein }}</td>
              <td class="justify-center ">
                <v-icon
                  medium
                  class="mr-2"
                  @click="editItem(props.item)"
                >
                  edit
                </v-icon>
                <v-icon
                  medium
                  @click="deleteItem(props.item)"
                >
                  delete
                </v-icon>
              </td>
            </template>
            <template v-slot:no-data>
              <v-btn
                color="primary"
                @click="initialize">Сброс настроек</v-btn>
            </template>
          </v-data-table>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'left',
        sortable: false,
        value: 'name'
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Actions', value: 'name', sortable: false }
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      name: '',
      calories: '',
      fat: '',
      carbs: '',
      protein: ''
    },
    defaultItem: {
      name: '',
      calories: '',
      fat: '',
      carbs: '',
      protein: ''
    }
  }),
  computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'Новые данные пользователя' : 'Редактировать данные пользователя'
    }
  },
  watch: {
    dialog (val) {
      val || this.close()
    }
  },
  created () {
    this.initialize()
  },
  methods: {
    initialize () {
      this.desserts = []
    },
    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },
    deleteItem (item) {
      const index = this.desserts.indexOf(item)
      confirm('Вы точно уверены, что хотите удалить данные пользователя?') && this.desserts.splice(index, 1)
    },
    close () {
      this.dialog = false
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      }, 300)
    },
    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
      }
      this.close()
    }
  }
};
</script>