<template>
	<view class="sidebar-container">
   
		<view class="container">
		  <view class="sidebar-title">
			<image :src="$getImages(`${titleIcon}`)" class="title-image" v-if="titleIcon"></image>
			  {{ label }}
			</view>
		  <u-row class="sidebar-row">
			<template v-for="(item,index) in children">
				<u-col :span="span" :index="index"  class="sidebar-col">
				  <image :src="$getImages(item.backImg)" class="hbg-image"></image>
				  <view @click="handleFun(item)">
					<SidebarItem :info="item" :hint="himObj[item.perms]"></SidebarItem>
				  </view>
				</u-col>		  
			</template>  
		  </u-row>
		</view>
	</view>
</template>

<script>
import SidebarItem from './module/sidebarItem.vue'
export default {
	components: {
		SidebarItem,
	},
    props: {
        label: {
            type: String,
            default: ''
        },
        children: {
            type: Array,
            default: () => {
                return []
            }
        },
		span: {
		    type: Number,
		    default: 3
		},
		titleIcon:{
			type: String,
			default: ''
		},
		himObj: {
		    type: Object,
		    default: () => {
		        return {}
		    }
		},
    },
	computed: {
		allPermission() {
			return this.children.map((e) => e.perms)
		}
	},
	data() {
		return {
			
		}
	},
	onLoad() {
	},
	methods: {
		handleFun(item) {
			
			if(item.event) {
				this.$emit(`${item.event}`)
			} else if (item.path) {
				uni.navigateTo({
					url: item.path,
				})
			}else {
				uni.showToast({
					title: '功能正在开发',
					icon: 'none'
				})
      }
		}
	}
}
</script>

<style lang="scss" scoped>
.sidebar-container {
    position: relative;
    width: 100%;
    height: auto;
    .container {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        .sidebar-title {
          font-family: PingFangSC, PingFang SC;
          width: 100%;
          font-weight: bold;
          color: #333333;
          font-size: 16px;
          margin-bottom: 24rpx;
          display: flex;
          align-items: center;
        }
        .title-image{
          width: 40rpx;
          height: 40rpx;
          margin-right: 6rpx;
        }
        .sidebar-list{
          width: 100%;
          height: 144rpx;
          margin-bottom: 16rpx;
          .sidebar-item{
          height: 100%;
          position: relative;
          .background-image {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
          }
          .icon-image{
            width: 28rpx;
            height: 28rpx;
            margin-left: 12rpx;
          }
          .info{
            position: absolute;
            left: 40rpx;
            top: 28rpx;
            color: #fff;
            font-size: 24rpx;
            .label-title{
              font-size: 32rpx;
            }
            .icon-warp{
              display: flex;
              align-items: center;
              margin-top: 12rpx;
            }
          }
        }
        }
        .hbg-image{
          position: absolute;
          width: 146rpx;
          height: 148rpx;
        }
        .sidebar-row{
          width: 100%;
          flex-wrap: wrap;
          // margin-bottom: 20rpx;
        }
        .sidebar-col{
          height: 148rpx;
          margin-bottom: 20rpx;
          display: flex;
          align-items: center !important;
        }
        
        
    }
}

::v-deep {

	
}
</style>
