<template>
  <view class="u-cell-item-plus" @click="$emit('click')">
    <!-- 左侧图标区域 -->
    <view class="u-cell-icon">
      <!-- 如果传入的是插槽，优先渲染插槽 -->
      <slot name="icon">
        <!-- 否则判断是图片还是内置图标 -->
        <template v-if="isImage(icon)">
          <image :src="icon" class="icon-img" mode="aspectFit"></image>
        </template>
        <template v-else-if="icon">
          <u-icon :name="icon" size="40"></u-icon>
        </template>
      </slot>
    </view>

    <!-- 标题文字 -->
    <view class="u-cell-title">{{ title }}</view>

    <!-- 右箭头 -->
    <view class="u-cell-arrow" v-if="arrow">
      <u-icon name="arrow-right"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  name: "UCellItemPlus",
  props: {
    title: String,
    icon: String,
    arrow: Boolean,
  },
  methods: {
    isImage(src) {
      return src && (src.startsWith("http") || src.endsWith(".png") || src.endsWith(".jpg") || src.endsWith(".jpeg") || src.endsWith(".svg"));
    },
  },
};
</script>

<style scoped>
.u-cell-item-plus {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
  background-color: #fff;
}

.u-cell-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-img {
  width: 48rpx;
  height: 48rpx;
  border-radius: 8rpx;
}

.u-cell-title {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.u-cell-arrow {
  color: #999;
}
</style>
