<template>
	<view class="_list" :style="{borderBottom:noborder?'none':''}">
		<view class="_icon" v-if="icon">
			<ciy-svgimg :src="icon"></ciy-svgimg>
		</view>
		<view class="_title">{{title}}</view>
		<slot></slot>
		<view class="_right" v-if="right" v-html="right"></view>
		<view class="_reddot" v-if="reddot">{{reddot>99?'99+':reddot}}</view>
		<view class="_more" v-if="more"></view>
	</view>
</template>

<style scoped>
	._list {
		position: relative;
		background: var(--bg2);
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--bg6);
		height: 3.5em;
	}

	._list>._icon {
		pointer-events: none;
		flex-shrink: 0;
		width: 1.6em;
		height: 1.6em;
		margin-left: 0.7em;
	}

	._list>._title {
		pointer-events: none;
		flex: 1;
		margin-left: 1em;
		white-space: nowrap;
		color: var(--txt9);
		/* overflow: hidden;
		text-overflow: ellipsis;
		min-width: 7em; */
		line-height: 1.1em;
	}

	._list>._right {
		pointer-events: none;
		text-align: right;
		font-weight: 100;
		margin: 0 1em;
		line-height: 1.2em;
		overflow: hidden;
		max-height: 100%;
		color: var(--txt6);
	}

	._list>._more {
		pointer-events: none;
		margin-right: 1em;
		width: 1em;
		height: 1em;
		flex-shrink: 0;
		background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTM5Mi4zMDgzNjQgNzEuODE5NjM2YTU4LjE4MTgxOCA1OC4xODE4MTggMCAwIDAtNzcuOTE3MDkxIDg2LjMxODU0NmwzLjA3MiAyLjc5MjcyNyAzNzkuOTA0IDMxOS4wOTIzNjRhMzQuOTA5MDkxIDM0LjkwOTA5MSAwIDAgMSA0LjI1ODkwOSA0OS4xOTg1NDVsLTEuODM4NTQ2IDIuMDI0NzI3LTIuMDAxNDU0IDEuODYxODE5TDMxNi43NDE4MTggODYzLjcyMDcyN0E1OC4xODE4MTggNTguMTgxODE4IDAgMCAwIDM4OS44MTgxODIgOTU0LjE4MTgxOGwzLjIzNDkwOS0yLjYyOTgxOCAzODAuOTk3ODE4LTMzMC41NDI1NDVhMTUxLjI3MjcyNyAxNTEuMjcyNzI3IDAgMCAwIDIuNTYtMjI2LjI4MDcyOGwtNC4zNzUyNzMtMy44MTY3MjdMMzkyLjMwODM2NCA3MS44MTk2MzZ6JyBmaWxsPScjOTk5OTk5Jz48L3BhdGg+PC9zdmc+");
	}

	._list ._reddot{
		background: var(--dag5);
		border:1px solid var(--dag6);
		border-radius: 50%;
		text-align: center;
		color:var(--bg1);
		height:2.5em;
		width:2.5em;
		line-height: 2.5em;
		font-size:0.6em;
		margin:0 1em;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
<script>
	export default {
		props: {
			icon: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			right: {
				type: String,
				default: ''
			},
			more: {
				type: Boolean,
				default: false
			},
			noborder: {
				type: Boolean,
				default: false
			},
			reddot: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
			};
		},
		watch: {},
		computed: {
		},
		mounted() {},
		methods: {
		}
	}
</script>