<template>
  <a-layout-content>
    <a-tabs @change="onChange" @edit="onClose" hide-add type="editable-card" v-model="actived">
      <a-tab-pane
        :closable="pane.closable"
        :forceRender="true"
        :key="pane.key"
        v-for="pane in panes"
      >
        <a-dropdown :trigger="['contextmenu']" slot="tab">
          <div>
            <a-icon :type="pane.icon" v-if="pane.icon" />
            {{ pane.title }}
          </div>
          <a-menu slot="overlay">
            <template v-if="mode === 'development'">
              <a-menu-item @click="onCopyComponent(pane)" key="-1">
                复制组件地址
                <a-tag color="red">dev</a-tag>
              </a-menu-item>
              <a-menu-divider />
            </template>
            <a-menu-item @click="onLoadContentWindow(pane.key)" key="0">重新加载</a-menu-item>
            <a-menu-divider />
            <a-menu-item :disabled="!pane.closable" @click="$emit('close', pane.key);" key="1">关闭</a-menu-item>
            <a-menu-item @click="$emit('close-other', pane.key)" key="2">关闭其他标签页</a-menu-item>
            <a-menu-item @click="$emit('close-right', pane.key)" key="3">关闭右侧标签页</a-menu-item>
          </a-menu>
        </a-dropdown>
        <component :is="pane.component" :key="pane.key" v-if="pane.loaded" />
      </a-tab-pane>
    </a-tabs>
  </a-layout-content>
</template>
<script>
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

NProgress.configure({ parent: '.ant-layout-content > .ant-tabs > .ant-tabs-content' });

export default {
  props: {
    panes: {
      type: Array,
    },
    tabActived: {
      type: [String, Number],
    },
  },
  data() {
    return {
      mode: process.env.VUE_APP_NODE_ENV,
      actived: '',
    };
  },
  watch: {
    tabActived() {
      if (this.tabActived !== this.actived) {
        this.actived = this.tabActived;
      }
    },
  },
  created() {
    this.actived = this.tabActived;
  },
  methods: {
    onLoadContentWindow(key) {
      NProgress.start();
      const pane = this.panes.find((p) => p.key === key);
      const i = import(`@/pages${pane.path}`);
      pane.component = () => i;
      pane.loaded = false;
      i.then(() => {
        pane.loaded = true;
        NProgress.done();
      }).catch(() => {
        pane.component = () => import('@/views/error/404');
        pane.loaded = true;
        NProgress.done();
      });
    },
    onClose(targetKey, action) {
      if (action === 'remove') {
        this.$emit('close', targetKey);
      }
    },
    onChange(activeKey) {
      this.$emit('change', activeKey);
    },

    onCopyComponent(pane) {
      try {
        const copy = document.createElement('textarea');
        document.body.append(copy);
        copy.value = `/pages${pane.path}`;
        copy.select();
        setTimeout(() => {
          document.execCommand('copy');
          copy.remove();
          this.$message.success('已复制到剪切板');
        });
      } catch {
        this.$message.error('复制错误');
      }
    },
  },
};
</script>