
<template>
  <view>
    <view id="_drag_button"
          class="drag"
          :style="{ top: top + 'px', left: left + 'px', opacity: firstIn ? 1 : 0 }"
          @touchstart="touchstart"
          @touchmove.stop.prevent="touchmove"
          @touchend="touchend"
          @click.stop.prevent="clickFlow"
          :class="{ transition: isDock && !isMove }"
          v-show="isControl">
      <view class="qiu">
        <img class="img"
             src="@/assets/images/menu.png"
             alt="" />
        <!-- <view v-show="isShow"> -->
        <u-transition :show="isShow"
                      duration="1000"
                      mode="fade">
          <view class="menu_item"
                @click.stop.prevent="openMenu">菜单</view>
          
        </u-transition>
      </view>
    </view>
    <!-- 选择国家 -->
    
    <!-- 侧边菜单 -->
    <u-popup :show="isMenu"
             mode="left"
             @close="isMenu = false">
      <u-collapse :border="false">
        <view v-for="(item, index) in constantRoutes"
              :key="index" v-if="!item.hidden">
          <view v-if="!item.hidden&&item.children && item.children.length > 0">
            <u-collapse-item :title="item.meta.title"
                             name="Docs guide">
              <text @click.stop.prevent="goMenu(ctem)"
                    v-for="(ctem, cndex) in item.children"
                    :key="cndex"
                    v-if="!ctem.hidden"
                    :class="[
                  isClick == ctem.name
                    ? 'u-collapse-content1'
                    : 'u-collapse-content',
                ]">{{ ctem.meta.title }}</text>
            </u-collapse-item>
          </view>
          <view v-else>
            <text :class="[isClick == item.name ? 'nChild1' : 'nChild']"
                  @click.stop.prevent="goMenu(item)">{{ item.meta.title }}</text>
          </view>
        </view>
      </u-collapse>
    </u-popup>
  </view>
</template>

