<template>
  <view class="index-page bg-page">
    <view class="banner-section">
      <image
        class="banner_img"
        mode="scaleToFill"
        src="../../static/img/banner_img.png"
      ></image>
    </view>
    <view class="content-box">
      <view
        class="menus-section"
        v-for="(menu, index) in menus"
        :key="index"
      >
        <view class="title-t" v-if="menu.parent && menu.children.length>0"
          >{{ menu.parent }}-{{ menu.label }}</view
        >
        <view class="title-t" v-if="!menu.parent && menu.children.length>0">{{ menu.label }}</view>
        <view class="menu-ul">
          <view class="menu-li" v-for="(cdm, i) in menu.children" :key="i">
            <view class="menu_item" @click="linknavFn(cdm)">
              <view class="icon"></view>
              <view class="name">{{ cdm.label }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      title: 'Hello',
      menuList: [
        {
          label: '监测数据管理',
          children: [
            {
              label: '气象监测',
              url: '/pages/index/meteorological',
              permission: 'endpoint.weather.index',
            },
            {
              label: '智能监控',
              url: '/pages/index/monitor',
              permission: 'endpoint.camera.index',
            },
            {
              label: '土壤监控',
              url: '/pages/index/soil-monitoring',
              permission: 'endpoint.soil.index',
            },
            {
              label: '水质监控',
              url: '/pages/index/water-quality',
              permission: 'endpoint.water.index',
            },
            {
              label: '昆虫性诱监测',
              url: '/pages/index/insect-monitors',
              permission: 'endpoint.insect.index',
            },
            {
              label: '虫情监测',
              url: '/pages/index/pests',
              permission: 'endpoint.worm_statics.index',
            },
            {
              label: '杀虫灯检测',
              url: '/pages/index/insecticidal-lamp',
              permission: 'endpoint.insecticidal_lamp.index',
            },
          ],
        },
        {
          label: '全市基础数据',
          parent: '基础数据管理',
          children: [
            {
              label: '城镇数据',
              url: '/pages/basics/town-base',
              permission: 'endpoint.town_street.index',
            },
            {
              label: '基地数据',
              url: '/pages/basics/basics-base',
              permission: 'endpoint.agricultural_basic.index',
            },
            {
              label: '基地概况',
              url: '/pages/basics/profile',
              permission: 'super',
            },
          ],
        },
        {
          label: '农作物数据',
          parent: '基础数据管理',
          children: [
            {
              label: '城镇农作物',
              url: '/pages/crop/town-crop',
              permission: 'endpoint.town_crops.index',
            },
            {
              label: '基地农作物',
              url: '/pages/crop/basics-crop',
              permission: 'endpoint.crops.index',
            },
          ],
        },
        {
          label: '农作物产量',
          parent: '基础数据管理',
          children: [
            {
              label: '城镇产量',
              url: '/pages/yield/town-yield',
              permission: 'endpoint.town_crops_output.index',
            },
            {
              label: '基地产量',
              url: '/pages/yield/basics-yield',
              permission: 'endpoint.crops_output.index',
            },
          ],
        },
        {
          label: '重点产业',
          parent: '基础数据管理',
          children: [
            {
              label: '稻虾价格',
              url: '/pages/estate/estate-price',
              permission: 'endpoint.rice_shrimp_prices.index',
            },
            {
              label: '稻虾每周价格',
              url: '/pages/estate/estate-week-price',
              permission: 'endpoint.rice_shrimp_weekly_prices.index',
            },
            {
              label: '稻虾产业',
              url: '/pages/estate/estate-industry',
              permission: 'endpoint.rice_shrimp_industries.index',
            },
            {
              label: '稻虾流向',
              url: '/pages/estate/estate-flows',
              permission: 'endpoint.rice_shrimp_flows.index',
            },
            {
              label: '大宗物资',
              url: '/pages/estate/estate-materiels',
              permission: 'endpoint.materiels.index',
            },
          ],
        },
        {
          label: '设备管理',
          children: [
            {
              label: '设备管理',
              url: '/pages/device/index',
              permission: 'endpoint.device.index',
            },
            {
              label: '警报明细',
              url: '/pages/device/warning',
              permission: 'endpoint.warnings.index',
            },
          ],
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    menus(){
      
      return this.filterAsyncRoutes(this.menuList, this.userInfo?.permissions_slug ?? [])
    }
  },
  onLoad() {},
  methods: {
    hasPermission(roles, route) {
      if (route.permission) {
        return roles.some((role) => route.permission.includes(role))
      } else {
        return true
      }
    },
    filterAsyncRoutes(routes, roles) {
      const res = []
      routes.forEach((route) => {
        const tmp = { ...route }
        if (this.hasPermission(roles, tmp)) {
          if (tmp.children) {
            tmp.children = this.filterAsyncRoutes(tmp.children, roles)
          }
          res.push(tmp)
        }
      })
      return res
    },

    linknavFn(item) {
      uni.navigateTo({
        url: `${item.url}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.banner-section {
  .banner_img {
    width: 100%;
    height: 280rpx;
  }
}
.index-page {
  background-color: #f8f8f8;
  .content-box {
    padding-top: 30rpx;
    padding-bottom: 150rpx;
  }
}
.menus-section {
  padding: 20rpx;
  font-size: 28rpx;
  margin-top: -18rpx;
  .title-t {
    margin-bottom: 24rpx;
    padding: 0 10rpx;
    font-size: 28rpx;
    font-weight: bold;
  }
}
.menu-ul {
  display: flex;
  flex-wrap: wrap;
  .menu-li {
    flex: 0 0 25%;
    text-align: center;
    padding: 0 10rpx;
    margin-bottom: 18rpx;
    .menu_item {
      background-color: #fff;
      box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
      min-height: 90rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10rpx 15rpx;
      height: 100%;
    }
  }
}
</style>
