<template>
<v-container
  fluid
>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="list-wrap">
        <div class="list-action">
          <v-spacer></v-spacer>

          <v-dialog
            v-model="dialog"
            scrollable
            max-width="500px"
          >
            <template v-slot:activator="{ on, attrs }">   
              <v-btn
                depressed
                color="primary"
                dark
                v-bind="attrs"
                v-on="on"
                class="mr-2"
              >
                New
              </v-btn>         
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>

              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col
                      cols="12"
                      class="pa-0"
                    >
                      <v-menu
                        ref="menu"
                        v-model="menu"
                        :close-on-content-click="false"
                        :return-value.sync="date"
                        transition="scale-transition"
                        offset-y
                        min-width="290px"
                      >
                        <template v-slot:activator="{ on, attrs }">
                          <v-text-field
                            v-model="editedItem.date"
                            label="Date"
                            prepend-icon="mdi-calendar"
                            readonly
                            v-bind="attrs"
                            v-on="on"
                          ></v-text-field>
                        </template>
                        <v-date-picker
                          v-model="date"
                          no-title
                          scrollable
                        >
                          <v-spacer></v-spacer>
                          <v-btn
                            text
                            color="primary"
                            @click="menu = false"
                          >
                            Cancel
                          </v-btn>
                          <v-btn
                            text
                            color="primary"
                            @click="$refs.menu.save(date)"
                          >
                            OK
                          </v-btn>
                        </v-date-picker>
                      </v-menu>
                    </v-col>
                    <v-col
                      cols="12"
                      class="pa-0"
                    >
                      <v-select
                        :items="categoryItems"
                        v-model="editedItem.category"
                        label="Category"
                      ></v-select>
                    </v-col>
                    <v-col
                      cols="12"
                      class="pa-0"
                    >
                      <v-text-field
                        v-model="editedItem.title"
                        label="Title"
                        :rules="rules"
                        counter="25"
                        hint="This field uses counter prop"
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      class="pa-0"
                    >
                      <v-text-field
                        value="John Doe"
                        label="Writer"
                        readonly
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      class="pa-0"
                    >
                      <v-textarea
                        clearable
                        counter
                        v-model="editedItem.description"
                        label="Description"
                        :rules="rules"
                      ></v-textarea>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  color="blue darken-1"
                  text
                  @click="close"
                >
                  Cancel
                </v-btn>
                <v-btn
                  color="blue darken-1"
                  text
                  @click="save"
                >
                  Save
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          
          <v-dialog
          v-model="dialogDelete"
          max-width="500px"
          >
            <template v-slot:activator="{ on, attrs }">   
              <v-btn
                depressed
                @click="deleteItem(item)"
              >
                Delete
              </v-btn>           
            </template>
            <v-card>
              <v-card-title class="headline">Are you sure you want to delete this item?</v-card-title>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                color="blue darken-1"
                text
                @click="closeDelete"
                >Cancel</v-btn>
                <v-btn
                color="blue darken-1"
                text
                @click="deleteItemConfirm"
                >OK</v-btn>
                <v-spacer></v-spacer>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </div>
        <div class="list-header">
          <div class="total mr-5">Total: 2</div>
          <!-- <div class="total-selected mr-5">Selected: 1</div> -->
          <div class="form-daterange">
            <v-menu
              ref="menu"
              v-model="menuCanledar"
              :close-on-content-click="false"
              :return-value.sync="date"
              transition="scale-transition"
              offset-y
            >
              <template v-slot:activator="{ on, attrs }">
                <v-text-field
                  v-model="dateRangeText"
                  readonly
                  v-bind="attrs"
                  v-on="on"
                  label="date range"
                  prepend-inner-icon="mdi-calendar"
                  single-line
                  outlined
                  dense
                  hide-details
                  class="mt-0 pt-0"
                ></v-text-field>
              </template>
              <v-date-picker
                ref="picker"
                v-model="dates"
                range
              ></v-date-picker>
                <v-spacer></v-spacer>
                <v-btn
                  text
                  color="primary"
                  @click="menu = false"
                >
                  Cancel
                </v-btn>
                <v-btn
                  text
                  color="primary"
                  @click="$refs.menu.save(date)"
                >
                  OK
                </v-btn>
              </v-date-picker>
            </v-menu>
          </div>
          <div class="form-search ml-3">
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Keyword"
              single-line
              outlined
              dense
              hide-details
              class="mt-0 pt-0"
            ></v-text-field>
          </div>
          <v-spacer></v-spacer>
          <div class="list-control">
            <v-menu offset-y class="btn-download">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-download-box</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item>
                  <v-list-item-title>Excel</v-list-item-title>
                </v-list-item>
                <v-list-item>
                  <v-list-item-title>PDF</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

            <v-btn icon class="btn-printer">
              <v-icon>mdi-printer</v-icon>
            </v-btn>

            <v-menu 
              v-model="menuColumnSetting"
              :close-on-content-click="false"
              :nudge-width="100" 
              offset-y
              class="btn-column-setting">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-table-settings</v-icon>
                </v-btn>
              </template>
              <v-card>
                <v-list>
                  <v-list-item>
                    <v-checkbox
                      v-model="selected"
                      label="Select all"
                      value="Select all"
                    ></v-checkbox>
                  </v-list-item>
                </v-list>

                <v-divider></v-divider>

                <v-list>
                  <v-list-item>
                    <v-checkbox
                      v-model="selected"
                      label="name1"
                      value="name1"
                    ></v-checkbox>
                  </v-list-item>
                  <v-list-item>
                    <v-checkbox
                      v-model="selected"
                      label="name2"
                      value="name2"
                    ></v-checkbox>
                  </v-list-item>
                </v-list>

                <v-card-actions>
                  <v-spacer></v-spacer>

                  <v-btn
                    text
                    @click="menu = false"
                  >
                    Cancel
                  </v-btn>
                  <v-btn
                    color="primary"
                    text
                    @click="menu = false"
                  >
                    Save
                  </v-btn>
                </v-card-actions>
              </v-card>



            </v-menu>
          </div>
        </div>
        <div class="list-body">
          <v-data-table
            :headers="headers"
            :items="desserts"
            :search="search"
            sort-by="date"
            class="elevation-1"
            item-key="name"
            :single-select="singleSelect"
            show-select
          >
            <template v-slot:item.actions="{ item }">
              <v-icon
                small
                class="mr-2"
                @click="editItem(item)"
              >
                mdi-pencil
              </v-icon>
            </template>
            <template v-slot:no-data>
              <div class="list-nodata">no data</div>
            </template>
          </v-data-table>
        </div>
      </div>
    </v-col>
  </v-row>
