<template>
  <div>
    <webview
      v-if="!pluginInfo.subType"
      id="webview"
      :src="path"
      :preload="preload"
    ></webview>
    <!-- 聚合搜索 -->
    <search-bowser v-else-if="isWebview" :src="webviewPath"> </search-bowser>
    <!-- 本地插件 -->
    <div v-else>
      <webview id="webview" :src="templatePath" :preload="preload"></webview>
      <!-- <webview id="webview" :src="templatePath" :preload="preload"></webview> -->
    </div>
  </div>
</template>

<script>
const path = require("path");
import { mapMutations, mapState } from "vuex";
import { remote, ipcRenderer, shell } from "electron";
import searchBowser from "../search-bowser/index.vue";

const currentWindow = remote.getCurrentWindow();
const winId = currentWindow.id;

export default {
  name: "index.vue",
  components: { searchBowser },
  data() {
    return {
      // preload: `File://${path.resolve(
      //   __dirname,
      //   "../../assets/common/preload.js"
      // )}`,
      preload: `File://${path.resolve(__static, "./preload.js")}`,
      webview: null,
      config: {}
    };
  },
  mounted() {
    this.setSubPlaceHolder("按 Esc 键退出插件");
    // this.setSubPlaceHolder("按 ⌫ 键退出插件");
    this.webview = document.querySelector("webview");
    // if (!this.webview) return;
    this.webview.addEventListener("dom-ready", () => {
      this.webview.send("onPluginReady", this.pluginInfo);
      this.webview.send("onPluginEnter", this.pluginInfo);
      this.commonUpdate({
        pluginLoading: true
      });
    });
    this.webview.addEventListener("did-finish-load", () => {
      this.commonUpdate({
        pluginLoading: false
      });
    });
    this.webview.addEventListener("ipc-message", event => {
      if (event.channel === "insertCSS") {
        this.webview.addEventListener("dom-ready", () => {
          this.webview.insertCSS(event.args[0]);
        });
      }
      if (event.channel === "executeJavaScript") {
        this.webview.addEventListener("dom-ready", () => {
          this.webview.executeJavaScript(event.args[0]);
        });
      }
      if (event.channel === "setSubInput") {
        this.setSubPlaceHolder(event.args[0].placeHolder);
      }
      if (event.channel === "removeSubInput") {
        this.commonUpdate({
          searchValue: ""
        });
      }
      if (event.channel === "setSubInputValue") {
        this.commonUpdate({
          searchValue: event.args[0].text
        });
        this.webview.send("msg-back-setSubInput", this.searchValue);
      }
      if (event.channel === "templateConfig") {
        this.config = event.args[0].config;
      }
      if (event.channel === "getFeatures") {
        this.webview.send("msg-back-getFeatures", this.pluginDetail);
      }
      if (event.channel === "setFeature") {
        this.commonUpdate({
          devPlugins: this.devPlugins.map(plugin => {
            if (plugin.name === this.pluginInfo.name) {
              return {
                ...plugin,
                features: [...plugin.features, event.args[0].feature]
              };
            }
            return plugin;
          })
        });
      }
      if (event.channel === "removeFeature") {
        this.commonUpdate({
          devPlugins: this.devPlugins.map(plugin => {
            if (plugin.name === this.pluginInfo.name) {
              return {
                ...plugin,
                features: plugin.features.filter(
                  fe => fe.code !== event.args[0].code
                )
              };
            }
            return plugin;
          })
        });
      }
    });
  },
  created() {
    if (this.isWebview) {
      ipcRenderer.send("changeWindowSize-rubick", {
        width: 1400,
        height: 800
      });
      ipcRenderer.send("changeWindowPos-rubick", {
        x: 100,
        y: 100
      });
    }
  },
  methods: {
    ...mapMutations("main", ["setSubPlaceHolder", "commonUpdate"])
  },
  beforeDestroy() {
    const webview = document.querySelector("webview");
    webview && webview.send("onPluginOut", this.pluginInfo);
  },
  computed: {
    ...mapState("main", [
      "webviewPath",
      "options",
      "searchValue",
      "devPlugins",
      "pluginInfo"
    ]),
    pluginDetail() {
      return (
        this.devPlugins.filter(
          plugin => plugin.name === this.pluginInfo.name
        )[0] || {}
      ).features;
    },
    isWebview() {
      return this.pluginInfo.subType === "webview";
    },
    path() {
      this.$nextTick(() => {
        this.webview && this.webview.send("onPluginEnter", this.pluginInfo);
      });
      return `File://${this.pluginInfo.sourceFile}`;
    },
    templatePath() {
      return `File://${path.join(__static, "./plugins/tpl/index.html")}?code=${
        this.pluginInfo.detail.code
      }&targetFile=${encodeURIComponent(
        this.pluginInfo.sourceFile
      )}&preloadPath=${this.pluginInfo.preload}`;
    }
  }
};
</script>

<style lang="less">
#webview {
  width: 100%;
  height: calc(~"100vh - 74px");
}
</style>
