<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <MdView>
        <template># tabs标签页</template>
      </MdView>
      <CodeBox name="tabs标签页" alias="tabs" :code="demo.code" desc="elementUItabs用法">
        <template slot="demo">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="top">top</el-radio-button>
            <el-radio-button label="right">right</el-radio-button>
            <el-radio-button label="bottom">bottom</el-radio-button>
            <el-radio-button label="left">left</el-radio-button>
          </el-radio-group>
          <el-radio-group v-model="tabType" style="margin-bottom: 30px;">
            <el-radio-button label="card">选项卡样式</el-radio-button>
            <el-radio-button label="">默认样式</el-radio-button>
            <el-radio-button label="border-card">卡片化的标签页</el-radio-button>
          </el-radio-group>

          <el-tabs
            v-model="currentTabComponent"
            :tab-position="tabPosition"
            :type="tabType"
            @tab-click="handlePaneClick"
          >
            <el-tab-pane :name="tabComponent.componentName" v-for="(tabComponent,index) in tabComponentOptions" :key="index">
              <span slot="label">
                <el-link :underline="false" :href="genHref(tabComponent.componentName)">{{tabComponent.label}}</el-link>
              </span>
              <keep-alive>
                <component v-bind:is="currentTabComponent"></component>
              </keep-alive>
            </el-tab-pane>
          </el-tabs>
        </template>
      </CodeBox>
    </el-col>
  </el-row>
</template>
<script>
import CodeBox from "@/components/CodeBox.vue";
import AnchorWrapper from "@/components/AnchorWrapper.vue";
import MdView from "@/views/MdView.vue";
import req from "@/api/sysType.js";
import Table from "@/demo/Table.vue";
import SidebarDialog from "@/demo/SidebarDialog.vue";
import I18n from "@/demo/I18n.vue";

export default {
  name: "tabs",
  components: { CodeBox, AnchorWrapper, MdView, Table, SidebarDialog,I18n },
  data() {
    return {
      tabPosition: "top",
      tabType:"",
      currentTabComponent: "SidebarDialog",
      tabComponentOptions:[
        {"componentName":"Table",label:"用户管理"},
        {"componentName":"SidebarDialog",label:"侧边栏对话框"},
        {"componentName":"I18n",label:"国际化"}
      ],
      demo: {
        anchors: [
          {
            content: "tabs标签",
            alias: "tabs"
          }
        ],
        code: `
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="top">top</el-radio-button>
            <el-radio-button label="right">right</el-radio-button>
            <el-radio-button label="bottom">bottom</el-radio-button>
            <el-radio-button label="left">left</el-radio-button>
          </el-radio-group>

          <el-tabs
            v-model="currentTabComponent"
            :tab-position="tabPosition"
            @tab-click="handlePaneClick"
          >
            <el-tab-pane :name="tabComponent.componentName" v-for="(tabComponent,index) in tabComponentOptions" :key="index">
              <span slot="label">
                <el-link :underline="false" :href="genHref(tabComponent.componentName)">{{tabComponent.label}}</el-link>
              </span>
              <keep-alive>
                <component v-bind:is="currentTabComponent"></component>
              </keep-alive>
            </el-tab-pane>
          </el-tabs>
              `
      }
    };
  },
  methods: {
    handlePaneClick: function(data) {
      if (data.name) {
        this.currentTabComponent = data.name;
      }
    },
    genHref(anchor){
      if(this.$router.mode=="history"){
        return "#"+anchor;
      }
      return "/#"+this.$route.path+"#" + anchor;
    }
  },
  mounted() {
    // 根据url#定位激活的面板
    if (window.location.href.lastIndexOf("#") != -1  ) {
      let index = window.location.href.lastIndexOf("#");
      let urlAnchor = window.location.href.substr(index + 1);
      this.tabComponentOptions.filter(item => {
        if(item.componentName == urlAnchor){
          this.currentTabComponent = urlAnchor;
        }
      });
      
    }

    let _this = this;
    req.getSysTypeData({}).then(function(data) {
      _this.data = data;
    });
  }
};
</script>
<style lang="scss" scoped>
.item-label {
  font-size: 12px;
}

.el-tabs__item.is-active .el-link.el-link--default {
  color: #409EFF;
}
</style>