<!--
  Jeepay 通用列表条目， 包含 头像， 主标题， 副标题 
  
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/16 15:55
-->
<template>
	<view :class="`list-item ${props.viewClass}`">
	  <image :style="props.logoStyle" v-if="props.logo"  :src="props.logo" mode="scaleToFill" />
	  <view class="list-info">
	    <view class="list-title">
	      <view class="list-name">
			<slot name="title">{{ props.title }} </slot>
		  </view>
		  <slot name="titleRight">
			  
			  <!-- 直接写 typeof 页面报错。  -->
			  <template v-if="isShowState()" >
			  		<view v-if="props.state == 1" class="state-dot state-dot-enable"></view>
			  		<view v-else class="state-dot state-dot-disable"></view>
			  </template>
			  
			  <template v-if="navListComputed">
				<image style="width: 70rpx; height: 70rpx" src="/pageDevice/static/devIconImg/icon-more-white.svg" mode="scaleToFill" @tap="single.open()" />
			  </template>
		  </slot>
	    </view>
	    <view class="list-subtitle"><slot name="subtitle">{{ props.subtitle }} </slot></view>
	  </view>
	  <JSinglePopup ref="single" :list="navListComputed" activeColor="#FF5B4C" />
	</view>
	
</template>

<script setup>
	
import {ref, reactive, onMounted, computed } from 'vue'
import ak from '@/commons/utils/ak.js'

// 弹层
const single = ref()

// 定义传入属性
const props = defineProps({
	
  title: { type: [String, Number] }, // 标题
  
  subtitle: { type: [String, Number] }, // 副标题
  
  logo: { type: String }, // 图标
  
  logoStyle: { type: Object } , // logo颜色背景图
  
  moreBtnList: { type: Array }, //更多按钮
  
  // 状态开启（蓝色），or 关闭（置灰）  【 注意：state 和 moreBtnList 二选一， 或者请使用插槽覆写 titleRight   】
  state: { type: [Number, String] },
  
  viewClass: { type: String, default: '' },  // 样式透传， 小程序不支持再组件上加class(不生效), 需要特殊定义，特殊传入。
  
})

function isShowState(){
	return typeof(props.state) != 'undefined' 
}


// 计算属性 
let navListComputed = computed(() => {
	
	if(!props.moreBtnList){
		return props.moreBtnList
	}
    return props.moreBtnList.filter(r => hasEnt(r.entId))
})

function hasEnt(entId){
	
	// 不包含： 说明无需隐藏
	if(!entId){
		return true
	}
	return ak.ent.has(entId)
}

</script>

<style>
</style>