<template>
  <view
    class="wl_cell"
    :style="{
      borderTop: props.borderTop ? borderStyle : '',
      padding: props?.padding || paddingStyle
    }"
    @click="handleClick"
  >
    <view class="wl_cell_header">
      <view :style="props.titleStyle" class="title">
        {{ props?.title || '标题' }}
        <text v-if="required"> * </text>
      </view>
      <view v-if="props?.value" class="right_value">
        {{ props?.value }}
      </view>
      <view v-else :style="props.rightStyle" class="right_value">
        <slot></slot>
      </view>
      <view class="isLabelRight" v-if="props?.isLink">
        {{ !props?.value && props?.isPlaceholder ? props?.tip || '请选择' : '' }}
        <uni-icons type="right" size="15" color="#333"></uni-icons>
      </view>
    </view>
    <view v-if="props?.des" class="rent_des">
      <uni-icons type="info" size="15" color="#999"></uni-icons>
      <text>{{ props?.des }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
const borderStyle = '1rpx solid #eee'
const paddingStyle = '10rpx 0'
import { goto } from '@/common/libraries/naviHelper'
const props = defineProps([
  'title',
  'required',
  'borderTop',
  'isLink',
  'tip',
  'value',
  'url',
  'isPlaceholder',
  'padding',
  'des',
  'rightStyle',
  'titleStyle'
])
const emit = defineEmits(['click'])

const handleClick = () => {
  if (props?.url) {
    goto(props.url)
  } else {
    emit('click')
  }
}
</script>
<style lang="scss" scoped>
.wl_cell {
  padding: 15rpx 0;
  .wl_cell_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .title {
    color: #333;
    font-size: 28rpx;
    padding: 15rpx 0;
    text {
      color: #f00;
    }
  }
  .right_value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 15rpx 10rpx;
    font-size: 28rpx;
  }
}
.isLabelRight {
  font-weight: 400;
  font-size: 28rpx;
  color: #888;
  display: flex;
  align-items: center;
  height: 56rpx;
  padding: 15rpx 0;
}
.rent_des {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 20rpx;
  padding: 0 0 20rpx 0;
  text {
    padding-left: 10rpx;
  }
}
</style>
