<template>
  <div class="current" id="current" ref="current">
    <!--背景效果-->
    <ECanvas></ECanvas>
    <!--导航-->
    <el-row class="con-head">
      <div style="float: left;">
        <!--选项卡-->
        <TabControl></TabControl>
      </div>
      <div class="head__right">
        <template v-if="$route.matched.length === 3">
          <el-button icon="el-icon-back" type="primary" size="mini" round plain @click="returnBack">返回</el-button>
        </template>
        <el-breadcrumb separator="/">
          <!--后期考虑加路由跳转-->
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumb"
            :key="index"
          >
            {{item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>
    <!--显示条件: 路由层数为2 (2以上为详情页子路由), 非首页, 页面表格列数 > 7, 路由 meta 中没有 'dropFilter'-->
    <drop-filter
      ref="dropFilter"
      v-drag
      v-show="$route.matched.length === 2 && tableColumns.length > 7 && this.$route.meta"
      :columns="tableColumns"
      :flag="flag"
      :storeKeys="storeKey"
      :storeLabels="newLables"
      @doFilter="doFilter"
    ></drop-filter>
    <!--路由页面-->
    <keep-alive :exclude="excludeAliveComps">
      <router-view id="content" class="content-wrapper"></router-view>
    </keep-alive>

    <!--返回顶层按钮-->
    <GoTop></GoTop>
  </div>
</template>

<script>
import ECanvas from '../components/ECanvas'
import GoTop from '../components/GoTop'
import TabControl from './components/TabControl'
import { createNamespacedHelpers } from 'vuex'

const { mapState } = createNamespacedHelpers('framework')
export default {
  name: 'Content',
  components: { ECanvas, GoTop, TabControl },
  data () {
    return {
      flag: false,
      labels: [],
    }
  },
  computed: {
    ...mapState(['breadcrumb', 'tableColumns', 'storeKey', 'newLables', 'excludeAliveComps']),
  },
  watch: {

  },
  mounted () {
    if (window.localStorage.getItem('breadcrumb')) {
      const breadcrumb = JSON.parse(window.localStorage.getItem('breadcrumb'))
      this.$store.commit('framework/changeBreadcrumb', breadcrumb)
      breadcrumb[breadcrumb.length - 1].index = window.localStorage.getItem('activeMenu')
      this.$nextTick(() => {
        this.$store.commit('framework/addTabControlMenu', breadcrumb[breadcrumb.length - 1])
      })
    }
  },
  methods: {
    doFilter (val) {
      this.$store.commit('framework/changeNewColumns', val)
      this.$store.commit('framework/changeStoreLables', val)
    },
    // 返回
    returnBack () {
      if (this.$route.matched.length >= 3) {
        const targetIndex = this.$route.matched.length - 2
        this.$router.replace(this.$route.matched[targetIndex])
      }
      // if (this.$route.name === 'sendOrderAdd') {
      //   // 发运订单新增时直接返回主列表
      //   this.$router.replace({
      //     name: 'sendOrder'
      //   })
      // } else {
      //   this.$router.back()
      // }
    },
  },
  directives: {
    drag: {
      update: function (el, binding, vnode) {
        let odiv = el // 获取当前元素
        let parentWidth = 0 // 父元素的宽度
        let parentHeight = 0 // 父元素的高度
        let eleWidth = 0 // 小圆圈元素的宽度
        let eleHeight = 0 // 小圆圈元素的高度
        let ulChildrenList = [] // ul元素
        let flag = false // 控制ul显示隐藏变量
        vnode.context.$nextTick(() => {
          getElementList()
        })
        // 监听窗口变化
        window.addEventListener('resize', () => {
          vnode.context.$nextTick(() => {
            getElementList()
            const newLeft = parentWidth - eleWidth - 5
            const newTop = parseInt(odiv.style.top)
            if (parseInt(odiv.style.left)) {
              odiv.setAttribute(`style`, `left: ${newLeft}px; top: ${newTop}px`)
            }
          })
        })
        // 获取元素标签集合方法
        function getElementList () {
          parentWidth = vnode.elm.parentNode.clientWidth
          parentHeight = vnode.elm.parentNode.clientHeight
          eleWidth = vnode.elm.offsetWidth
          eleHeight = vnode.elm.offsetHeight
          ulChildrenList = vnode.elm.children[1]
        }

        odiv.onmousedown = (e) => {
          // 算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft
          let disY = e.clientY - odiv.offsetTop
          let halfWidth = parentWidth / 2
          let halfHeight = parentHeight / 2

          let left = e.clientX - disX
          let top = e.clientY - disY

          flag = false
          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            left = e.clientX - disX
            top = e.clientY - disY

            // left距离
            if (left > parentWidth - eleWidth) {
              left = parentWidth - eleWidth - 5
            } else if (left < 0) {
              left = 0
            }
            // top距离
            if (top < halfHeight) {
              ulChildrenList.classList.add('flag-top')
              ulChildrenList.classList.remove('flag-bottom')
              if (top < 0) {
                top = 0
              }
            } else if (top >= halfHeight) {
              ulChildrenList.classList.add('flag-bottom')
              ulChildrenList.classList.remove('flag-top')
              if (top > parentHeight - eleHeight) {
                top = parentHeight - eleHeight
              }
            }
            // 判断左边的距离
            if (left > halfWidth) {
              ulChildrenList.classList.add('flag-right')
              ulChildrenList.classList.remove('flag-left')
            } else if (left < halfWidth) {
              ulChildrenList.classList.add('flag-left')
              ulChildrenList.classList.remove('flag-right')
            }

            // 移动当前元素
            odiv.style.left = left + 'px'
            odiv.style.top = top + 'px'
            flag = true
          }

          const doOnmouseup = () => {
            if (left > halfWidth) {
              left = parentWidth - eleWidth - 5
            } else if (left < halfWidth) {
              left = 0
            }
            // 传给data里面的flag变量
            vnode.context.flag = flag

            // 移动当前元素
            odiv.style.left = left + 'px'
            document.onmousemove = null
            document.onmouseup = null
          }

          document.addEventListener('mouseup', doOnmouseup, true)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .current {
    position: relative;
    height: 100%;
  }
  .con-head {
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
    height: 50px;
    border-bottom: solid 1px #ddd;
    font-size: 20px;
    line-height: 50px;
    padding: 0 20px;
  }
  .head__right {
    float: right;
    text-align: right;
    height: inherit;
    line-height: inherit;
    /*display: flex;*/
    /*align-items: center;*/
    > .el-breadcrumb {
      display: inline;
      line-height: inherit;
      text-align: right;
      &::after, &::before {
        display: none; // 覆盖原本的 display: table
      }
      > span {
        line-height: inherit;
        float: initial; // 覆盖原本的 float: left
      }
    }
    .el-button {
      margin-right: 20px;
    }
  }
  #content {
    height: calc(100% - 50px);
    overflow: auto;
    padding: 20px;
  }
</style>
