<template>
  <view class="pageBox">
    <view class="container _home_page">
      <layout-bar-comp_sys_db @changeData="(data:any)=>{change_comp_sys(data)}"> </layout-bar-comp_sys_db>

      <view class="menus-container">
        <view class="search">
          <iconfont icon="search" />
          <input :placeholder="translate('search')" />
        </view>
        <template v-for="(item_lv1,index_lv1) in menusStore().menus">
          <view class="menu-box-title-lv1">{{ item_lv1.name }}</view>
            <template v-for="(item_lv2,index_lv2) in item_lv1.childrens">
              <view class="menu-box">
                <view class="menu-box-title-lv2">{{ item_lv2.name }}</view>
                <template v-for="(item_lv3,index_lv3) in item_lv2.childrens">
                  <view class="menu-button" @click="goto_page({meun:item_lv3})">
                    <view class="icon" :style="`${getColor(index_lv3)}`"><iconfont :icon="item_lv3.icon_path || 'tools'" /></view>
                    <text class="menu-box-title-lv3">{{ item_lv3.name }}</text>
                  </view>
                </template>
              </view>
            </template>
        </template>
      </view>
    </view>
    
    <tab-bar active="home"/>


		<uni-popup ref="popup">
      <view class="lv4-popup-dialog">
        <text class="title">{{ lv4_name || '未知菜单' }}</text>
        <template v-for="(item,index) in lv4">
          <view class="menu-button" @click="goto_page({meun:item})">
            <view class="icon" :style="`${getColor(index)}`"><iconfont :icon="item.icon_path || 'tools'" /></view>
            <text class="menu-box-title-lv3">{{ item.name }}</text>
          </view>
        </template>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Storage from '@/common/utils/storage/index'
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import EXEC from '@/common/utils/exec';
import { menusStore } from '@/common/stores/menus'
import { translate } from '@/common/utils/language/index'
import { gotoPage, gotoPageDynamic } from '@/common/utils/router/index'
import { post_location_report } from '@/common/apis/base/index'


const popup = <any>ref('')
const lv4 = <any>ref([])
const lv4_name = <any>ref('')

onBeforeMount(async() => {
  change_comp_sys()

  /*#ifdef MP-WEIXIN*/
  uni.hideHomeButton();
  /*#endif*/
})
onMounted(()=>{
})
onUnmounted(() => {
})


const change_comp_sys = (data:any = {system_name: EXEC.system_name}) => {
  uni.setNavigationBarTitle({
    title: `${data['system_name']}`
  });
}
const getColor = (index:any) => {
  let colorx=['606BA7','ED711F','606BA7','4A93D2','2AAA90','FF8C06','EE5653'];
  let Nindex=index%colorx.length;
  return "color:#"+colorx[Nindex];
}

const goto_page = ({url, meun}:any) => {
  if(url){
    gotoPage(url)
  }
  else{
    if(meun.isDynamic && meun.id){
      if(meun.childrens && meun.childrens.length>0){
        lv4.value = meun.childrens
        lv4_name.value = meun.name
        popup.value.open()
        return
      }
      
      gotoPageDynamic({id: meun.id})
      EXEC.active_menu_id = meun.id
    }else if(meun.path=='/location/report/index'){
      locationReport()
    }else{
      gotoPage(meun.path)
    }
  }
}

// 提交位置
const locationReport = () => {
  uni.getLocation({
    type: 'gcj02',
    success: function (res) {
      let longitude = res.longitude
      let latitude = res.latitude
      post_location_report({longitude, latitude}).then(()=>{
        uni.showToast({
          icon: 'success',
          title: '位置提报成功',
        })
      })
    },
    fail: function(res) {
        uni.showToast({
          icon: 'success',
          title: '获取位置失败',
        })
    }
  });
}


</script>

<style lang="scss">
._home_page{
  background: #eaf1f7;
}


.menus-container{
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 20rpx;
  width: 100vw;
  box-sizing: border-box;
  >.search{
    border-radius: 20rpx;
    background: #fff;
    margin: 20rpx 0;
    width: 100%;
    position: relative;
    .iconfont{
      position: absolute;
      top: 15rpx;
      right: 20rpx;
      font-size: 24px;
      color: #999;
    }
    >input{
      line-height: 42px;
      display: block;
      height: 42px;
      padding: 0 15px;
    }
  }

  >.menu-box-title-lv1{
    color: #6d7277;
    width: 100%;
    margin: 20rpx 0 5rpx;
    padding: 0 20rpx;
    font-size: 12px;
  }
  >.menu-box{
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin: 10rpx 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    >.menu-box-title-lv2{
      font-size: 12px;
      margin-bottom: 40rpx;
      color: #666;
      width: 100%;
    }
    >.menu-button{
      width: 20%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 30rpx;
      >.icon{
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        margin-bottom: 10rpx;
        view{
          width: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: 72rpx !important;
        }
      }
      >.menu-box-title-lv3{
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
  }
}
.lv4-popup-dialog{
  padding: 40rpx;
  width: 80vw;
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-wrap: wrap;
  >text.title{
    display: block;
    flex-shrink: 0;
    margin-bottom: 40rpx;
    width: 100%;
  }
  
  >.menu-button{
      width: 20%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 30rpx;
      >.icon{
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        margin-bottom: 10rpx;
        view{
          width: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: 72rpx !important;
        }
      }
      >.menu-box-title-lv3{
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
}
</style>
