<template>
  <div class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" style="background: rgb(255,255,255)!important;">
      <router-link v-for="tag in Array.from(visitedViews)" ref="tag" :class="isActive(tag)?'active':''" :to="tag.path" :key="tag.path" class="tags-view-item" @contextmenu.prevent.native="openMenu(tag,$event)" >
        {{ tag.title }}
        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:tagLeft+'px',top:tagTop+'px','z-index': 99}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">重新加载</li>
      <li @click="closeSelectedTag(selectedTag)">关闭当前</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags">关闭全部</li>
    </ul>
  </div>
</template>

<script>
import ScrollPane from '@/components/ScrollPane'
import Cookies from 'js-cookie'

export default {
  components: { ScrollPane },
  inject: ['reload'],
  data() {
    return {
      visible: false,
      tagTop: 0,
      tagLeft: 0,
      selectedTag: {},
      timer: ''
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  watch: {
    $route() {
      this.addViewTags()
      // this.moveToCurrentTag()
    },
    visible(value) {
      if (value) {
        window.addEventListener('click', this.closeMenu)
      } else {
        window.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted() {
    this.addViewTags()
  },
  methods: {
    // generateTitle, // generateTitle by vue-i18n
    // generateRoute() {
    //   if (this.$route.name) {
    //     return this.$route
    //   }
    //   return false
    // },
    generateRoute() {
      clearTimeout(this.timer)
      switch (this.$route.name) {
        case 'EquipmentMonitoring':
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1710px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1710px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1710px'
          }, 400)
          break
        case 'ProjectPlanningManagementNew': // 项目计划管理
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1700px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1700px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1700px'
          }, 400)
          break
        case 'ProjectPlanningManagementQuery': // 项目计划查询
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1700px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1700px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1700px'
          }, 400)
          break
        case 'CreatingPurchasingMaterials': // 外购备料
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1680px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1680px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1680px'
          }, 400)
          break
        case 'RequestOutsourcingMaterials': // 外购备料请款
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1710px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1710px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1710px'
          }, 400)
          break
        case 'OutsourcingMaterialsInvoice': // 外购备料到票
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1690px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1690px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1690px'
          }, 400)
          break
        case 'OfflineProcurement': // 外购备料(离线)
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1700px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1700px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1700px'
          }, 400)
          break
        case 'AutomaticScheduling': // 车间排产
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1910px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1910px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1910px'
          }, 400)
          break
        case 'PurchaseTaskAllocate': // 采购任务分配
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1680px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1680px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1680px'
          }, 400)
          break
        case 'AssemblyTaskAssignment': // 装配任务分配
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1690px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1690px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1690px'
          }, 400)
          break
        case 'OutsourcingMaterialsSearch': // 备料查询
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1500px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1500px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1500px'
          }, 400)
          break
        case 'PurchaseSituationSearchMetalworking': // 制造采购件查询
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1620px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1620px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1620px'
          }, 400)
          break
        case 'ParseQuery': // 备料查询
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1710px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1710px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1710px'
          }, 400)
          break
        case 'MaterialPreparationContractQuery': // 备料合同查询
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1710px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1710px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1710px'
          }, 400)
          break
        case 'PurchaseContractRequestFund1': // 合同请款(制造)
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '1510px'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '1510px'
            document.getElementsByClassName('navbar')[0].style.minWidth = '1510px'
          }, 400)
          break
        default:
          this.timer = setTimeout(() => {
            document.getElementById('app-main').style.width = '100%'
            document.getElementsByClassName('tags-view-wrapper')[0].style.minWidth = '100%'
            document.getElementsByClassName('navbar')[0].style.minWidth = '100%'
          }, 400)
      }
      if (this.$route.name) {
        return this.$route
      }
      return false
    },
    isActive(route) {
      return route.path === this.$route.path || route.name === this.$route.name
    },
    addViewTags() {
      const route = this.generateRoute()
      if (!route) {
        return false
      }
      this.$store.dispatch('addVisitedViews', route)
    },
    moveToCurrentTag() {
      const tags = this.$refs.tag
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.to === this.$route.path) {
            this.$refs.scrollPane.moveToTarget(tag.$el)
            break
          }
        }
      })
    },
    refreshSelectedTag() {
      this.$nextTick(() => {
        this.reload() // 2019.6.2 cjn
      })
    },
    closeSelectedTag(view) {
      this.$store.dispatch('delVisitedViews', view).then((views) => {
        if (this.isActive(view)) {
          const latestView = views.slice(-1)[0]
          if (latestView) {
            this.$router.push(latestView.path)
          } else {
            this.$router.push('/')
          }
        }
      })
    },
    closeOthersTags() {
      this.$router.push(this.selectedTag.path)
      this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
        this.moveToCurrentTag()
      })
    },
    closeAllTags() {
      this.$store.dispatch('delAllViews')
      this.$router.push('/')
    },
    openMenu(tag, e) {
      const status = Cookies.get('sidebarStatus')
      this.visible = true
      this.selectedTag = tag
      this.tagLeft = e.clientX
      if (status === '0') this.tagLeft = parseInt(e.clientX) - 200
      this.tagTop = e.clientY
    },
    closeMenu() {
      this.visible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tags-view-container {
    .tags-view-wrapper {
      background: #ffffff;
      height: 34px;
      border-bottom: 1px solid #d8dce5;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
      .tags-view-item {
        display: inline-block;
        position: relative;
        height: 26px;
        line-height: 26px;
        border: 1px solid rgb(52,119,190);
        color:  rgb(52,119,190);
        background: white;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
        margin-top: 4px;
        &:first-of-type {
          margin-left: 15px;
        }
        &.active {
          /*background-color: rgb(52,119,190);*/
          background-color: #2A71CA;
          color: #ffffff;
          border-color: #ffffff;
          &::before {
            content: '';
            background: #ffffff;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: relative;
            margin-right: 2px;
          }
        }
      }
    }
    .contextmenu {
      margin: 0;
      background: #fff;
      z-index: 2;
      position: absolute;
      list-style-type: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #333;
      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
      li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;
        &:hover {
          background: #eee;
        }
      }
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  //reset element css of el-icon-close
  .tags-view-wrapper {
    .tags-view-item {
      .el-icon-close {
        width: 16px;
        height: 16px;
        vertical-align: 2px;
        border-radius: 50%;
        text-align: center;
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transform-origin: 100% 50%;
        &:before {
          transform: scale(.6);
          display: inline-block;
          vertical-align: -3px;
        }
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
  }
</style>
