<template>
  <div>
    <q-toolbar style="background-color: #3e9acd" class="shadow-2 text-white">
      <q-btn-dropdown
        v-touch-hold:10000.mouse="handleHold"
        :disable-dropdown="!show_advanced_menu"
        stretch
        flat
        icon="img:icons/favicon-32x32.png"
        label="电视机拼接盒"
        class="q-mr-sm"
      >
        <q-list>
          <q-item
            clickable
            v-close-popup
            @click="$refs.upgrade_dialog.showDialog()"
          >
            <q-item-section avatar>
              <q-icon name="system_update" />
            </q-item-section>
            <q-item-section>
              {{ $t("upgrade") }}
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
      <q-separator vertical inset />

      <q-btn
        stretch
        flat
        icon="settings"
        :label="$t('system setting')"
        class="q-mr-sm"
        @click="$refs.system_setting_dialog.showDialog()"
      />

      <q-btn
        stretch
        flat
        icon="description"
        :label="$t('file manage')"
        class="q-mr-sm"
        @click="$refs.file_manage_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="grid_on"
        :label="$t('grid setting')"
        class="q-mr-sm"
        @click="$refs.grid_setting_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="image"
        :label="$t('background image')"
        class="q-mr-sm"
        @click="$refs.background_image_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="art_track"
        :label="$t('subtitle')"
        class="q-mr-sm"
        @click="$refs.subtitle_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="backup"
        :label="$t('data import')"
        class="q-mr-sm"
        @click="$refs.recovery_database_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="cloud_download"
        :label="$t('data export')"
        class="q-mr-sm"
        @click="backupDB"
      />

      <q-btn
        stretch
        flat
        icon="stop"
        :label="$t('stop plan')"
        class="q-mr-sm"
        v-if="show_stop_plan"
        @click="stopPlan"
      />

      <q-space />
      <q-separator vertical inset />
      <q-btn-dropdown
        stretch
        flat
        icon="devices"
        :label="$store.state.device_ip_address"
        class="q-mr-sm"
      >
        <q-list>
          <q-item clickable v-close-popup @click="logout">
            <q-item-section avatar> <q-icon name="logout" /> </q-item-section>
            <q-item-section>
              {{ $t("logout") }}
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </q-toolbar>
  </div>
  <grid-setting-dialog ref="grid_setting_dialog" />
  <background-image-dialog ref="background_image_dialog" />
  <subtitle-dialog ref="subtitle_dialog" />
  <recovery-database-dialog ref="recovery_database_dialog" />
  <upgrade-dialog ref="upgrade_dialog" />
  <file-manage-dialog ref="file_manage_dialog" />
  <system-setting-dialog ref="system_setting_dialog" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "src/store";

import GridSettingDialog from "src/components/GridSettingDialog.vue";
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
import UpgradeDialog from "src/components/UpgradeDialog.vue";
import FileManageDialog from "src/components/FileManageDialog.vue";
import SubtitleDialog from "src/components/SubtitleDialog.vue";
import SystemSettingDialog from "src/components/SystemSettingDialog.vue";

import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import GlobalData from "src/common/GlobalData";
import { api } from "boot/axios";
import { HttpProtocol } from "src/entities/HttpProtocol";
import { SessionStorage, openURL, useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { NotifyMessage } from "src/common/ClientConnection";

export default defineComponent({
  name: "PageTopToolBar",

  components: {
    GridSettingDialog,
    BackgroundImageDialog,
    RecoveryDatabaseDialog,
    UpgradeDialog,
    FileManageDialog,
    SubtitleDialog,
    SystemSettingDialog,
  },

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_advanced_menu = ref(false);
    let show_stop_plan = ref(false);

    EventBus.getInstance().on(
      EventNamesDefine.NotifyMessage,
      (notify: NotifyMessage) => {
        if (notify) {
          switch (notify.packet.command) {
            case Protocol.Commands.kCurrentRunningPlanStateChanged:
              {
                const temp = JSON.parse(
                  notify.data
                ) as Protocol.PlanRunningStateChangeNotifyEntity;
                if (temp && temp.plan) {
                  show_stop_plan.value = temp.running;
                }
              }
              break;
          }
        }
      }
    );

    return {
      show_advanced_menu,
      show_stop_plan,

      async backupDB() {
        let client = GlobalData.getInstance().getCurrentClient();
        if (client) {
          let url = new URL(client.url);
          url.port =
            GlobalData.getInstance().applicationConfig?.httpserver_port ??
            HttpProtocol.DefaultHttpPort.toString();
          url.pathname = HttpProtocol.RequestPathUpdateDBBackupFile;
          url.protocol = "http:";
          console.log(url.toString());
          let response = await api.get(url.toString());
          if (response.status == 200 && response && response.data) {
            url.pathname =
              HttpProtocol.RequestPathDBBackup + "/" + response.data;
            openURL(url.toString());
          } else {
            $q.notify({
              type: "warning",
              message: $t.t("data export ") + $t.t("fail") + "!",
              position: "top",
              timeout: 1000,
            });
          }
        }
      },
      handleHold() {
        show_advanced_menu.value = true;
      },
      stopPlan() {
        GlobalData.getInstance().getCurrentClient()?.stopCurrentRunningPlan();
        $q.notify({
          color: "positive",
          icon: "done",
          message:
            $t.t("send") +
            $t.t("stop plan") +
            $t.t("directives") +
            $t.t("success"),
          position: "top",
          timeout: 1000,
        });
      },
      logout() {
        SessionStorage.clear();
        window.location.reload();
      },
    };
  },
});
</script>