<script>
import { constantRoutes } from '@/router'
import * as api from '@/api/login'
export default {
  name: 'drag-button',
  props: {
    isDock: {
      type: Boolean,
      default: true,
    },
    existTabBar: {
      type: Boolean,
      default: true,
    },
    isControl: {
      type: Boolean,
      default: true,
    },
    snCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      top: 200,
      left: 200,
      width: 0,
      height: 0,
      offsetWidth: 0,
      offsetHeight: 0,
      windowWidth: 0,
      windowHeight: 0,
      isMove: true,
      edge: 10,
      text: ' ',
      firstIn: false,
      isShow: false,
      isMenu: false,
      constantRoutes: [],
      isClick: 'index',
      isCountry: false,
      countryList: [],
      defaultIndex: [0],
      isLanguage: false,
      defaultIndex1: [0],
      languageList: [],
      rolaMenu:[]
    }
  },
  mounted() {
    //获取手机信息配置接口
    const sys = uni.getSystemInfoSync()
    //屏幕的宽高
    this.windowWidth = sys.windowWidth
    this.windowHeight = sys.windowHeight
    // #ifdef APP-PLUS
    this.existTabBar && (this.windowHeight -= 50)
    // #endif
    if (sys.windowTop) {
      this.windowHeight += sys.windowTop
    }
    //获取元素
    const query = uni.createSelectorQuery().in(this)
    // console.log("🚀 ~ query", query);
    query
      .select('#_drag_button')
      .boundingClientRect((data) => {
        this.width = 90
        this.height = 67
        this.offsetWidth = this.width / 2
        this.offsetHeight = this.height / 2
        this.left = uni.getStorageSync('left') || 280
        this.top = uni.getStorageSync('top') || 500
        this.$nextTick(() => {
          this.firstIn = true
        })
      })
      .exec()
    this.getActMenu()
    this.isClick = uni.getStorageSync('name') || 'index'
    this.constantRoutes = constantRoutes
    if (uni.getStorageSync('userInfo')) {
      this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
    } else {
      this.userInfo = ''
    }
  },
  methods: {
    getActMenu() {
      api.getRouters().then((res) => {
        this.rolaMenu = this.getName(res.data)
        this.actMenu()
      })
    },
    actMenu() {
      // 现把所有菜单隐藏
      this.constantRoutes.forEach((item) => {
        item.hidden = true
        if (item.children) {
          item.children.forEach((ctem) => {
            ctem.hidden = true
            if (ctem.children) {
              ctem.children.forEach((stem) => {
                stem.hidden = true
              })
            }
          })
        }
      })
      // 显示接口返回的菜单
      this.constantRoutes.forEach((item) => {
        if (item.children) {
          item.children.forEach((ctem) => {
            if (this.rolaMenu.indexOf(ctem.name) >= 0) {
              ctem.hidden = false
            }
            if (ctem.children) {
              ctem.children.forEach((stem) => {
                if (this.rolaMenu.indexOf(stem.name) >= 0) {
                  stem.hidden = false
                }
              })
            }
          })
        }
        if (this.rolaMenu.indexOf(item.name) >= 0) {
        
          item.hidden = false
        }
      })
      this.$forceUpdate()
    },
    // 多维数组取name成一个数组
    getName(arr, newArr) {
      newArr = newArr || []
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        if (item['routeName']) {
          newArr.push(item['routeName'])
          if (item['children']) {
            this.getName(item['children'], newArr)
          }
        }
      }
      return newArr
    },
    goMenu(item) {
      this.isClick = item.name
      uni.setStorageSync('name', item.name)
      uni.redirectTo({ url: item.path })
    },
    
    openCountry() {
      api.countryQx().then((res) => {
        let data = res.data.map((item) => {
          return {
            img: item.nationalFlag1,
            id: item.pkCountry,
            label: item.name,
          }
        })
        this.countryList = [data]
        this.countryList[0].forEach((item, index) => {
          if (item.id == this.userInfo.pkCountry) {
            this.defaultIndex = [index]
          }
        })
        this.isCountry = true
      })
    },
    clickFlow() {
      // this.$emit("btnClick");
      this.isShow = !this.isShow
    },
    openMenu() {
      this.isMenu = true
    },
    touchstart(e) {
      this.$emit('btnTouchstart')
    },
    touchmove(e) {
      // 单指触摸
      if (e.touches.length !== 1) {
        return false
      }
      this.isMove = true
      this.left = e.touches[0].clientX - this.offsetWidth
      let clientY = e.touches[0].clientY - this.offsetHeight
      // #ifdef H5
      // clientY += 25
      // #endif
      let edgeBottom = this.windowHeight - this.height - this.edge

      // 上下触及边界
      if (clientY < this.edge) {
        this.top = this.edge
      } else if (clientY > edgeBottom) {
        this.top = edgeBottom
      } else {
        this.top = clientY
      }
      uni.setStorageSync('top', this.top)
    },
    touchend(e) {
      if (this.isDock) {
        let edgeRigth = this.windowWidth - this.width - this.edge
        if (this.left < this.windowWidth / 2 - this.offsetWidth) {
          this.left = this.edge
        } else {
          this.left = edgeRigth
        }
      }

      uni.setStorageSync('left', this.left)
      this.isMove = false

      this.$emit('btnTouchend')
    },
  },
}
</script>

<style lang="scss" scoped>
.drag {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  // font-size: $uni-font-size-sm;
  position: fixed;
  z-index: 997;

  &.transition {
    transition: left 0.3s ease, top 0.3s ease;
  }
}

.qiu {
  position: relative;
}
.menu_item {
  width: 30px;
  height: 30px;
  background: #009b58;
  box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  line-height: 30px;
  text-align: center;

  padding: 5px;
  position: absolute;
  left: -26px;
  top: -26px;
}

.img {
  border-radius: 50%;
  height: 70px;
  width: 70px;
  box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
}
.nChild1 {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #fff;
  align-items: center;
  background: #c8161d;
}
.nChild {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
}
::v-deep .u-collapse-item__content {
  background: #eeeeee !important;
}
::v-deep .u-collapse-item__content__text {
  padding: 0;
}
.u-collapse-content1 {
  padding: 12px 15px;
  background: #c8161d;
  color: #fff;
}
.u-collapse-content {
  padding: 12px 15px;
}
</style>
