<template>
  <!-- <div class="search_bowser"> -->
  <a-tabs
    size="small"
    :hideAdd="true"
    v-model="activeTab"
    type="editable-card"
    @edit="onEdit"
  >
    <a-tab-pane
      v-for="tab in tabs"
      :key="tab.key"
      :tab="tab.title"
      :closable="true"
    >
      <webview
        v-open
        :src="tab.src"
        :preload="preload"
        disablewebsecurity
        nodeIntegration
      ></webview>
    </a-tab-pane>
  </a-tabs>
  <!-- </div> -->
</template>
<script>
import { mapState } from "vuex";
import axios from "axios";
import { readFileSync } from "fs";
// import list from "./dic.js";
const path = require("path");
export default {
  props: {
    src: {
      type: String,
      default: ""
    }
  },
  watch: {
    src: {
      handler: function (val) {
        const key = `newTab${this.newTabIndex++}`;
        this.tabs.push({
          title: "搜索" + this.searchValue,
          key,
          src: val
        });
        this.activeTab = key;
      }
    }
  },
  computed: {
    ...mapState("main", ["searchValue"])
  },
  created() {
    // axios.get("http://8.141.152.220:8000/keyword/12").then(({ data: res }) => {
    //   console.log(res);
    // });
  },
  data() {
    const tabs = [{ title: "搜索", key: "111", src: this.src }];
    return {
      // webview: null,
      newTabIndex: 0,
      tabs,
      list: "",
      activeTab: tabs[0].key,
      preload: `File://${path.resolve(
        __dirname,
        "../../assets/common/preload.js"
      )}`
    };
  },
  directives: {
    open: {
      inserted: (el, binding, vnode) => {
        const _this = vnode.context;
        el.addEventListener("new-window", e => {
          const key = `newTab${_this.newTabIndex++}`;
          const title = el.getTitle();

          _this.tabs.push({
            title,
            key,
            src: e.url
          });
          _this.activeTab = key;
        });

        el.addEventListener("dom-ready", async e => {
          el.openDevTools();

          const bowserStyle = readFileSync(
            path.resolve(__dirname, "./style.css"),
            "utf8"
          );
          const bowserScript = readFileSync(
            path.resolve(__dirname, "./index.js"),
            "utf8"
          );
          el.insertCSS(bowserStyle);
           axios
            .get("http://8.141.152.220:8000/keyword/12")
            .then(({ data: res }) => {
              // el.executeJavaScript(`const list = ${JSON.stringify(res)}`);
              el.executeJavaScript(bowserScript);
            });
        });
      }
    }
  },
  methods: {
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    add() {
      const tabs = this.tabs;
      const activeTab = `newTab${this.newTabIndex++}`;
      tabs.push({
        title: "New Tab",
        content: "Content of new Tab",
        key: activeTab
      });
      this.tabs = tabs;
      this.activeTab = activeTab;
    },
    remove(targetKey) {
      let activeTab = this.activeTab;
      let lastIndex;
      this.tabs.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const tabs = this.tabs.filter(pane => pane.key !== targetKey);
      if (tabs.length && activeTab === targetKey) {
        if (lastIndex >= 0) {
          activeTab = tabs[lastIndex].key;
        } else {
          activeTab = tabs[0].key;
        }
      }
      this.tabs = tabs;
      this.activeTab = activeTab;
    }
  }
};
</script>
<style lang="less" scoped>
webview {
  height: calc(~"100vh - 84px");
  width: 100%;
}
.ant-tabs {
  /deep/.ant-tabs-bar {
    margin: 0;
  }
}
</style>
