<template>
  <div :class="className">
    <el-tabs
      v-model="activeName"
      @tab-click="tabClick"
      v-if="navList.length"
      :tab-position="tabPosition"
    >
      <template v-for="(item,index) in navList">
        <el-tab-pane
          :key="index"
          v-if="(item.tabFlag===undefined||item.tabFlag)&&(!item.code || (item.code && $verifyPerms && $verifyPerms(item.code)))"
          :label="$menuName(item.code,item.label)"
          :name="item.name"
        >
        </el-tab-pane>
      </template>

      <div
        class="menu-right-box"
        v-if="navList.length"
      >
        <div
          class="button-box"
          v-if="current && current.rightButtons && current.rightButtons.length"
        >
          <el-button
            v-for="(item, index) of current.rightButtons"
            :key="index"
            :icon="item.icon"
            :type="item.type"
            size="mini"
            round
            @click="onClickRightButton(item)"
          >
            {{ item.name }}
          </el-button>
        </div>
      </div>
    </el-tabs>

    <div
      class="error-info"
      v-if="roleShow"
    >
      暂无权限
    </div>

    <div class="tabs-content">
      <template v-for="(item,index) in navList">
        <div
          :key="index"
          v-show="item.name === activeName"
          :label="$menuName(item.code,item.label)"
          :name="item.name"
        >
          <slot
            name="item"
            :data="{index: index, ...item}"
          ></slot>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
// import $ from 'jquery'

/**
 * navList对象:
 * code       权限code
 * component  组件名称
 * name       tab名称
 * label      默认名称
 * nikeName   别名
 *
 *
 * HTML内容
 * component 注册组件名称
 * <tab ref="tab" v-model="activeName" :nav-list="tabList" @change="tabClick">
 *     <template slot="item" slot-scope="scope">
 *       <component :ref="scope.data.name" :is="scope.data.component"/>
 *     </template>
 * </tab>
 *
 * tabClick点击回调
 * function(){
 *     if(this.$refs[this.activeName]){
 *         this.$refs[this.activeName].getInfo()
 *     }
 * }
 */

export default {

  name: "Tabs",

  props: {
    // 判断当前页面是否有除tab的其他内容
    isOtherContent: {
      type: Boolean,
      default: false
    },

    value: {
      type: String,
      default: ''
    },

    navList: {
      type: Array,
      default: []
    },
    tabPosition: {
      type: String,
      default: 'top'
    },
    tabsType: {
      type: String,
      default: 'rent'
    },
  },

  data() {
    return {
      roleShow: false,
      activeName: null,
    }
  },

  watch: {
    navList(val) {
      if (this.navList.length) {
        setTimeout(() => {
          this.setActiveName()
        }, 500)
      }
    },
  },

  computed: {
    current() {
      return this.navList.find(item => item.name.startsWith(this.activeName));
    },
    className() {
      let className = 'yj-rent-tabs moudel-tab'
      if (this.tabsType == 'rent') {
        className = 'yj-rent-tabs moudel-tab'
      } else if (this.tabsType == 'yingjia') {
        className = 'yingjia-tabs'
        if (this.tabPosition == 'left') {
          className = 'yingjia-tabs flex'
        }
      }
      return className
    }
  },

  mounted() {
    if (this.navList.length) {
      setTimeout(() => {
        this.setActiveName()
      }, 500)
    }
  },

  methods: {

    // tab切换
    tabClick(val) {
      this.$emit('input', this.activeName);
      this.$emit('change', val);
      // console.log($('.el-main')[0].scrollTop)
    },

    // 设置ActiveName
    setActiveName() {
      let name = null;

      // 连接
      if (this.$route.query.tab) {
        this.navList.forEach((item, index) => {
          if (this.$route.query.tab === item.name && (!item.code || (item.code && this.$verifyPerms && this.$verifyPerms(item.code)))) {
            name = this.$route.query.tab;
          }
        })
      }

      // 参数
      if (!name && this.value) {
        this.navList.forEach((item, index) => {
          if (this.value === item.name && (!item.code || (item.code && this.$verifyPerms && this.$verifyPerms(item.code)))) {
            name = this.value;
          }
        })
      }

      // 默认
      if (!name) {
        this.navList.forEach((item, index) => {
          if (!name && (!item.code || (item.code && this.$verifyPerms && this.$verifyPerms(item.code)))) {
            name = item.name;
          }
        })
      }
      // 暂无权限页面
      if (!this.isOtherContent && !name) {
        this.$message.error('暂无权限');
        this.navList = [];
        this.roleShow = true;
        this.activeName = null;
        return
      }
      this.activeName = name;

      this.tabClick();
    },

    onClickRightButton(item) {
      let param = {
        item: item,
        text: item.name,
        name: this.current.name
      }
      this.$emit('onButttonClick', param)
    },
  },
  components: {

  }
}
</script>

<style lang="scss">
.yj-rent-tabs{
  position: relative;

  .el-tabs__header{
    padding: 0 30px;
  }
  

  &.moudel-tab {
    .back-moudel-tab.el-tabs{
      .el-tabs__header{
        padding-left: 100px;
      }
    }

    > .el-tabs{
      display: flex;
      background: #F8F8F8;
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
      z-index: 99;
      > .el-tabs__header{
        flex: 1;
        padding: 12px 30px;
        background: #F8F8F8;
        margin: 0px;
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 99;

        > .el-tabs__nav-wrap::after{
            display: none;
          }

        > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav {

          .el-tabs__item{
            padding: 0 20px !important;
            height: 30px;
            line-height: 30px;
            border-radius: 20px !important;
            margin-right: 20px;
            font-size: 16px;
            color: #666666;
            background: #fff;
          }

          .el-tabs__item:hover{
            color: #666;
          }

          .el-tabs__item.is-active{
            background: #409EFF;
            color: #ffffff;
          }

          .el-tabs__active-bar{
            display: none;
          }
        }
      }
    }

  }

  .menu-right-box{
    display: flex;
    align-items: center;
    height: 53px;
    padding-right: 20px;
  }


  .error-info{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    font-size: 20px;
  }
}



.yingjia-tabs {
  margin-right: 10px;
  .el-tabs__header.is-left{
    .el-tabs__active-bar.is-left {
      left: 0;
      background-color: #FF8400;
    }

    .el-tabs__item.is-active {
      color: #FF8400;
      background-color: #F8F8F8;
    }

  }
  .el-tabs.el-tabs--top{
      display: flex;
      justify-content: space-between;
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
      z-index: 99;
    .el-tabs__item{
      color: #999;
    }
    .el-tabs__active-bar.is-top {
      display: none;
    }

    .el-tabs__item.is-active {
      color: #FF8400;
    }
    .el-tabs__item:hover{
      color: #FF8400;
    }
    .menu-right-box{
      display: flex;
      align-items: center;
      height: 40px;
      padding-right: 20px;
    }

  }


  .el-tabs__header.is-left {
    margin-right: 20px;

    .el-tabs__item {
      color: #999;
    }
  }
  .tabs-content{
    flex: 1;
  }
}
</style>
