<template>
<v-container
  fluid
>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="content-wrap">
        <div class="content-body">
          <template>
            <v-card class="card-detail">
              <div class="card-detail-header">
                <v-row>
                  <v-col
                    cols="3"
                  >
                    <v-img
                      src="https://picsum.photos/150/165?random"
                      max-height="130"
                      contain
                    ></v-img>
                  </v-col>
                  <v-col
                    cols="7"
                  >
                    <div class="px-5">
                      <small class="joindate">Join Date: 11/05/2020</small>
                      <h3 class="compnay-name">Kenco Innovation Lab</h3>
                      <div class="hq-phone">1-800-758-3289</div>
                      <div class="hq-email">debra.phillips@kencogroup.com</div>
                      <div class="hq-website">https://www.kencogroup.com/</div>
                      <div class="hq-address">2001 Riverside Drive Chattanooga, TN 37406</div>
                    </div>
                  </v-col>
                  <v-col
                    class="text-right"
                    cols="2"
                  >
                    <v-menu
                      bottom
                      left
                      transition="slide-y-transition"
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn
                          icon
                          v-bind="attrs"
                          v-on="on"
                        >
                          <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                      </template>
                      <v-list>
                        <v-list-item>
                            <v-list-item-title>Edit</v-list-item-title>
                        </v-list-item>
                        <v-list-item>
                            <v-list-item-title>Delete</v-list-item-title>
                        </v-list-item>
                      </v-list>
                    </v-menu>
                  </v-col>
                </v-row>
              </div>
              <!--/.card-detail-header -->
              <div class="card-detail-body">
                <v-row>
                  <v-col
                    cols="3"
                  >
                  </v-col>
                  <v-col
                    cols="4"
                  >
                    <v-card-title>
                      Contact
                    </v-card-title>
                    <v-card-subtitle>
                      <h4 class="contact-name">Hong Gildong</h4>
                      <div class="hq-position">Officer</div>
                      <div class="hq-phone">1-800-758-3289</div>
                      <div class="hq-email">debra.phillips@kencogroup.com</div>
                      <div class="hq-website">https://www.kencogroup.com/</div>
                      <div class="hq-address">2001 Riverside Drive Chattanooga, TN 37406</div>
                    </v-card-subtitle>
                  </v-col>
                  <v-col
                    cols="5"
                  >
                    <v-card-title>
                      Optional
                    </v-card-title>
                    <v-card-subtitle>
                      Total warehouse: 10
                    </v-card-subtitle>
                  </v-col>
                </v-row>
              </div>
              <!--/.card-detail-body -->
            </v-card>
          </template>
        </div>
        <!--/.content-body -->
      </div>
      <!--/.content-wrap -->
    </v-col>
  </v-row>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="content-wrap">
        <div class="content-header">
          <h3>Warehouse</h3>
          <v-spacer></v-spacer>
          <v-btn
            depressed
            color="primary"
            dark
            @click="New"
          >
            New
          </v-btn>
        </div>
        <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="gname"
            sort-by="gname"
            class="elevation-1"
            :search="search"
          >
            <template v-slot:item.wims="{ item }">
              <v-btn
                small
              >
                Go to WIMS
              </v-btn>
            </template>
            <template v-slot:item.gname="{ item }">
              <v-btn text router :to="{name:'Analysis'}" 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: 'CustomerDetail',

    data: () => ({
      show: false,

      dates: ['2019-09-10', '2019-09-20'],
      menu: false,
      headers: [
          { text: 'Warehouse', value: 'gname' },
          { text: 'Location', value: 'glocation' },
          { text: 'Contact name', value: 'cname' },
          { text: 'Contact phone', value: 'cphone' },
          { text: 'Contact Email', value: 'cemail' },
          { text: 'WIMS', value: 'wims' },
        ],
        customerItems: [
          {
            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>
