<template>
  <div class="home layout">
    <div class="home-head">
      <div class="head-logo"></div>
      <div class="head-actions">
        <span class="action-icon action-min" title="最小化" @click="minWin">
        </span>
        <span class="action-icon action-close" title="关闭" @click="close">
        </span>
      </div>
    </div>
    <div class="home-body">
      <router-view />
    </div>
    <div v-if="showFooter" class="home-footer">
      <div class="home-footer-ip">
        <i class="el-icon-monitor"></i><span>{{ domain || "0.0.0.0" }}</span>
      </div>
      <div v-if="isDev">
        <router-link :to="{ name: 'MagickTest' }"
          ><span>功能测试</span></router-link
        >
      </div>
      <div class="home-footer-version">版本号：{{ version }}</div>
    </div>
  </div>
</template>

<script>
const { ipcRenderer } = window.nodeRequire("electron");

export default {
  name: "layout",
  props: {
    backHandle: {
      type: Function,
    },
    showFooter: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV === "development",
      version: "1.0.4",
    };
  },
  computed: {
    domain() {
      return this.$store.state.domain;
    },
  },
  methods: {
    toBack() {
      if (this.backHandle && typeof this.backHandle === "function") {
        this.backHandle();
      } else {
        window.history.go(-1);
      }
    },
    minWin() {
      ipcRenderer.send("minimize-window");
    },
    maxWin() {
      ipcRenderer.send("maximize-window");
    },
    close() {
      this.$confirm("确认要退出系统吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          ipcRenderer.send("close-window");
        })
        .catch(() => {});
    },
  },
};
</script>