</v-container>
</template>


<script>
//import bgaBodyHeader from '@/components/bgaBodyHeader.vue'

export default {
  name: 'ManagementNotice',
  components: {
    //bgaBodyHeader
  },

    data: () => ({
      dates: ['2019-09-10', '2019-09-20'],
      menu: false,

      categoryItems: ['Foo', 'Bar', 'Fizz', 'Buzz'],
      rules: [v => v.length <= 25 || 'Max 25 characters'],

      dialog: false,
      dialogDelete: false,
      search: '',
      singleSelect: false,
      selected: [],
      headers: [
        {
          text: 'Date',
          align: 'start',
          sortable: false,
          value: 'date',
        },
        { text: 'Category', value: 'category' },
        { text: 'Title', value: 'title' },
        { text: 'Writer', value: 'writer' },
        { text: 'Actions', value: 'actions', sortable: false },
      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        date: '',
        category: '',
        title: '',
        writer: '',
      },
      defaultItem: {
        date: '',
        category: '',
        title: '',
        writer: '',
      },
    }),

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },

    watch: {
      dialog (val) {
        val || this.close()
      },
      dialogDelete (val) {
        val || this.closeDelete()
      },
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.desserts = [
          {
            date: '2020-10-06',
            catagory: 'WIMS',
            title: 'System update',
            writer: 'admin',
          },
        ]
      },

      editItem (item) {
        this.editedIndex = this.desserts.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        this.editedIndex = this.desserts.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialogDelete = true
      },

      deleteItemConfirm () {
        this.desserts.splice(this.editedIndex, 1)
        this.closeDelete()
      },

      close () {
        this.dialog = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      closeDelete () {
        this.dialogDelete = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem)
        } else {
          this.desserts.push(this.editedItem)
        }
        this.close()
      },
    },
  }
</script>
