<!--
 * @Author: yangpeiqin
 * @Date: 2023-12-11 10:33:23
 * @LastEditors: zhangmudan
 * @LastEditTime: 2024-07-24 14:26:54
 * @FilePath: \tqApp\components\sidebar\index.vue
-->
<template>
	<view class="sidebar-container" v-if="$hasPermiOr(allPermission)">
    <view class="container" v-if="direction=='vertical'">
      <template v-for="(item,index) in sidebarList">
          <view :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)" class="sidebar-list">
            <view @click="handleFun(item)" class="sidebar-item">
              <image :src="item.icon" class="background-image"></image>
              <view class="info">
                <view class="label-title">{{ item.label }}</view>
                <view class="icon-warp">点击进入<image :src="$getImages('/assetsMobile/images/index/icon-in.png')" class="icon-image"></image></view>
              </view>
            </view>
          </view>
        </template>  
    </view>
    <view class="container" v-else-if="direction=='user' || (!hasPlat(['sanitation']) && !hasPlat(['enterprises']))">
        <view class="sidebar-title" v-if="hasTitle">{{ label }}</view>
        <u-row customStyle="width: 100%;flex-wrap: wrap;">
          <template v-for="(item,index) in sidebarList">
            <u-col :span="span"  :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)">
              <view @click="handleFun(item)">
                <SidebarItem :info="item" :direction="direction"></SidebarItem>
              </view>
              <!-- <navigator v-else :url="item.url">
                  <SidebarItem :info="item"></SidebarItem>
              </navigator> -->
            </u-col>
          </template>  
        </u-row >
    </view>
    <view class="container" v-else>
      <view class="sidebar-title" v-if="hasTitle">
        <image :src="titleIcon" class="title-image" v-if="titleIcon"></image>
          {{ label }}
        </view>
      <u-row class="sidebar-row">
        <template v-for="(item,index) in sidebarList">
            <u-col :span="span" :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)" class="sidebar-col">
              <image :src="$getImages(`/assetsMobile/images/index/icon-hbg${item.iconbg}.png`)" class="hbg-image"></image>
              <view @click="handleFun(item)">
                <SidebarItem :info="item"></SidebarItem>
              </view>
              <!-- <navigator v-else :url="item.url">
                  <SidebarItem :info="item"></SidebarItem>
              </navigator> -->
            </u-col>
          
          
        </template>  
      </u-row>
    </view>
	</view>
</template>

<script>
import SidebarItem from './module/sidebarItem.vue'
export default {
	components: {
		SidebarItem,
	},
    props: {
        label: {
            type: String,
            default: ''
        },
        sidebarList: {
            type: Array,
            default: () => {
                return []
            }
        },
		span: {
		    type: Number,
		    default: 3
		},
		hasTitle: {
			type: Boolean,
			default: true
		},
    direction:{
      type: String,
			default: 'horizontal'
    },
    titleIcon:{
      type: String,
			default: ''
    }
    },
	computed: {
		allPermission() {
			return this.sidebarList.map((e) => e.permission)
		}
	},
	data() {
		return {
			
		}
	},
	onLoad() {
	},
	methods: {
		handleFun(item) {
			
			if(item.event) {
				this.$emit(`${item.event}`)
			} else if (item.url) {
				uni.navigateTo({
					url: item.url,
				})
			}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>
