<template>
    <div class="tabs-page-template" :style="{ padding: config.padding }">
        <div class="title" v-show="config.title">
            {{ config.title }}
        </div>
        <el-tabs class="mu-tabs" v-model="activeName" :tab-position="config.tabPosition" :type="config.type" @tab-click="handleClick" :editable="config.editable"
                @edit="handleTabsEdit" :before-leave="config.beforeLeave">
            <el-tab-pane :name="paneItem.name" :disabled="paneItem.disabled" :label="paneItem.title"
                        v-for="(paneItem, index) in (config.items || [])" :key="paneItem.name + index">
            <slot :name="paneItem.name"></slot>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
// import { Tabs } from 'element-ui';

  interface TabConfig {
    type: string,
    items?: any,
    editable?: boolean,
    beforeLeave?: Function
  }

  @Component({
    name: 'muTabsPageTemplate'
  })
  export default class extends Vue {
    @Prop() private value: any;
    @Prop({ default: () => [] }) private config!: TabConfig;
    @Prop() private extension?: (value: any) => void;
    private activeName: any = this.value;

    // 检测值
    @Watch("value")
    onValueChanged(val: string) {
      this.activeName = val;
    }

    mounted() {
      this.extension && this.extension({
        setDisabled: (key: string, isDisabled: boolean = true) => {
          const currentItem = this.config.items.find((item: any) => key === item.name);
          this.$set(currentItem, 'disabled', isDisabled)
        },
        setDisableds: (data: any) => {
          this.config.items.forEach((item: any) => {
            if (data[item.name] !== undefined) this.$set(item, 'disabled', data[item.name])
          });
        }
      });
    }

    /**
     * 点击tab事件
     * @param tab tab选项卡
     * @param event 点击事件
     */
    @Emit('on-change')
    handleClick(tab: any, event: any) {
      this.$emit('input', tab.paneName);
    }

    /**
     * tab新增和删除事件
     * @param targetName 目标tab的名称
     * @param action 行为 add｜remove
     */
    handleTabsEdit(targetName: string, action: string) {
      if (action === 'add') {
        this.config.items.push({ title: 'New Tab', name: 'newTab' + this.config.items.length });
      }
      if (action === 'remove') {
        const index = this.config.items.findIndex((tab: any) => tab.name === targetName);
        if (targetName === this.activeName) {
          this.$emit('input', (this.config.items[index - 1] || {}).name || (this.config.items[index + 1] || {}).name);
        }
        this.config.items.splice(index, 1);
      }
    }
  }
</script>

<style lang="scss" scoped>
    .tabs-page-template{
        // padding: 15px;
        .title {
            text-align: left;
            font-size: 18px;
            height: 36px;
            line-height: 36px;
            margin-bottom: 15px;
        }
    }
</style>
