<template>
<v-container
  fluid
>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="content-wrap">
        <div class="content-action">
          <v-spacer></v-spacer>
          <v-btn
            depressed
            color="primary"
            dark
            @click="$router.push({name:'CustomerNew'})"
          >
            New
          </v-btn>
        </div>
        <!--/.content-action -->
        <div class="content-header">
          <div class="total mr-5">Total: 2</div>
          <div class="form-search">
            <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>
        <!--/.content-header -->
        <div class="content-body">
          <v-data-table
            :headers="headers"
            :items="customerItems"
            item-key="name"
            sort-by="name"
            group-by="company"
            class="elevation-1"
            show-group-by
            :search="search"
          >
            <template v-slot:item.gname="{ item }">
              
              <v-btn v-if="item.category == 'Company'" text router :to="{name:'CustomerDetail'}" exact>
                {{ item.gname }}
              </v-btn>
              <v-btn v-if="item.category == 'Warehouse'" text router :to="{name:'WarehouseDetail'}" exact>
                {{ item.gname }}
              </v-btn>
            </template>
          </v-data-table>
        </div>
        <!--/.content-body -->
      </div>
      <!--/.content-wrap -->
    </v-col>
  </v-row>
</v-container>
</template>

<script>
  export default {
    name: 'Customer',

    data: () => ({
      dates: ['2019-09-10', '2019-09-20'],
      menu: false,
      headers: [
          { text: 'Group', value: 'category' },
          { text: 'Company', align: 'start', value: 'company' },
          { text: 'Company/Warehouse name', value: 'gname', groupable: false, },
          { text: 'Location', value: 'glocation', groupable: false, },
          { text: 'Contact name', value: 'cname', groupable: false, },
          { text: 'Contact phone', value: 'cphone', groupable: false, },
          { text: 'Contact Email', value: 'cemail', groupable: false, },
          { text: 'WIMS', value: 'wims', groupable: false, },
        ],
        customerItems: [
          {
            category: 'Company',
            company: 'Kenco Innovation Lab',
            gname: 'Kenco Innovation Lab',
            glocation: 'Chattanooga, TN, USA',
            cname: 'Trever Ehrlich',
            cphone: '+82-000-0000-0000',
            cemail: 'trever@kenco.com',
            wims: '1',
          },
          {
            category: 'Warehouse',
            company: 'Kenco Innovation Lab',
            gname: 'Kenco Innovation Lab',
            glocation: 'Chattanooga, TN, USA',
            cname: 'Trever Ehrlich',
            cphone: '+82-000-0000-0000',
            cemail: 'trever@kenco.com',
            wims: 'WIMS quicklink',
          },
        ],
    }),
    computed: {
      dateRangeText () {
        return this.dates.join(' ~ ')
      },
    },
  }
</script>
