<template>
  <q-header reveal elevated :style="{background:baseData.nav.bg,color:baseData.nav.color}" height-hint="98" to="/index">
    <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
      <img :src="baseData.logo" style="height:45px; cursor:pointer;" class="q-mr-lg mobile-only"
        @click="CommonJump('/index',{})" />
      <q-tabs align="left" style="margin:0 auto;" class="desktop-only" shrink>
        <img :src="baseData.logo" style="height:45px; cursor:pointer;margin-right:100px;" class="q-mr-lg"
          @click="CommonJump('/index',{})" />
        <template v-for="(x, i) in baseData.nav.navs">
          <q-btn :key="i" stretch flat :label="x.title" type="a" :href="x.url" target="_blank" :no-wrap="true" />
          <!-- <q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" exact />
          <q-route-tab :key="i" :to="x.url" :label="x.title" v-else exact /> -->
        </template>
      </q-tabs>
      <q-btn flat dense round icon="menu" aria-label="Menu" class="mobile-only" label="選單" style="margin-left:auto;">
        <q-menu>
          <q-tabs align="left" vertical shrink>
            <template v-for="(x, i) in baseData.nav.navs">
              <q-btn style="display:block;" :key="i" stretch flat :label="x.title" @click="OpenNewUrl(x.url)" />
              <!-- <q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" exact />
              <q-route-tab :key="i" :to="x.url" :label="x.title" v-else exact /> -->
            </template>
          </q-tabs>
        </q-menu>
      </q-btn>
      <template v-if="LoginUser.accountId>0">
        <q-btn-dropdown style="color: #444;font-weight:bold;" class="q-ml-lg desktop-only"
          icon="iconfont iconicon-unlogin" :label="LoginUser.name" unelevated>
          <div class="row no-wrap q-pa-md">
            <div class="column">
              <q-list>
                <q-item clickable v-close-popup to="/account">
                  <q-item-section avatar>
                    <q-avatar icon="folder" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>帳號設定</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup to="/orderlist">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="secondary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>我的訂單</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup to="/demandlist">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="secondary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>我的需求單</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </div>
            <q-separator vertical inset class="q-mx-lg" />
            <div class="column items-center">
              <q-avatar size="72px">
                <img v-if="LoginUser.photo" :src="LoginUser.photo" />
                <img v-else src="https://cdn.quasar.dev/img/boy-avatar.png">
              </q-avatar>
              <div class="text-subtitle1 q-mt-md q-mb-xs">{{LoginUser.name}}</div>
              <q-btn color="primary" label="登出" @click="loginOut" push size="sm" v-close-popup />
            </div>
          </div>
        </q-btn-dropdown>
      </template>
      <template v-else>
        <q-btn flat style="color: #444;font-weight:bold;" class="q-ml-lg desktop-only" :label="$t('login')"
          icon="iconfont iconicon-unlogin" to="/login" />
        <q-btn flat style="color: #444;font-weight:bold;" class="mobile-only" icon="iconfont iconicon-unlogin"
          to="/login" />
      </template>
    </q-toolbar>
  </q-header>
</template>

<script>
  export default {
    props: {
      baseData: {
        type: Object,
        default: {}
      },
      title: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        subTitle: "",
        LoginUser: {},
      };
    },
    watch: {
      title: function (val, oldval) {
        this.subTitle = val;
      }
    },
    meta() {
      return {
        title: this.subTitle != "" ?
          `${this.subTitle} - ${this.baseData.name}` : this.baseData.name
      };
    },
    mounted() {
      if (localStorage.b2bUser) {
        this.LoginUser = JSON.parse(window.localStorage.getItem('b2bUser'));
      }
    },
    methods: {
      loginOut() {
        localStorage.removeItem("b2bUser");
        this.LoginUser = {};
        this.CommonJump('/index',{});
      }
    }
  };

</script>
