<!--
  描述信息展示 
  通用信息
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/12/06 10:11
-->
<template>
	<view :class="{ 'c-desc-view-item': true, 'bottom-border': props.bottomBorder }">
		<view class="title">
			<slot name="title">{{ props.title }}</slot>
		</view>
		<view class="desc">
			<slot name="desc">
				<image v-if="props.descIsImg && props.desc" :src="props.desc" mode="scaleToFill" class="default-img" />
				<template v-else>{{ props.desc }}</template>
			</slot>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	// 标题
	title: { type: String },

	// 描述
	desc: { type: String },

	// 描述是否是图片
	descIsImg: { type: Boolean, default: false },

	// 下边框
	bottomBorder: { type: Boolean, default: false }
});
</script>

<style lang="scss" scoped>
.c-desc-view-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 40rpx;
	font-size: 30rpx;
	font-weight: 400;

	.title {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 200rpx;
		color: #808080;
	}
	.desc {
		flex: 1;
		text-align: right;
		color: #000;
	}

	&:first-child {
		margin-top: 20rpx;
	}
	&:last-child {
		margin-bottom: 20rpx;
	}

	.default-img {
		width: 150rpx;
		height: 150rpx;
		background-color: #f7f7f7;
	}
}

.bottom-border {
	padding-bottom: 40rpx;
	border-bottom: 1rpx solid #ededed;
}
</style>
