<template>
  <view class="list-item" :class="{ 'border-bottom': showBorder }" @click="handleClick">
    <!-- 左侧文本 -->
    <view class="left-content">
      <text class="left-text" :style="getLeftTextStyle()">{{ leftText }}</text>
    </view>
    
    <!-- 右侧内容 -->
    <view class="right-content">
      <!-- 右侧文本 -->
      <text v-if="rightText" class="right-text" :style="getRightTextStyle()">{{ rightText }}</text>
      
      <!-- 右侧图片 -->
      <image 
        v-if="rightImage" 
        :src="rightImage" 
        class="right-image"
        mode="aspectFit"
      ></image>
      
      <!-- 右侧自定义内容插槽 -->
      <slot name="right"></slot>
      
      <!-- 右箭头 -->
      <view v-if="showArrow" class="arrow">
        <view class="iconfont icon-jiantou2" :style="getArrowRightStyle()">
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    // 左侧文本
    leftText: {
      type: String,
      default: ''
    },
	// 左侧颜色
	leftTextColor: {
	  type: String,
	  default: '#6C6A66'
	},
	// 左侧文本大小
	leftTextSize: {
	  type: String,
	  default: '28rpx'
	},
    // 右侧文本
    rightText: {
      type: String,
      default: ''
    },
	// 左侧颜色
	rightTextColor: {
	  type: String,
	  default: '#333333'
	},
	// 左侧文本大小
	rightTextSize: {
	  type: String,
	  default: '30rpx'
	},
    // 右侧图片
    rightImage: {
      type: String,
      default: ''
    },
    // 是否显示右箭头
    showArrow: {
      type: Boolean,
      default: true
    },
	// 右箭头的大小
	arrowRightSize:{
		type:String,
		default:'32rpx'
	},
	// 右箭头的颜色
	arrowRighColor:{
		type:String,
		default:'#000'
	},
    // 是否显示底部边框
    showBorder: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
	getArrowRightStyle() {
	 return {
	   fontSize: this.arrowRightSize,
	   color:this.arrowRighColor
	 };
	},
	getLeftTextStyle() {
	 return {
	   fontSize: this.leftTextSize,
	   color:this.leftTextColor
	 };
	},
	getRightTextStyle() {
	 return {
	   fontSize: this.rightTextSize,
	   color:this.rightTextColor
	 };
	}
  }
}
</script>

<style scoped>
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0rpx;
  background-color: #ffffff;
  min-height: 100rpx;
  box-sizing: border-box;
}

.border-bottom {
  border-bottom: 1rpx solid #E8E7E7;
}

.left-content {
  flex: 1;
}

.left-text {
  font-size: 32rpx;
  color: #333333;
  line-height: 1.5;
}

.right-content {
	
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
}

.right-text {
  font-size: 28rpx;
  color: #666666;
  margin-right: 16rpx;
}

.right-image {
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
  border-radius: 8rpx;
}

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon {
  font-size: 30rpx;
  color: #cccccc;
}
</style>